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:

Object-oriented programming (OOP) is a programming paradigm using “objects” – data structures consisting of data fields and methods together with their interactions – to design applications and computer programs. Programming techniques may include features such as data abstraction, encapsulation, messaging, modularity, polymorphism, and inheritance. Many modern programming languages now support OOP, at least as an option.

 

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.

Enjoy this article? Let your friends know

Comments - have your say!

  • http://Johns-Jokes.com John_Betong

    I must agree that OOCSS is a very fancy title and also sounds impressive.

    My thoughts on CSS were to “normalise” a CSS declaration and use it once only.

    My approach is to anaylyse style-sheets by finding the duplicate CSS
    declarations using word counting tools. The CSS declations were then removed and
    assigned a class. The process was then analysed again to see if the separate CSS
    declarations could be combined and replacing two classes with a single class
    having two declarations, etc

    Here is an example:

    /* Original CSS – bytes: 171 */
    .div_88 {float:left; width:88%; font-weight:700; margin:0 auto;}
    .div_66 {float:right; width:66%; font-weight:700;}
    .div_33 {float:left; width:33%; font-weight:700;}

    /* Original HTML bytes: 132 */
    <div class=’div_88′> blurb goes here </div>
    <div class=’div_66′> blurb goes here </div>
    <div class=’div_33′> blurb goes here </div>

    /* Normalised CSS bytes: 151 */
    .div_88 {width:88%;}
    .div_66 {width:66%;}
    .div_33 {width:33%;}
    .fll {float:left;}
    .flr {float:right;}
    .mga {margin:0 auto;}
    .fwb {font-weight:700;}

    /* Normalised – HTML – bytes: 160 */
    <div class=’div_88 fll fwb mga’> blurb goes here </div>
    <div class=’div_66 flr fwb’> blurb goes here </div>
    <div class=’div_33 fll fwb’> blurb goes here </div>

    Byte-count: CSS HTML Total
    Original: 171 132 303
    Normalised: 151 160 311

    You may well have noticed their is a small 8 bytes differences in file size and
    the normalised version is actually larger. Do not be misled because a normal
    style sheet is reduced considerable by using a three letter acronym (TLA).

    The majority of CSS declarations are reduced to a quarter of the original size.
    The style sheet will reduce depending upon the amount of duplicate CSS
    declarations.

    Try using a word-count on your style sheets – you will be amazed at the duplications.

    :)

    :)

    • adover

      Some good point there!

      I do believe there is some trade off in how much to refine the CSS and how many more classes need to be added to the elements – there could definitely be a risk in bloating the HTML and making it difficult to maintain the code by other users.

      Ultimately I believe it’s down to the designer/developer – different things work for different people – but some form of normalised CSS is becoming essential for performance and scalability.