Object oriented CSS: should it matter?

Hello all,

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?

From stackoverflow

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

  Welbog : I agree. It seems to me that "OOCSS" is just CSS that isn't written haphazardly. Much the same way you can write non-object-oriented designs in OO languages, you can easily mess up the fundamental ideals upon which CSS was created. OOCSS seems to be saying, "Let's not screw up anymore, guys." +1

  annakata : "Let's not screw up anymore, guys." lol - I've been saying CSS is OO for years :)

• The slide show is a great set of standards and guidelines to follow. I use them all the time, looking for patterns and repetition in my designs, then factoring those out to components.

  Navigation, Panel, Grid, Repeater, Card, etc. These are all common components I design for each site.

  I also have separate CSS files for Utilities, Page and Content. Utilities stores things like my clearfix or margin normalizer, Page stores overall site layout (header, footer, main), and Content is a universal set of rules for headings, paragraphs, links, lists, etc. site-wide.

• "Object Oriented" is somewhat of a misnomer here, at least in the strict sense of the term. But the design guidelines that he presents are sound and useful, and goes some way towards alleviating the "brokenness" of the CSS standard.

  The problems that he points out - brittle designs, large files, low maintainability and so on, are consequences of a standard that is too loose, too ad hoc-oriented and based on original design goals that are no longer valid. He correctly observes that successful design demands a clear head and great deal of discipline.

• Sounds like buzzword talk to me. As John Rasch said - CSS is sorta OO already.

• On a related note, you may want to look at the compass stylesheet framework. See also the primer. It looks interesting, although I have not had opportunity to use it in a project yet.

• 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 would love to see some form of inheritance in css. Full blown oo? That would probably be overkill but inheritance would shrink the size of my stylesheets exponentially.

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