Posted in css

back to articles

OOCSS : learning the basics

Let me give you a brief summary of OOCSS (for more info on it refer to Nicole Sullivan, she is the resident expert). OOCSS is a way of writing style sheets that makes your styles more modular. You rely on multiple classes applied to elements. This enables you to style multiple elements with common styles and still target elements individually for more unique styles.

Here’s an example with out implementing OOCSS

header{
      border:1px solid #ccc;
      overflow:hidden;
      padding:15px 25px;
      margin:0 auto;
      width:980px;     
}
footer{
      border:1px solid #ccc;
      overflow:hidden;
      padding:25px 15px;
      margin:0 auto;
      width:980px;    
}
nav{
      border:1px solid #ccc;
      overflow:visible;
      padding:10px;
      margin:0 auto;
      width:980px;
}

There is a lot of extra code in there that really isn’t required. The idea behind OOCSS is carefully crafting your styles so that you reuse as much as you can. This can be tricky, you must make a thorough assessment of the sites design and how things are being repeated. If you are not the designer on the project I would advise taking some time with the designer to go over what parts of the site are similar. It will make your job as the developer much easier.

Here’s an example of the above with OOCSS implemented.

.global-width{
      width:980px;
      margin:0 auto;
      border:1px solid #ccc;
}
header.main{
      padding:15px 25px;
      overflow:hidden;
}
footer.main{
      padding:25px 15px;
      overflow:hidden;
}
nav.main{
      padding:10px;
      overflow:visible;
}

We are using a class of .global-width and applying it to any element in the html that would require that styling. This can then be used through out the build without creating any extra lines of code. We then apply a separate class for the elements to style their unique properties. This is just one example of OOCSS, you can see how this substantially cuts down on your styles.

Here is what the markup would look like using OOCSS

<header class="main global-width">
</header>
<nav class="main global-width">
</nav>
<footer class="main global-width">
</footer>

The real enabler for OOCSS is classes that are applied to the html elements. You apply multiple classes to elements which allows you to target multiple items and individual items at once. There are concerns about adding that many classes to the HTML may slow it down. The load time that is spent on the html will be quickly made up by the decreased load time for the CSS.

One major challenge I run into when styling sites is how to prepare the files for who will deal with it after I am done. Often times I will do the initial build of a site but then someone else will inherit the task of updating the site. This can cause issues when they have to jump into the project and try and understand my methodology when approaching the build. That is where OOCSS can be really useful. Pair OOCSS with comments and neatly written well thought out css and any front end developer could take over the project with ease.

Like most things new approaches to coding there is controversy on its usefulness, but its worth checking out. It might just make your life a little easier.

Thanks for reading,
Matthew

* I have rid this site of comments. To be honest I never got enough to satisfy my bloated ego.
Write me on twitter, i'm always there. No captchas I promise.