OOCSS – Why and how to use it

OOCSS (or Object Oriented CSS for those that don’t know) is a term which is being banded around quite a lot nowadays and in some circles is causing a great deal of debate – especially for those who say it puts preprocessors (like LESS or SASS for example) to their untimely death with it’s minimal code usage and highly reusable nature. But for those who aren’t so clued up on OOCSS it may seem like a bit of a dark art, and in some ways, a bit too complex to think about just now.

Whenever the term “Object Oriented” appears it does a great job of striking fear into people’s hearts – which is understandable especially as Wikipedia describes it like so:

A little bit confusing isn’t it? It’s been enough to unnerve me from diving into heavy programming on more than one occasion in my life.

So what is OOCSS in laymans terms?

Before I delve into what OOCSS is and how it works – let me assure you, it’s not nearly as bad as it sounds! Once you see a real world explanation you’ll probably wonder why you didn’t do it ages ago. Heck, I was doing it and didn’t even realise!

The idea of OOCSS is basically surrounding code reuse and modularity. If things are modular and not so heavily targeted (and given broader meanings to what they are instead of their purpose), the possibilities open up to use bits of code over and over again.

Take a look at the below example:

#home-page #page #content #author-section{
width: 280px;
padding: 20px;
margin-bottom: 20px;
float: left;
background: blue;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

We’ve all written code like that before right? It’s a good starting block but it has many drawbacks. Firstly it’s extremely specific – this is usually the product of going down a rabbit hole of sorts with poorly maintained code and this being the final option when all other avenues are exhausted.

The next thing to pay attention are the amount of properties applied to the element. We’ve got widths, floats, a bottom margin, a specific colour and border radius – all of which have the possibility to be reused if a bit more prior thought were to go into it.

OOCSS is the attempt to split off regular properties and assign them their own specific classes which are then assigned to elements to style them (after all – we’ve given our ‘author section’ a colour of blue – surely that means other sections will have a colour of blue also).

The proposed solution

To simplify your code we’ll take the example above – an author box, with one third width, floated to the left and a bottom margin of 20 pixels – pretty standard stuff right?

Bearing in mind you will want to have the mindset of code reuse you could possibly use this HTML markup:

<div class="section section-third blue border-radius last-child">I'm an author - and this is the last 1/3 element in a row!</div>

As you can see, there are now a lot more classes (take note of the lack of the “ID” attribute – we’ll cover that shortly) – but they are also a lot more broader and have the ability to be used many times:

.section{
padding: 20px;
float: left;
margin-right: 20px;
}
.section-third{
width: 280px;
}
.section.last-child{
margin-right: 0;
}
.blue{
background: blue;
}
.border-radius{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

From first impressions this looks like loads of extra code has been written, but if you follow this model across your whole site you will be able to strip back massive amounts of redundant CSS from your stylesheets – which will result in a much faster site.

What about IDs?

The ID attribute has now become somewhat of a bugbear using OOCSS, as it reserves the styling of an element to just one div per page – which is not ideal when you want as much reusable code as possible. Instead it’s best just to reserve the use of IDs for using as selectors for any javaScript which you may be using.