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:
Maybe, you think this concept doesn't matter
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 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.
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.
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.
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.