Efficient CSS: Smart Web Standards compliant CSS

Efficient CSS is a site dedicated to CSS that goes beyond Web Standards to present best practices relative to the use of effective and smart CSS style rules for making web sites load faster. We will publish posts that discuss and demonstrate efficient use of CSS, provide links to important, high quality resources about efficient CSS, and links to excellent tools that are useful for web developers seeking to develop fast loading sites.

Web Standard

+

Efficient

=

Fastest

We view the push toward efficient CSS as moving a step beyond Web Standards: Web Standards is primarily about doing it right (using semantic style, separating style and structure from content), while efficient CSS is about using highly effective, fast, easy-to-parse CSS that is also standards-compliant.

Efficient CSS is an ambition in line with the Web Standards movement (the "Standardistas") and the growing group of individuals and corporations that promote ideas, tools, and insights about "Faster Web Sites" or "Let's make the web faster" as Google formulates it.

The role of CSS

Obviously there are many factors other than CSS that determine how fast a site loads: the speed of the server and its connections, other properties of the web page (images, scripts, etc.), use of caches of various types, and so on. But CSS has an important role in this picture; exactly how big a role, is hard to say and varies from site to site. It depends, among other things, on how extensively and ambitiously CSS is used. For instance, one can use CSS styles to replace images, reducing the number of HTTP requests a page makes, thereby speeding the loading of the page. Similarily, small images can be inlined as base64 images in the CSS (and cached along with the CSS).

Also, the CSS style rules can be smart and effective or they can be long, contain multiple descendant selectors, and require a lot of work to parse in the browser. Both the efficient and the inefficient rules may be standards compliant, but personally I would much prefer the efficient ones.

Efficient CSS and smart use of CSS, where the interplay between HTML or (X)HTML, CSS and other technologies employed (such as javascripts) is optimal, is an ambitious goal. This site represents an attempt to promote that goal by diffusing examples, descriptions, ideas, tools and other resources that can make it easier for web developers to style efficiently with CSS and build faster web sites.

Posted: September 2011

Previous post || Next post

Flower, beauty
CSS

Consider supporting

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