24

Our web site has been under a constant development for a better part of the last five years. As it happens, pretty much all the styles for the site are in one big CSS file. With time this css file has grown to about 9,000 lines - and I'm sure some of those styles are not used any more and quite a few styles provide duplicate functionality.

The site is written with PHP/Smarty; there are over 300 smarty templates and the whole site contains over 1000 different pages (read - unique URLs). I'm sure it will continue growing - as will the CSS file.

What's the best way to clean up this file?

Update: Unfortunately, online parsers where I put in a URL won't work for me, as 75% of the site is behind username/password logins - and depending on login, there are half a dozen different roles, each of which has their own set of of pages. There are also transactional elements (online shop), where the pages are displayed after (for example) credit card payment is taken/processed. I doubt that any online tool would be able to handle any of these. Therefore if there's a tool, it would have to work on a source tree.

Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
Aleks G
  • 56,435
  • 29
  • 168
  • 265
  • Definitely a bad smell that you've 1000 unique URLs – Montagist May 05 '14 at 16:15
  • 4
    @Montagist Have you ever seen really large websites? I've worked on one with over 100,000 unique URLs, with close to a million visitors every day. There's nothing wrong with large number of URLs, it all depends on the functionality you are supporting. – Aleks G May 05 '14 at 20:15
  • 4
    Amazon better get to work on reducing their urls then. – Chris Fletcher Jul 31 '14 at 14:39

5 Answers5

9

Short of going through each .tpl file and searching the file for the selectors manually, I don't see any other way.

You could of course use Dust-Me selectors, but you'd still have to go through each page that uses the .tpl files (not each url as I know that many of them will be duplicates).

Sounds like a big job! I had to do it once before and I did exactly that, took me a week.

Another tool is a Firebug plugin called CSS Usage. As far as I read it can work across multiple pages but might break if used site-wide. Give it a go.

Triumph! Check out the Unused CSS online tool. Type your index url into the field and voila, a few minutees later a list of all the used selectors :) I know you want the unused ones, but then the only work is finding the unused ones in the file (ctrl+f) and removing them :)

Make sure to use the 2nd option, they'll email you the results of the crawl of your entire webpage. Might take up to half an hour, but that's far better than a week. Take some coffee :)

Just tested it, works a treat :)

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • sadly I did this once the same way - it's damn time consuming if you really want to do a perfect cleanup. Take one portion of the page and do a cleanup on all subfolders - take a break - repeat :) – easwee Nov 14 '11 at 10:30
  • Yikes, it's using smarty too..more yikes. I'd just as soon redo the entire site rather than try to clean _that_ up ha. (Yes, I know that may not be realistic in this case) – Yes Barry Nov 14 '11 at 10:33
  • Edited the answer, found what you need :) – Kyle Nov 14 '11 at 10:35
  • :D that's ok it happens to me from time to time. And yes it does work like a treat! +1 for finding the _most_ solutions lol – Yes Barry Nov 14 '11 at 10:40
  • Thanks, you get +1 too for providing the best one first :) – Kyle Nov 14 '11 at 10:46
  • 1
    Unfortunately, online parsers where I put in a URL won't work for me, as 75% of the site is behind username/password logins - and depending on login, there are half a dozen different roles, each of which has their own set of of pages. There are also transactional elements (online shop), where the pages are displayed after (for example) credit card payment is taken/processed. I doubt that any online tool would be able to handle any of these. Therefore if there's a tool, it would have to work on a source tree. – Aleks G Nov 14 '11 at 14:56
  • Just save the pages as static sites and put them in a directory under www in your site structure, the crawler will find these too. If they're linked to of course. It's either that or go through them manually :) – Kyle Nov 14 '11 at 14:58
  • @KyleSevenoaks: Thanks :) As I stated, there are over 1000 pages; it'll take me ages to save them all as a static site. It'll be quicker to go through it manually – Aleks G Nov 14 '11 at 17:10
  • Wow sounds like a biiiig site, good luck and glad I could help :-) – Kyle Nov 14 '11 at 17:34
  • I'll accept this answer, as it's the most comprehensive in terms of offering options. I'm afraid we won't be doing much of a clean-up apart from occasional things that jump out. I'll just need to make sure that going further we won't continue with this mess. – Aleks G Jan 20 '12 at 10:54
5

I had to do this about 3 years ago on a rather large classic ASP web application.

I took the approach that there are only a finite number of styled items on each page and started by identifying these. For example, I went through the main pages and identified that the majority of labels were bold and dark blue and that all buttons are the same width (for example).

