Search code examples
htmlcssperformanceoocss

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

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?

Solution

  • 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.