There are a few rules of thumb that developers try to stick to when they hammer out code:
- Write maintainable code
- Write reusable code
- Be DRY – don’t repeat yourself
Object Oriented CSS (OOCSS)
OOCSS is an approach for writing CSS that focuses on creating fast, maintainable, and standards-driven styles.
It adds much needed predictablility to CSS so that even beginners can participate in writing beautiful websites
– The OOCSS wiki
There are several advantages to using OOCSS. You end up with smaller files and faster load times by virtue of heavy CSS code reuse. You also get easy to maintain modules and objects within your stylesheets. This leads to faster on-boarding of new developers and quicker turn-around times for visual changes.
When using OOCSS, the goal is to separate your styles that are for structural purposes from your styles that simply skin (or color) your HTML. For example, you could have a
.fixed-width style that defines a width for structurally setting up your website, and a
.simple class for created a gray, rounded border.
Next separate your container from your content. Don’t use descendent selectors (for example:
.sidebar h3). Instead, use modules with modifier classes. See this extensive documentation on module classes and how to extend them.
For more information about OOCSS, check out the open source repo on Github!