Introduction to OOCSS

The world today is moving fast and so does the web. To keep the time to market short it's important to be able to reuse objects on the page. It's also important to write code that scales well and is easy to maintain over time.

OOCSS (Object Oriented CSS) is a set of principles that helps you build reusable components that you can place anywhere on the page and still look and behave the same.

The two main principles are: separating structure and skin and separate the container and contents.

Separating structure and skin

Skins in this case are different themes for the object that changes the appearance of eg. colors and font sizes. By moving the CSS for appearances to separate classes, it becomes a lot easier to change it without having to create complex CSS selectors.

A typical CSS for two button could look like this:

button#call-to-action {
  display: inline-block;
  padding: 5px;
  background-color: #4f4;
  color: #fff;
}

button#cancel {
  display: inline-block;
  padding: 5px;
  background-color: #ccc;
  color: #999;
}

<button id="call-to-action">Call to action</button>
<button id="cancel">Cancel</button>

with OOCSS we separates structure to the .button class and design to the skin classes .button-call-to-action and .button-cancel:

.button {
  display: inline-block;
  padding: 5px;
}

.button-call-to-action {
  background-color: #4f4;
  color: #fff;
}

.button-cancel {
  background-color: #ccc;
  color: #999;
}

<button class="button button-call-to-action">Call to action</button>
<button class="button button-cancel">Cancel</button>

Another important detail in the example is that all objects are written with classes and never with IDs or elements. By doing so we separate the objects from the HTML structure. That way we can apply the button object on any element we want:

<a class="button button-call-to-action">Call to action</a>

<button class="button button-call-to-action">Call to action</button>

<div role="button" class="button button-call-to-action">Call to action</div>

<input type="button" class="button button-call-to-action" value="Call to action" />

To keep specificity low we use the name of the object as a prefix. That makes all classes unique and we don't need to create unnecessary complex selectors.

When specificity is low it's much easier to create new skins and override the CSS if needed.

Separate the container and contents

The second principle is that objects should always look the same regardless of where they are located on the page. One rule of thumb is that you should always be able to copy the HTML code for an component and place it anywhere on the page and it should still look the same.

To achieve that, the first principle must be achieved plus the CSS can't have a dependency to it's container.

Avoid writing:

.shopping-cart .button {
  background-color: #4f4;
  color: #fff;
}

<div class="shopping-cart">
  <button class="button">Checkout</button>
</div>

Instead, create a new skin for the component with a new unique classname:

.button-call-to-action {
  background-color: #4f4;
  color: #fff;
}

<button class="button button-call-to-action">Checkout</button>

summary

OOCSS helps you build reusable objects and keeps your CSS much easier to maintain. This is made by:

• Always using classes, never elements and IDs
• Create one class for structure and one or more classes for skins
• Always prefix classnames with the name of the object to make classnames unique and keep specificity low
• Avoid to apply CSS to objects depending on it's location