So I recently came across the idea of Object Oriented CSS (OOCSS) at An Event Apart San Francisco this year. The speaker was Nicole Sullivan, who is the leader in evangelizing and developing Object Oriented CSS. She makes a solid argument that best practice CSS techniques should be used and that we can build on those techniques to create even more efficient CSS for everyone involved.

There is a bit of controversy about the nature of calling it “Object Oriented” and the specific usage benefits of the techniques. This article will delve into what it is, how it can be used and link to different resources on the web for you to learn more as these concepts are in their fledgling stages. Don’t blame me for what it’s called. I just found it interesting and somewhat useful and wanted to share.

What are the principles behind “Object Oriented” programming?

I’m going to spare you the geek-speak and tell you straight up — it’s basically programming blocks of code that you can use over again.

Those blocks of code are often called “objects” in other programming languages and with HTML/CSS they are often referred to as “modules“. So for our purposes, OOCSS is basically a flexible HTML structure that you can apply sets of efficient and flexible CSS to.

The Dirty Secret of OOCSS

For those of you who live and die CSS — you already know… We already do this! It’s the nature of the cascade. Consider this example:

So we already know of some OOCSS because they are basically best practice CSS techniques that have become more or less common place.

Advanced CSS Techniques First Please

Be Classy

ID selectors are meant for single use and Class selectors are meant for multiple use. So make sure you’re not using ID selectors for repeating styles as using Class selectors give you flexibility and of course re-usability.

No Twins Allowed

Nicole Sullivan points out that if you have styles that are very similar they should be the same. Learn to design efficiently because OOCSS will do you no good if you’re essentially re-creating the same modules (but slightly different) over and over again. (The size of the text in the diagram is slightly different.)

Seperate Stucture (HTML) and Skin (CSS)

Properties like height and width are hard to use repeatedly (in respect to modules) so it’s best to use CSS as intended and leave structure to be determined by content and “learn to love grids” (to quote OOCSS royalty; Nicole Sullivan).

Can We Get To The OOCSS Yet?

As Nicole Sullivan says — treat the modules like site-wide legos and start to build a component library that your modules will be composed of. First you define the defaults and then you start building classes that build upon the cascade.

Define Defaults

Start off with the defaults that you can then alter with a class. For instance, setting the size and font via the default and then use classes to become more and more specific with color, style and etc.

So you may have an instance where you have a h1 with a classes of h3. Honestly, this doesn’t feel great to me but I have come across having to define headers over and over again. So although this feels wrong, I’m not knocking it untlI try it.

Build On The Defaults With Classes

Avoid styling elements and localized ID selectors and try styling classes instead.

Use The Force,Cascade Luke

For the class components to work, they need to be the same strength so the cascade will overide the previous rule. So that means you can’t have some classes deprecated and expect all your CSS components to work in the way OOCSS was meant for.

Localizing is Evil in OOCSS

There are instances where you can get a little local on websites such as the masthead logo. However, you don’t want to paint yourself into a corner by localizing because when you re-use a class it won’t make sense semantically. Being semantic is a best practice that goes along with OOCSS as it will hopefully be easier to share with co-workers and train n00bs.

Over Specyfying Is Evil Too

The whole point of OOCSS is to make things efficient. If you over-specify, then I daresay you’re repeating yourself and although semantically correct… this is code bloat. If you continue down this path, it will only continue to grow.

Avoid Code Sequels

As you can see from Nicole Sullivan’s slide — rather than duplicating a class, just extend it for maximum efficiency.

The Bigger The Website Audience, The More Rewarding

Let’s be honest. Localizing is not evil for everybody but it certainly becomes more difficult to work with and is more conducive for code bloat as the website grows. It’s up to you on whether or not these OOCSS techniques are useful or not, so please I implore you to explore and help the CSS community form an opinion on some of these new ideas. Here are some links I used to bone up on the subject and believe me, there are more tasty nuggets in these resources that may be helpful to you that I may not have covered.

Nicole Sullivan is the OOCSS project queen over at Guthub:
Object Oriented CSS, Grids on Github

Nicole Sullivan Kickin’ It at Yahoo!
Object Oriented CSS video on YDN

Nicole Sullivan’s Often Referenced OOCSS Slide Presentation
SlideShare.net: Object Oriented CSS

Net Tuts did a Tutorial. Although a cool “tut” by Andrew Burgess, he uses HTML5/CSS3 in his examples which confuses the subject.
Object-Oriented CSS: What, How, and Why

Let me know if I missed anything!

This entry was posted on Sunday, January 3rd, 2010 at 11:55 pm and is filed under CSS, Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.