Object Oriented CSS

http://www.stubbornella.org/content/2010/12/09/the-hacktasti...

Edit: I also agree with your sentiment. This seems to move away from what CSS classes are intended for, and gives things naming conventions that are tied directly to their internal CSS code instead of to their semantic meaning on the page. That said, I haven't used it either, so maybe it's way better this way, but something doesn't sit right with me.

    var foo = new Animal Brown Quadruped Barking();

    /* Define classes used in HTML */
    .sidebar {
      @include bordered-box;
    }

    #special-offer {
      @include bordered-box;
      position: absolute;
      top: 0;
      right: 0;  
    }
     
    /* Define theme information */
    @mixin bordered-box {
      h3 {
        background: red;
        color: white;
      }
      border: 1px solid red;
    }

[1] http://plpatterns.com/post/482063133/every-time-you-use-css-...

It is also worth noting that facebook contracted her to help them reduce their out-of-control CSS. I don't remember her exact numbers, but I know she cut down the size down by >50%

However if the naive understanding of objects is that you define a base object, and then extend, or orverride that base object then I think this fits the bill.

I love the grid without overflow:hidden, bring by the "X X X X X..." on a :after. More of a framework, OOCSS supply a philosophy: reuse, reuse and reuse.

The way I understand and I use the Oriented Object concept in CSS, is to provide "graphical" behavior to DOM element: ie: a <div> can extend the shadow behavior with one class and the red border with another. It permit to keep the CSS short, highly maintanable and to make the CMS more flexible, by giving more options to remix a block.

But the risk using this framework is to multiply className on a element, this fact have to be known, not to fall on a trap with double sized html !

The bases of OOCSS: - the template: <div class="page"> is the wrapper you can add the 'liquid' class to make your design fluid

- the grid: line / unit sizeXonY or lastUnit, the sizeXonY give the width of the 'cell', lastUnit permit the last <div> of a line to take the left place.

line contains unit, no margin or padding on unit (Groxx , to keep the percentage true (4 x25% = 100% vs 4x(25% + 10px (ie.margin)) > 100%)

- the block : see http://oocss.org/module.html but to be concise, the mod structure is bullet proof to insert corner, shadow on a block, without CSS3.

- fews plugins (not always useful) to supply solution to main CSS trick.

You can have more info here: http://oocss.org/ or in looking the demo in the git repository.

And a last thing, the resume of Nicole Sullivan (Stubbornella) give her credibility (to me): W3C, Yahoo!, Facebook... She's also the co-creator of http://www.smushit.com/ysmush.it/, the image size burner by Yahoo!

Hope it could help you to go deeper in this framework,

Keep goin' on Nicole !