Impact of OOCSS on website performance - shorter css but bulky html with more classes

Question

I was reading today about OOCSS which says by using that approach have 2 benefits

1. Shorter CSS = Better performance
2. Better maintainability

I'm agree with second point but The first benefit point is to make css shorter by adding more classes to html which increase re-usability but CSS file of whole website can be cached in browser but HTML of each page is different.

My question is how a shorter CSS file can increase the overall site performance by adding more bytes (classes) into html, while css is a single file and will be downloaded at once in cache?

Answer 1

By simplifying CSS selectors, keeping the properties DRY and using class attributes in HTML, reflows and repaints will (in theory) be light-weight and therefore increase the smoothness and overall performance of the site.

Reflows and repaints occour when

• Resizing the window
• Changing the font
• Adding or removing a stylesheet
• Content changes, such as a user typing text in an input box
• Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)
• Manipulating the class attribute
• A script manipulating the DOM
• Calculating offsetWidth and offsetHeight
• Setting a property of the style attribute

(above list copied from Reflows & Repaints: CSS Performance making your JavaScript slow? by Nicole Sullivan, creator of OOCSS)

Also watch this video to see reflows and repaints in action: http://www.youtube.com/watch?v=ZTnIxIA5KGw (about 30 seconds of you time)

That said, easily parsed CSS will also improve your site's responsiveness (as in smoothness), not just the quality of maintainable code.

Answer 2

Obviously this doesn't have any meaningful answer - what's the definition of fast? How many bytes is too much?

The short answer is that if you are gzipping your html, caching things correctly and making sensible reuse of things, then it makes no meaningful difference.

If you are worried about adding some extra CSS classes, then remove all your </li>s, ''s etc, as well as your </body> and your </html>. Also, for any attributes that are single words and don't contain any of the problematic characters, drop the " surrounding them. Those changes should balance out adding the classes.

(In case that sounded a little snarky, I would actually recommend doing that in your caching layer - something like this will do the job:

$page_content = str_replace(array("</option>","</td>","</tr>","</th>","</dt>","</dd>","</li>","</body>","</html>"),"",$page_content);       
$page_content = preg_replace('/(href|src|id|class|name|type|rel|sizes|lang|title|itemtype|itemprop)=(\"|\')([^\"\'\`=<>\s]+)(\"|\')/i', '$1=$3', $page_content);                
$page_content = preg_replace('!\s+!', ' ', $page_content);

)

Answer 3

The performance gains from "shorter css" are twofold:

1. Smaller style sheet
2. Shorter selectors

Long css selector are inefficient. Steve Souders (among others) have written extensively about CSS selector performance. More efficient selectors probably more than offset the few extra bytes for multiple classes.

Using a CSS meta language like LESS or Sass, esp. if you employ @extend, or mixins gives you the best of all worlds.