Understanding OOCSS
view all blogs...

Justin Bess :: May 31, 2018

What is OOCSS?

Object Oriented CSS is a design technique, originally proposed by web developer Nicole Sullivan in 2008. Her goal was to take some of the fundamental concepts of OOP, in languages such as Ruby and Java, and adopt them into CSS, to make CSS more manageable and dynamic.

Content / Structure

The first step in OOCSS is to separate the structure of your elements from their skin. You may be thinking, what is a skin, what is the structure of an element?.. When you apply attributes to an element, it falls under one of the two types. Determining the difference is quite simple. If the attribute applied affects the visualization of the element, then it can be considered a skin attribute, otherwise it falls under the structure category.

Here are some items which fall under their respective category

Looking at some code

The best way to grasp the understanding of OOCSS in my opinion, is by taking a look at some code examples. In the code below, we have a very simple CSS stylesheet, showing how one may have an avatar preview styled, and an actual avatar styled. For example, you see a small image on things like messages, but while viewing a profile, you’d like to showcase a larger version of the avatar/image.

In the code, you’ll find similarities in the visual (skin) attributes. Namely, the border and border-radius properties. When you see this happen, you could segregate the code into it’s own class for re-use, instead of applying the same code into two elements. This will help with code re-use, maintainability, and organization of your CSS stylesheets. You can also lower your download times, as your stylesheets can become much smaller using this type of approach.

Now for the OOCSS approach

The OOCSS approach takes the same example above, but demonstrates how to separate out the skin from the content. Essentially, it becomes very basic. You take the skin attributes and add them into a CSS class. You will keep your structure styling that’s different in their respective id selectors. In your HTML, you will then apply the skin class to the elements. The code below results in the same output, with the structure and skin separated!

Content / Container

Separating containers from content makes for a more consistent user experience. Using this approach means your markup can be more predictable. It also means that you aren’t having to over-rule styling attributes deeper down in your CSS. A general rule of thumb, is to not use child selectors, and set up your code in prospective classes.

You will see this demonstrated in the code below. The goal, is that your CSS isn’t dependent on the parent element. This means that no matter where you are applying the classes in your markup, you should expect to see the desired results.

Should you use OOCSS?

I think this is a valid question, which you should think about before starting on your project. OOCSS may be over-kill for small projects, and may not necessarily be of much help. I would encourage the use of OOCSS on larger projects and growing projects. This will make it easier to maintain, and for other developers to easily understand and adapt to your code. However, a disadvantage to this approach is that your elements will inevitably require more classes in your markup. Some people may not like this, so it all depends on your (and your teams) coding preferences. There are great technologies out there, which may make your life with OOCSS easier. One That I would highly encourage all developers to learn, is SCSS, which allows things like mixins, which can help you when separating out skin and structure. You could still apply the skin in your CSS code with SCSS, while keeping it decoupled from each selector. However, this will not reduce the size of your stylesheets; it will only provide the organization and maintainability benefits which OOCSS look to adopt.


      December 12, 2018


      Nice posts! 🙂