Object oriented CSS: should it matter?

Is it relevant?

I think so, it's basically putting a name to an approach used by the CSS author, in much the same light as creating styleguides. Is it useful? Yes. Is it easy to inherit someone else's OOCSS work? Probably not.

What are the benefits of OOCSS?

Abstracting style attributes of a certain component is always good for style consistency over the whole of the site. Say you want to change the border style of the components for a fresh new look: You'd typically change a few lines concerning the border-style master style.

An example

I created a UI Developers styleguide (or style vocabulary) concerning all the 'widgets' in our web app. Each widget would be classified according to its intended contents. Each widget could have any number of predefined box-styles, background-styles. Each widget could also lay out its contents different depending on what parent element it was placed under.

This amounted to code like: <div class="free bg_neutral form_search"> being used for each wrapper / container, with each class being: "Box Style, Background Style, Content" respectively. The developers working on the HTML / Views could then easily switch out any of the predefined styles and replace them with more appropriate ones. e.g. replacing bg_neutral with bg_gradient_fff_eee for a gradient background instead.

I think we saved countless lines of CSS code, because we could use interchangeable properties on a few core 'widgets', rather than defining each and every unique incarnation of each 'widget'. It also makes cross-browser fixing much easier, because you can tackle the 'widgets' styles independently. (Most browser bugs are related to box dimensions and position/layout)

In my opinion, more UI folks need to go thru a StyleGuide / Style Vocab exercise when designing and implementing the front-end of their sites. Create consistency in the visual elements used on the site. Consistent visuals usually result in consistent and efficient CSS!

Hope that helps, nd

I do not see any benefits to this concept, since the current definition of CSS is somewhat object-oriented already with its cascading, selectors, wildcards, etc.

They mention separating container from the content, which to me is exactly what CSS does already.

The presentation linked to in the question was given by Nicole Sullivan, a Performance Engineer at Yahoo.

There is a video of the original presentation at the Yahoo Developer Network site and a repository for the OOCSS project on github.