Good To Know: What is Object Oriented CSS?

The theory behind OOCSS according to Nicole Sullivan

oocss_pic

In this article, I introduce to you the concept of object oriented CSS. I came to learn about Object Oriented CSS from Smashing Magazine.  Until I read the online article on it’s website, I didn’t know that CSS could be such a powerful tool and what we can do with it. Nicole Sullivan, is a CSS guru who started the OOCSS.org. She has been hired by Facebook to optimize their CSS files.

Nicole first presented the Object Oriented CSS at Web Directions North, in Denver.  The response has been overwhelming. According to Nicole, OOCSS allows you to write fast, maintanable and re-usable codes. It makes for a more efficient stylesheet that is easier to add and to maintain.

What is Object Oriented Programming?

Before we proceed to what Nicole has to say about OOCSS, let me explain the definition of Object Oriented Programming (OOP).

OOP is a programming language model organized around “objects”. You basically identify all the objects you want to manipulate and how they relate to each other into class of objects, which is often know as data modeling.

So in an HTML environment, OOCSS styles “objects” into chunks of re-usable HTML that define a section of a webpage.

OOCSS Two Main Principles

There are two main principles [in object-oriented CSS]: the first is to separate the structure from the skin and the second is to separate the container from the content.”

* Click here to view Nicole’s presentation

1. Separate the Structure from Skin

In CSS, we often use visual features (skin) that are repeated in different elements (structure) like background colours, gradients,  and borders.

In OOCSS, the “skins” can be modeled into class-based modules. This is such that they become re-usable and can be applied to any “structure” that uses the common features.

Here’s an example:

CSS – Here you have 2 elements which is #logo and #box that looks like this

#logo {
width: 200px;
height: 50px;
postion:absolute;
border:1px solid #474747;
background: linear-gradient(#dcdcdc, #222);
}

#box {
width: 400px;
overflow: hidden;
border:1px solid #474747;
background: linear-gradient(#dcdcdc, #222);
}

OOCSS – We re-model our previous CSS styles to make it look like this

.logo { 
width: 200px; 
height: 50px;
postion:absolute;
}
 
.box { 
width: 400px; 
overflow: hidden; 
}
 
.skin { 
border:1px solid #474747;  
background: linear-gradient(#dcdcdc, #222);
}

Now, our login and sidebar classes are grouped as structures. Their common styles are combined into a re-usable “skin”. The “skin” class can now be applied to the elements. The result is the same as the previous CSS styling, but with less and re-usable codes.

2. Separate Container and Content

When writing CSS, we tend to duplicate styles unnecessarily and are not aware of it. With OOCSS, according to wiki github separating container and content

means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific <h2> with .myObject h2 {...}, create and apply a class that describes the <h2> in question, like <h2 class="category">.

This gives you the assurance that: (1) all unclassed <h2>s will look the same; (2) all elements with the category class (called a mixin) will look the same; and 3) you won’t need to create an override style for the case when you actually do want .myObject h2 to look like the normal <h2>.

Advantages of OOCSS

OOCSS gives performance benefits to web developers.  You will have fewer and repeated styles in your CSS thus, giving you smaller file sizes for faster downloading.

Another important factor is that your codes will eventually become re-usable and maintanable.  You can change parts of your CSS styles without affecting the overall layout of your webpage.  It also enables you to change your site consistently.

Conclusion

For the record, OOCSS is not a new language. It’s just a collection of patterns and best practices. To me, OOCSS is still new and I probably need to dig deeper to find out and understand more about this new paradigm.  There are still a number of web-developers who agree and disagree with some of the principles in OOCSS.  However, I still think that it is still valid to practice OOCSS now as it optimises the web to give viewers faster loading time.

To find out more about OOCSS, keep up with Nicole Sullivan. She is the VVIP in this industry and you can find out more on her blog. Below are other source you may want to check out:

  • github Object Oriented CSS
  • Nicole Sullivan’s Blog Post
  • High Performance Websites: Nicole Sullivan
  • Both comments and pings are currently closed.

    11 Responses to “Good To Know: What is Object Oriented CSS?”

    1. Wendell Cersey says:

      Very educational post. Your current Blog style rocks as well!

    2. Jeanelle Marsili says:

      Thanks for informative post. I am pleased sure this post has helped me save many hours of browsing other similar posts just to find what I was looking for. Just I want to say: Thank you!

    3. Pomoc drogowa Gdynia says:

      Keep up the superb piece of work, I read few posts on this site and I think that your web blog is very interesting and has lots of fantastic information.

    4. 54Reels says:

      nice,i like it very much

    5. Biuro Podró?y says:

      Hey There. I found your blog the use of msn. That is an extremely neatly written article. I’ll make sure to bookmark it and return to read more of your helpful information. Thank you for the post. I’ll certainly comeback.

    6. armagard says:

      I found the info on this site valuable.

    7. Moses Rapko says:

      I like your writing style really enjoying this website .

    8. Phaneuf416q87 says:

      Wow ~ Very Good stuff ~ Please keep it up !

    9. Novinger76988 says:

      I was just seeking this information for some time. After 6 hours of continuous Googleing, finally I got it in your web site. I wonder what is the lack of Google strategy that don’t rank this kind of informative web sites in top of the list.

    10. 6Babe says:

      Useful stuff, but the theme don’t display correctly on my Powerbook…maybe you ought to examine that out. Thanks, anyway.

    11. Attractive portion of content. I simply stumbled upon your blog and in accession capital to say that I get in fact loved account your weblog posts. Anyway I will be subscribing on your feeds.