Object oriented CSS: should it matter? [closed]

Question

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?

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

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.

Answer 9

The benefit is the ability to extend objects and keep code dry and readable. Those that are against it usually either a) hate the name or b) never used it. Let's put it this way...

Example

Every site has different types of navigation. You can have navigation in the header body, in a sidebar. Maybe, you even have tabs or breadcrumbs on your page? You might even need a toolbar for a rich-text editor on a page. This is where the .nav abstraction would come into play.

.nav
{
    margin-bottom:              24px;

    margin-left:                0;

    padding-left:               0;

    list-style:                 none;
}

.nav--right
{
    float:                      right;
}

.nav--stack .nav__item
{
    float:                      none;
}

.nav__item
{
    float:                      left;
}

.nav__item--active .nav__link
{
    font-weight:                bold;
}

.nav__link
{
    display:                    block;

    color:                      inherit;

    text-decoration:            none;
}

.nav__link:hover
{
    text-decoration:            underline;
}

This is the same code that would appear in all of my controls. Now, all I have to do is create some skins for it.

Sidebar Skin

.side .nav__item
{
    border-bottom:              1px dotted rgba(0, 0, 0, 0.2);
}

.side .nav__link
{
    padding:                    12px 0;
}

Tabs skin

.tabs
{
    border-bottom:              1px solid #aaa;
}

.tabs .nav__item
{
    margin-right:               8px;
}

.tabs .nav__item--active .nav__link
{
    margin-top:                 -2px;

    position:                   relative;

    border-bottom:              1px solid #fff;

    bottom:                     -1px;

    color:                      #000;
}

Main Menu Skin

.menu .nav__item--active .nav__link
{
    border-radius:              2px;

    color:                      #fff;

    background-color:           #007bc3;
}

.menu .nav__link
{
    padding:                    12px 8px;
}

Putting It Together

All I am doing is writing the name of the object and name of the skin for the class attribute. This includes properties of both.

<ul class="side nav nav--stack">

      <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

 <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

 <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

Don't panic seeing .nav_item and .nav_link. Most use li's and a's but I wanted to make it tag independent.

Answer 10

As Tor Haugen pointed out, the term "Object-oriented CSS" is a misnomer.

"Object-oriented CSS" is really just a design pattern for how to get most out of your CSS and is basicly the same approach Jonathan Snooks calls SMACSS.

Whether you call it OOCSS or SMACSS, the key to the approach is that you create generic UI elements like the nav abstraction. These UI elements can then be enhanced with more specific features by adding extra classes to the element and/or a container element. Or, as an alternative, you can add your own custom CSS rules using the element's ID or semantic classes.

For real world examples of OOCSS, check out frameworks like Cascade Framework, Scally and InuitCSS.

---

Further reading :

• An Introduction To Object Oriented CSS (OOCSS)
• OOCSS + Sass = The best way to CSS