Demystifying The Concept of OOCSS

Jan 02, 2015
OOCSS examples

Most of the beginners probably freaked out the moment they read Object Oriented CSS and must be thinking instead of reading further that how a static language can also used as object oriented, but it’s true. “Beauty got wings.” The beautiful language (CSS) got wings of Object Oriented approach.

The Actual Concept

Let me clear you with this concept. Object Oriented CSS is neither a new CSS language nor a CSS-Preprocessor. In-fact it is the same CSS that we are used to writing.

Then why are the names different? Yep, it’s a same CSS but with cleaner code and DRYer CSS. Taking consideration of simple patterns and best practices.

Well, then what is the Object in CSS

A CSS object is a repeating visual pattern which can be specified within any snippet of html, css or JavaScript (sometimes). This repeating visual pattern is works as object within element classes.

Simply Object Oriented CSS is an approach of writing CSS dynamically that can be reusable, fast, scalable and easy to maintain. It is introduced by Nicole Sullivan as an object oriented concept to understand the possibilities of CSS. So as a matter of fact you can call it a framework that is actually based on two main principles.

  • Separate the structure from skin
  • Separate the container from content

Don’t worry! I know you are feeling bit lost. So here is the explanation of these freaking principles.

Separating the structure from the skin simply means separating of layout styling means design styling. In formal way it is defined as a separating the structure (The way it is positioned) of an object from the actual presentational layout (The skin). Using Grid system it can be easily accomplished.

Skins are the different visual patterns such as the colors, gradients, shadows, size, borders that could vary in padding and width. And the structure itself is invisible feature of that specific webpage.

Let’s take a look on below snippet of object oriented css example of two buttons with same height and width having different colors.


.button {
  width: 100px;
  height: 25px;
  background: #FFF;
  border: 2px solid #BC1A38;
  border-radius: 5px;
}

.post {
  width: 500px;
  height: 400px;
  background: #FFF;
  border: 2px solid #BC1A38;
  border-radius: 5px;
}

As you can see there is lots of duplication in the above code, such as defining the width, height and border-radius. Now think of an entire stylesheet of a website. How much duplication will found. Loads of right?

So this is the situation where Object Oriented CSS (OOCSS) takes place with a little bit of pre thought and understanding so that could be used as reusable code, we just have to specify the repeating visual patterns common to all the skins that inherit the same property. By doing that stuff our CSS would end up as follows.


.button {
  width: 200px;
  height: 30px;
  padding:5px;
}

.post {
  width: 500px;
  height: 400px;
}

.skin {
  background: #ccc;
  border: 1px solid #333;
  border-radius: 5px;
}

As you can see all the elements has been defined separately and a class we named skin that could be reusable for styling the structure. What we have to do is to apply that class to the element from which we wants to get result. This is how the html should look.


<a class="button skin" href="#">Home</a>
<div class="post skin">post content</div>

Practical Examples.

There are many options that have this principle implemented.

Separate the container from content

Second principle, separating the container from content specifies that the object (the container) should adapt itself to fit the content same as the first one. For example, take a look at the below CSS snippet.


.post-content ul {
  list-style-type: circle;
  font-size: 1.2em;
  color: #333;
  margin: 0;
  padding: 10px 0px;
}

This style will perform for any unordered list in the post-content directly but if we want the same styling for our footer’s unordered list then boyee, we have to use another block of code and we will make the code repetitive. We can use the second principle here, which could make less repetition.


.post-content ul, footer ul {
  list-style-type: circle;
  font-size: 1.2em;
  color: #333;
  margin: 0;
  padding: 10px 0px;
}

footer ul {
  font-size: 1em;
  color: #FFF;
  padding: 5px;
}

Here, if we don’t make use of OOCSS then our code will be longer as twice as of OOCSS and we could end up as follows.


.post-content ul {
  list-style-type: circle;
  font-size: 1.2em;
  color: #333;
  margin: 0;
  padding: 10px 0px;
}

footer ul {
  list-style-type: circle;
  font-size: 1em;
  color: #FFF;
  margin: 0;
  padding: 5px;
}

With this use of two principles, we can write less repetitive code by specifying the same element structure and separating featured modules and objects that can be reusable.

Benefits of OOCSS

As of now, you have known some of the benefits of OOCSS. Let’s get familiar with some others.

(1) Standard based code as it is very efficient to specify one block of code rather than emphasis on many blocks.

(2) Making the website load faster as there is less repetition of code which eventually makes css file smaller and faster to download.

(3) Ease of maintenance as it is easier to find specific codes because of no-repetition in CSS.

(4) Efficient reuse of existing code by using previously specified styles for another element within the structure.

Key concept

In short the key point of object oriented CSS is to write the css code with dynamic theory (bottom up approach) instead of procedural theory (top down approach). Simply making the class reusable as much as possible and to enhance a better granularity architecture of css.

It’s not going to be your tuna from the first day if you are just starting out, but i think this path will help you to get those thing solved.

Create object >> Name it with class or id >> style it >> Use whenever you are in need of that object

Okay that’s it. I want to end up this concept with this piece of information and several resources for you to take control of this concept as it will definitely make its place in the future of css development and coding standards.

About author

Prakash Nakrani

Hi, my name is Prakash Nakrani. A freelance web developer and an enthusiast writer. I loves preety much anything about Web, mostly CSS and designs.

 Comments

  1. Thank you very much. Great article

    Reply
    • Prakash Nakrani
      #

      Thanks for your appreciation Gracie.

  2. #

    This is one of the many articles I’ve seen trying to de-mystify OOCSS but still I can’t wrap my head around it…

    I find the first example rather clear, but that’s how (the oocss result) I would have written it to separate shared styling and element-specific styles, so this isn’t really new to me.

    The second one on the other hand, I just don’t understand.

    The code is harder to decypher, you’re applying styles (font-size, color and padding) and then overriding them for a given scenario, half the code applied to `.post-content ul, footer ul` is actually not the one used in `footer ul` so what’s the point ? Sure you’re re-using one half, but it’s much more complex to read and modify later.

    I’m sure there are good pros for OOCSS, but I still have to find some article that *clearly* explains how to write oocss code (because after reading this article I still don’t really understand) in real life examples (where a designer decided for whatever reasons that this button here must be this nice, which might be inconsistent with the code but still that’s how it’s meant to be) and how it’s better than having post-treatment re-arrange the code later to avoid redundancies.

    I just don’t get it and I’m really trying, but it feels like the goal is to make the code more confusing on the css and more bloated on the html yet there has to be a good reason !

    Reply

 Write a Comment

You can use basic HTML Markup.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>