Object oriented CSS: should it matter? [closed]

Answer 1

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 2

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

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

Answer 5

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

Answer 6

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