Last updated 2017-08-12
OOCSS
Learn OOCSS methodology
Learn OOCSS methodology
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:
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.
The performance benefits of OOCSS are twofold:
Learn more on http://oocss.org/