Once I'd done that, I spoke to the team and we decided that anything that didn't conform to these rules I'd identified should conform, so I wrote a stylesheet based on this assumption.

We ended up with about 30 styles to apply to several hundred pages. Several regular-expression-find-and-replaces later (we were fortunate that the original development had used reasonably well structured HTML) we had something usable that just needed the odd tweaking.

The key points are:

  1. Aim for uniformity across the site. In other words, don't assume that the resultant site will look exactly the same as the original, but aim for it to look the same as itself (uniform) from page to page
  2. Tackle the obvious styles first (labels / buttons / paragraph fonts / headers) and then worry about the smaller styles or the unique styles later

You might also find that keeping unique styles (e.g. a dashboard page that has unique elements that don't appear elsewhere) in separate files to keep the size of the file down. Obviously, it depends on your site as to whether this would help.

m-smith
  • 2,943
  • 4
  • 25
  • 39
  • I think this would be the best approach, given the circumstances. Of course, a lot of special tweaking in the css right now is caused by the requirement to support IE 6 and up... It'll be interesting to see how that would sort itself. The main challenge is the sheer size of the site (over 1000 pages, 7 user roles, over 10,000 styles in the stylesheet right now). – Aleks G Nov 14 '11 at 17:13
3

Additionally, there are many sites that will search for these for you. Like this one: http://unused-css.com/ I don't know how they measure up to Dust-Me Selectors, but I know that Dust-Me selectors isn't compatible with Firefox 8.0.

Yes Barry
  • 9,514
  • 5
  • 50
  • 69
  • Unfortunately, online parsers where I put in a URL won't work for me, as 75% of the site is behind username/password logins - and depending on login, there are half a dozen different roles, each of which has their own set of of pages. There are also transactional elements (online shop), where the pages are displayed after (for example) credit card payment is taken/processed. I doubt that any online tool would be able to handle any of these. Therefore if there's a tool, it would have to work on a source tree. – Aleks G Nov 14 '11 at 14:57
  • I will have a look at the Dust-Me (although I have FF8, so will need to see what the deal there is) – Aleks G Nov 14 '11 at 14:57
  • @AleksG: regarding the FF8 incompatibility: it might just work the unpack the add-on and change the FF version number in it – PeeHaa Nov 14 '11 at 15:23
2

You could use Dust-Me Selectors plugin for FireFox to find unused styles:

http://www.sitepoint.com/dustmeselectors/

If you have a sitemap you could use that to let the plugin crawl your site:

The spider dialog has all the controls for performing a site-wide spider operation. Enter the URL of either a Sitemap XML file, or an HTML sitemap, and the program will read that file and extract all its links. It will then load each of those pages in turn and perform a cumulative Find operation on each one.

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
  • Unfortunately, spider parsing where I put in a URL won't work for me, as 75% of the site is behind username/password logins - and depending on login, there are half a dozen different roles, each of which has their own set of of pages. There are also transactional elements (online shop), where the pages are displayed after (for example) credit card payment is taken/processed. I doubt that any online tool would be able to handle any of these. Therefore if there's a tool, it would have to work on a source tree. – Aleks G Nov 14 '11 at 14:58
  • @Aleks G: If that's the case I wish you all the luck cleaning up the CSS! I'm afraid it will be a huge job. :-) – PeeHaa Nov 14 '11 at 15:22
0

I see there's not a good answer yet. I have tried the "Unused CSS online tool" and seems to work ok for public sites. The problem is if you have a CSS to show your public website + an intranet (for example: wordpress site + login for registered users). The intranet pages woun't be tracked and you will lose your css styles.

My next try will be using gulp + uncss: https://github.com/ben-eb/gulp-uncss

You have to define all the urls of your site (external and internal) and (maybe; not sure) if you are running the site with user + password on your browser, gulp+uncss can go inside the internal url's.

Update: I see unused-css online tool has a login solution!

gtamborero
  • 2,898
  • 27
  • 28
  • I have tried unused-css and gulp solutions - none seem to do the job. The full list of urls is impossible to produce - it's in hundreds of thousands - they are dynamically generated from the content in the database. There are further multiple roles, depending on the user logged in - with different additional set of pages each. Finally, I doubt anything can be done (other than source code parsing) about online shop pages post payment (e.g. payment-in progress, payment confirmation, purchase receipts, order history, etc, etc.) – Aleks G Jan 22 '17 at 09:55