homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

CSS "distiller" - optimize stylesheets
Weed out the dead wood

 9:39 am on Feb 2, 2006 (gmt 0)

As usually, I started out with the small CSS my CMS generated, and step by step extended so it now works as I want it to. However, this process attracts duplicate rulesets, repeated explicit defintion of inherited elements etc. I think that maybe 30% of any given CSS are redundant instructions which can be eliminated without changing the design.

Since CSS works like a programming language, I wonder if there are CSS-Optimizers, CSS-Distillers or CSS-Compilers out there which go through the code, weed out any unneccessary instruction, and give me a clean, lean stylesheet which not only does what the previous one did as well but also loads faster.

I am NOT talking about the tools which simply take out all the linewraps to make the file smaller. Some of them also compress color statements - that's a first move into what I talk about. But still they treat the CSS mechanical, where I am looking for a tool which "understands" my CSS and recompiles it.

So, anybody knowing such a tool?



 4:11 am on Feb 3, 2006 (gmt 0)


It's not going to fix them for you automatically, but it will point out errors.


 8:30 am on Feb 3, 2006 (gmt 0)


No help sorry, but it would be a great tool if someone could build one, I imagine the biggest problem would be dealing with different type and/or specific selectors to isolate when an element even matches also if there's multiple stylehsheets, it get's much more difficult unless there would be a way to load many stylesheets in cascade order

div#nav a:link
html>body #navcontainer li *

is there an odd one out?

has anyone has come across anything remotely useful in this area, I seem to spend so much time just rearranging stylesheets so I can "see" ~ when I first get a "fix it" job :o

Tools like the FF Web Dev bar make it easy to spot what CSS is/are actually in play on an element, which is useful for pinpointing, but that still involves a manual check on each element and page and what's to say you "fix it" for one page but it breaks another.. it's not a perfect solution by any means

WEB Dev Toolbar > CSS > View Style Information (Ctrl+Shift+Y), cursor will change to crosshair - then click on an element and it will open a new page showing all the styles (from all sheets, it will show you which stylesheet they're in too) which are in play on the element. At least it less to troubleshoot :)



 9:13 am on Feb 3, 2006 (gmt 0)

Thanks. Maybe I should have mentioned that I know (and use) the validator as well as the FF toolbar as well as a beautifier based on CSSTidy (feel free to scrap the URL if it's against TOS: [cdburnerxp.se...] ).

What I am looking for goes BEYOND all these. Consider this situation:

<div id="content">
<a href="x">x</a>
<div id="subcontent">
<a href="y">y</a>

OK, now I have this CSS:

a {color: red;}
#content a {color: red;}
#content #subcontent a {color: red;}
#subcontent a {color: red;}

So basically all except for the first rule are redundant. So the tool I envision should detect this, and remove the other 3 rules.

This can even go one step beyond, but then the tool must analyze the associated HTML as well:

<div id="content">
<div id="subcontent">
<a href="y">y</a>

a {color: red;}
#content a {color: green;}
#subcontent a {color: blue;}

In this case, the tool needs to find out that the green and the red link color is nowhere to be used, so it should change the CSS to:

a {color: blue;}

The more complex the code gets, the more sophisticated such a "CSS recompiler" needs to be.

If only I would be any good at programming...


 6:16 pm on Feb 3, 2006 (gmt 0)

I haven't explored all its capabilites, but might TopStylePro (probably not the free version) help with at lest some of this?


 6:38 pm on Feb 3, 2006 (gmt 0)

pmk. I kinda thought you were after something like that,
but taking it to the next level and cleaning the HTML too now that I would like to see, in these days of templates/blogs/cms an element may not be present on one page but there on another, it would be nice though :)

I think maybe the SE CSS parsers will cover the first bit first assuming they're ever going to be able to weed out redundant rules in order to detect "naughty" things. Perhaps once they conquer the Cascade they'll throw out a tool as an aside.. dreams..

bruhaha, thanks will take a look


 1:18 pm on Feb 5, 2006 (gmt 0)

Perhaps once they conquer the Cascade they'll throw out a tool as an aside..

Well, I think THAT is too much dreaming. But the initial idea is valid: once the SE spiders have "mastered" (as you call it) CSS and have figured out how to distill it down to find out all the dirty tricks (where "display:none" is just the simplest one), then I think we will see 3rd party tools which will perform similar tasks (and hopefully the one I envision) too.


 1:24 pm on Feb 5, 2006 (gmt 0)

With the possible complexity of selectors and inherent need for overriding rules under certain circumstances I doubt it is something that can be done. Not only would such a tool require the parser to be able to read (and understand) all sorts of CSS selectors, but also read and understand HTML and the element cascade.

The complexity is simply daunting.


 8:17 am on Feb 6, 2006 (gmt 0)

Can't this be based on browser technology? A browser has to understand all of this...


 8:21 am on Feb 6, 2006 (gmt 0)

It would probably be best if it came from the browser industry. Shouldn't be a problem to get a devtool working in Mozilla which could tell you whenever a style was overridden by something else.

But from there to optimizing your CSS and suggesting improvements ...?


 8:49 am on Feb 6, 2006 (gmt 0)

Telling if a style gets overridden (correct grammar?) is the first step. Telling if a style is used at all the second. Combining this with a very simple walkthrough through all pages of the site gives you a very clear indication which styles are used and which aren't.

From there, a human can take over.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved