Building Better Websites with OOCSS

There are a few rules of thumb that developers try to stick to when they hammer out code:

  1. Write maintainable code
  2. Write reusable code
  3. Be DRY – don’t repeat yourself

However, these concepts have been largely applied to JavaScript, PHP, Java, and many other languages. However, notably lacking from the party has been CSS. The goal with object oriented CSS is the goal of every developer: improve performance and maintainability.

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.

Using OOCSS

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!