Finding unused styles in the stylesheet

[csdude55]

I'm (still) going through a major rebuild, and started out using the stylesheet from my old design. But as it has progressed, I've stumbled over a few styles that are in the stylesheet that aren't being used anymore.

I already have 511 styles in the sheet, and still have a ways to go so it'll only get bigger. At least some are likely to be unused leftovers, though, so I'd like to find a way to easily remove whatever I can without having to scan for each of them manually!

I know that I can compress the CSS using sites like:

[csscompressor.com...]

and that's awesome, it cut my file size from 44.9k to 34.4k! It goes all the way to 31.3k if I discard styles that aren't CSS 3.0 compatible, which would probably be fine. But if I can cut another few kb by removing unused styles, that'd be even better.

Any suggestions on how one might find these unused styles?

[lucy24]

There exist utilities that will do it for you, but I've always done it by searching manually in any text editor that allows multi-file searches, like
p class = "(\w+ )*classname
Obviously not practical in a multi-million-page site, or one that doesn't exist as files stored on your HD. (But there's got to be a backup somewhere ... right? Search that.)

if I discard styles that aren't CSS 3.0 compatible

This line made my blood run cold, because just what have you got in there? <font> tags? Oh, wait, that's HTML, like all those formats that used to be attached to table elements.

A while back, I did make sure to get rid of all <a name> tags, and I continue to double-check each new file for
(?<!meta |map )name ?=
(There exist other elements that can carry the "name" attribute, but these happen to be the only ones I would ever use.) But again I guess that's HTML. When you have very old content, most of the archaic stuff is likely to be found in the HTML, rather than the CSS as such.

Oh! And one useful category to check for is vendor extensions: anything in the form
-\w+-
(or specifically -webkit- and -moz-) because most of those are now either deprecated or incorporated into the CSS standard. A few years ago I was able to dump a lot of column-related styles that way.

[csdude55]

I've always done it by searching manually in any text editor that allows multi-file searches

I use Notepad++, which is a great editor, and it can do a multi-file search easily enough. I was just hoping that you guys might know something automated that could do all of them at once :-D Manually scanning for 500+ is going to take all day for a relatively minimal gain, so I'll probably never actually get around to doing it.

This line made my blood run cold, because just what have you got in there?

I didn't actually look at the results to see what all it removed, I'm nowhere near ready to actually use the compressed file so I just checked it for the thread. But I'm guessing that this would be a good example of something that's actually in my stylesheet, but would mostly be removed:

/* Default */
background: #313943;

/* IE10 */
background: -ms-linear-gradient(top, #000 0%, #313943 100%);

/* IE8+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#313943');

/* Safari, Chrome 10 */
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#313943));

/* Chrome 11+ */
background: -webkit-linear-gradient(top, #000 0%, #313943 100%);

/* FF 3.6+ */
background: -moz-linear-gradient(top, #000, #313943);

/* Opera */
background: -o-linear-gradient(top, #000 0%, #313943 100%);

/* Proposed W3C Markup */
background: linear-gradient(to bottom, #000 0%, #313943 100%);

I use this gradient style for the website background, another for the header, and another for buttons. I THINK that the last one (linear-gradient) is all I actually need, and maybe filter: progid: for < IE9.

[lucy24]

Gosh. I've never seen a -ms- extension. Most of the time, if it isn't universally supported they pretend it doesn’t exist. But yeah, that's when you take a look at caniuse to see whether you really do need to make allowances for Firefox 3.6.

[tangor]

Might want to keep it all so that future code archeologists will have something to scratch heads over and debate for generations to come.

/humor

Meanwhile, 44 k really isn't that much any more... and when consider it is a load once and use many becomes even less important.

[csdude55]

@lucy24, I also have -ms-transform and -ms-user-select in there :-) They're listed along with the other common vendor prefixes here:

[css-tricks.com...]

But caniuse.com doesn't list them so I don't know what their actual support is. Per fandom.com the -ms prefix was supported in IE9:

[htmlcss.fandom.com...]

... but so was user-select, so I don't know the value for -ms-user-select. IE9 didn't support transform but did support -ms-transform, so I guess the prefix is really just for IE9.

@tangor, haha, I like that :-P But yeah, you're right that 44k isn't really that much, especially with compression. But as I'm trudging along I figure that I might as well save microseconds where I can. Any time saved on load time usually results in per pages per session, so it MIGHT help... and it certainly doesn't hurt :-)

[not2easy]

Some sites that were cutting edge back in the early days of css haven't felt a need to update further. It is best to take your css to w3.org's jigsaw CSS Validator tool: [jigsaw.w3.org...] and ask for the long report. I seem to recall that your coding generally tries to accommodate some older devices/browsers so some time spent with caniuse may be well spent.

One thing I found when looking for ways to reduce the css file size is to combine things so that instead of so many repeats, it now list all elements that have common color or margin rather than listing each separately and repeating. It has helped enormously. I do not know any simple, fast, easy, accurate way to do it, but sorting out css by its functions seemed to help with the consolidation for me. A section for layout elements, one for media queries (at the top) a section for colors/backgrounds, etc. helped for me. I spent more than a day to do it but having done that it became simple to just change colors to work fine on several sites.

[tangor]

@not2easy ...

Good method. I have mine grouped by semantic use based on OUTLINE structure. Helps me keep things organized ... and easy to spot when I attempt a brain phart version of something I already have in there!

What would be better is having a perfect memory of what HAS been done so we don't repeat ourselves over and over. (sigh)

[justa]

While it's a bit of a manual approach, you can use the Coverage tab within Google Developer Tools to find unused styles on a particular page.

If you have a set of templates on your new site, you could run each of these and compare a list of styles that are flagged. Anything that appears as missing on every template can go.

Here's the details on how to access it... [developers.google.com...]

[buckworks]

it MIGHT help... and it certainly doesn't hurt :-)

I take many actions on that basis!

[lucy24]

In the case of vendor extensions, the question is not which browser versions recognize the extension. It's which browser versions recognize a style without extension. For example it is not that many years since anything involving columns had to come in threes: {column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;} and so on.

If you have more than one person working on the site, you have to get them to agree on what order the styles go in, which is fun: “What do you mean, table-related rules (table, th, tr, td...) go before list-related rules (ul, ol, li...)? That’s the most ridiculous and counterintuitive thing I’ve ever heard of! And why are the styles for address elements (a and its pseudo-classes) way down there when they rationally should be over here?”

I just recently moved into the present millennium by deleting references to "hr" from most shared stylesheets. Remaining hr elements are so rare, there's no point even mentioning them globally.