The most efficient CSS style rule

Efficient CSS style rules and smart CSS are important for page rendering speed - especially when pages are browsed on mobile platforms like iPads, PDA's and cell phones. Not that this is the only concern - as the flower should remind us - beauty, attractiveness and other factors like accessability and so on are important as well. So, while we want efficient CSS and faster web pages, efficient CSS is not the only concern. Nor is it the only - perhaps not even the most important - factor in improving web site speed.

However, even while the use of CSS and web design based on the principle of separating style and content is expanding, there are a lot of very inefficient CSS styles in use. Finding ways to do things better, more efficient, and gathering and making availble those ways will certainly not hurt and most likely be quite good.

Some of the bad CSS is due to coding habits developed at the time when web designers and others building web sites were focused on making their pages work flawlessly on a variety of buggy browsers, for example IE5.5 and IE6. This was often tough enough in itself, and sometimes lead to ways of doing thing that were viewed as good simply becaused they overcame the differences between the browsers. Some is due to more focus on getting things to work and look the way we want rather than on efficiency. Time pressure, concerns for the bottom-line and such play a role here.

SpeedToday's browsers are much more standards compliant, and much less "buggy". Also, IE 5.5 is gone, IE 6 is used by 3% or so, and even the less buggy IE is on its way out. The modern browsers are automatically updated on most of the users' platforms. This means that finally, for the first time, it is possible to focus on writing standards compliant and efficient HTML and CSS without spending most of the time working with fixes, hacks and doing testing on older versions of all the major browsers.

So, given that we now can and want to write efficient CSS, what is the most efficient CSS style rule? In my opinion it is the following:

The most efficient CSS style rule is the one you didn't need to write.

Efficient CSS

Efficient CSS is not only about efficient style rules; rather, it is more about writing the CSS for a page and a site smartly and efficiently over all. It's about doing the right "resets", styling the font in the body or main "id" so that you don't have to use an extra class to define your standard paragraph layout. It could be not having to define new styles for header and paragraphs in sidebars but instead simply defining other font sizes on the overall sidebar "id" so that the elements can inherit instead of having to be styled anew.

Writing CSS efficiently is also about being economical about rules - trying to minimize the amount of CSS used - and stopping to think when you recognize the need for a new style rule. Do I really need this rule? Can I avoid this extra rule by setting an extra property in the style of one of the ancestors, or by altering a property in one of them? Or perhaps even asking: If I write this rule now and include it in my style sheet, will I actually use this style on other pages?

According to the HTTP Archive, the average size of CSS style sheets for the sites they monitor is now 28K. That's a lot of CSS, and most likely a lot of unnecessary CSS.

Posted: September 2011

Flower, beauty
CSS

Consider supporting

Blogging and web design is my living. Even though I give away for free, it has taken me time to develop, test and write up.

If you find the site useful, a donation would be very much appreciated.