Home/ Questions/Q 159151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T10:48:29+00:00

I’ve just found this interesting presentation about the concept of object oriented CSS. It

  • 0

I’ve just found this interesting presentation about the concept of ‘object oriented CSS’. It seems to be a good idea but the presentation is rather short and doesn’t give a lot of examples.

My questions:

  • is this concept relevant?
  • what are the benefits of OOCSS?
  • can you provides me with complex exemples of ‘object oriented CSS’?

Maybe, you think this concept doesn’t matter

  • why?
  • what kind of workflow (and rules) do you use instead?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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

    • 0