The problem with CSS
21st of December 2004
CSS and web standards is a great tool for producing good web pages. It allows you to separate out content from presentation. The CSS file should be given a lot of responsibility and be very powerful in terms of what it can control.
The problem is that the CSS file can grow very big resulting in slow download times for the web surfer and heavy load on web servers. Usually it grows because you either:
- add more HTML that needs to designed but later the HTML is removed/expired but you don't remove what was added to the CSS file
- add more CSS to cover potential additions of HTML that never happen
A typical thing to do (in the design phase) is to add some HTML/content feature, then you add the CSS to go with it; six months later you uninstall that HTML/content feature but fears to remove the CSS because some other HTML/content feature might be dependent on the CSS that you just don't know by heart any more.
So what to do? I don't know. Of course we can be saints and preach not to get in to the pickle in the first place but that doesn't solve existing problems.
Are there any tools on the market that can analyse a webpage for redundant CSS? I've been thinking of creating one but have yet to discover a way to cover all webpages and not just the home page. Some pages might be password protected and some CSS might only apply when an error message appears.
As an example, Dabs's stylesheet is 19395 bytes big. Ebuyer's total is 25070 bytes big. That's about 18% of the total download size of their webpage! To contrast that, of my total webpage content 4% is CSS and my webpage doen't even use tables for the layout.
I've written about web optimization before here and here. It's all about stripping all unnecessary whitespace to decrease download times. It's not a bad pattern but sometimes it just doesn't work and that is when the stuff your optimizing is stinkingly too big.
One potential solution that I was thinking about is a profiler that loads a CSS file and a list of URLs within a homepage. As soon as any CSS is matched with the HTML, you remove that CSS from the CSS file. As you test more and more pages the CSS file will consequently shrink. Eventually the CSS file will be much smaller and it will then become manageable to inspect the final possible modifications manually. The would however require a serious analyser that could handle not-so-straight-forward CSS like this:
Tweet