Home/ Questions/Q 7704817
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T23:45:59+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0