Testing Object-Oriented CSS (OOCSS) for easier CSS development

Let’s face it: developing CSS that should work across various web browsers and platforms is hard, and could prove to be quite a challenge. This is where Object-Oriented CSS (OOCSS) steps in.

What it is

OOCSS is being developed by Nicole Sullivan, with a background at Yahoo!, who now consults for Facebook. The objective is to make CSS development as stable, modular and, very importantly, predictable as possible.

There are a number of different modules, where the most important parts are good CSS resetting (taken from Yahoo!), template and grid handling. However, there are also parts for tabs, talk bubbles, content media etc. The best way to see it in action is to go to the OOCSS page at GitHub to watch and download the examples.

What I like

I have been working with the base files for my current project, to evaluate it and also make things easier for me. Having a good framework for your basic CSS is vital in any web site you will ever build. You will get a consistent result, and instead of building the same things over and over, you can put your time and effort into what will make that specific web site into the best possible.

OOCSS is extremely easy to use, has overall worked flawlessly, and extending the good base is very simple. I also like it being very light-weight (my combination of resetting, template & grids weighs in just under 5 kb), which means my own web site-specific CSS becomes much easier to write, and it becomes much smaller because of not having to write redundant CSS.

What I don’t like

As you might be aware of, using good semantics is very important to me, and when it comes to both elements being used as well as the naming of CSS classes, I believe it should contain a meaning for what it will contain. OOCSS contains class names like .leftCol, .rightCol, .body, .h1, .h2 etc. And to me, and what I believe is to be in line with the notion of the semantic web, is that one of the fundamentals with CSS class names is to not use class names which describes the actual presentation/layout, but rather what it will contain.

And fair enough, I think one of the choices behind this was to make it easy to beginners, but still, when you end up with code like <h1 class="h2">, that’s just wrong to me. No class name should ever be named after an actual element name if you ask me (especially not the name of another element).

I got to meet Nicole at JSConf.eu, and naturally had to ask her about her choices for class names. She said that she thought it was ok to also use “visual semantics”, i.e. class names that would describe how it would actually be presented. Trying to be open and understandable, I could somewhat see where she was coming from with this.

But, I suggested using other names that would have more meaning and be easy to understand at the same time, like .main-heading, .complementary etc. The reply I got was that she had tried it, but “It was too hard for people to remember it”. And that I’m mot just buying. Sure, .rightCol might be a tad easier to remember, but just going the easiest route time doesn’t always make it right.

So, in my files, I use class names that convey actual meaning.


Despite my little rant on class names (which you can easily change to whatever you want), OOCSS is quite exciting, and so far I have experienced good results with, and the possibility for me to focus on more important things! I definitely recommend you try it out, and give Nicole any input or feedback you might have.

Posted in CSS,Developing,Reviews/tests,Technology |

Leave a Reply

Your email address will not be published. Required fields are marked *