OOCSS

In keeping with the OO metaphor, an object is analogous with an instance of Java or PHP class, for example (though the granularity is different!)

A CSS object consists of four things:

1. HTML, which can be one or more nodes of the DOM,
2. CSS declarations about the style of those nodes all of which begin with the class name of the wrapper node
3. Components like background images and sprites required for display, and
4. JavaScript behaviors, listeners, or methods associated with the object.

This can be confusing because each CSS class is not necessarily an object in its own right, but can be a property of a wrapper class.

For example:

<div class="mod">
        <div class="inner">
                <div class="hd">Block Head</div>
                <div class="bd">Block Body</div>
                <div class="ft">Block Foot</div>
        </div>
</div>

The object is a module, indicated by the class mod. It contains four property nodes (which cannot live independently from the module, including two required regions, inner and body, and two optional regions, head and foot.

How does OOCSS improve performance?

The performance benefits of OOCSS are twofold:

1. Heavy reuse of CSS code, so less CSS code needed, which means:
   • Smaller files, hence faster transfers
   • A bigger percentage of the CSS code needed on most pages of your site is likely to be reused and possibly cached by the browser
2. To a lesser degree, fewer repaints and layout calculations on the part of the browser. 
   On a single page, the more CSS rules are reused, the less time the rendering engine spends calculating “computed values”

Learn more on http://oocss.org/