
Object Oriented CSS - michaelfairley
https://github.com/stubbornella/oocss/wiki
======
Groxx
Demo: <http://waltschmidt.com/v2/>

Link is available on the FAQ wiki page - it should _really_ be on the readme.

edit: I don't think I like it... some details as to why:

    
    
      grid.css
      .line:after, .lastUnit:after {
        clear: both;
        content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
        display: block;
        font-size: xx-large;
        height: 0 !important;
        line-height: 0;
        overflow: hidden;
        visibility: hidden;
      }
    

Anyone care to explain that one? Disabling it causes some sections of the page
to overlap.

    
    
      grid.css
      .size1of1 {float: none;}
      .size1of2 {width: 50%;}
      .size1of3 {width: 33.3333%;}
      ... etc
      
      content.css
      .f105 {font-size: 105%;}
      .p0 {padding: 0;}
      .p15 {padding: 15px;}
      .pt0 {padding-top: 0;}
      .pt25 {padding-top: 25px;}
      .pl0 {padding-left: 0;}
      .pl15 {padding-left: 15px;}
      ... etc
    

They've achieved "object oriented" by moving the styles from the CSS to the
class attribute. ie, you might as well write `style="padding:0"`, it's the
same thing. No doubt HTML-veterans who never really got the whole CSS thing
would like it, it's very nearly equivalent to using tables for layout, but
with floats instead of <td>s.

That said, I have not used it, or any similar CSS frameworks. Anyone who has
care to comment on usability / reusability?

~~~
toolate
If this is object oriented then his approach can best be likened to multiple
inheritance. Because CSS doesn't offer any kind of native inheritence he's
forced to redefine each and every class for each instance. This is the
equivalent of defining code like:

    
    
        var foo = new Animal Brown Quadruped Barking();
    

Even if styles could be inherited, this seems to be taking the wrong approach.
Most of use realise that classes should be used to denote identity, and not
behaviour (or in this case, styling). CSS preprocessors seem to fix the same
problem in a much nicer way.

    
    
        /* 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;
        }

~~~
Groxx
That multiple-inheritance comparison as you showed it is just about perfect,
thanks! And yes, preprocessors make a _ridiculous_ amount of sense. That
mixins and variables aren't part of CSS seems almost like an oversight.

At least there's Less. Anyone use it, or know of a better system?

~~~
roryokane
I have tried out both Less (<http://lesscss.org/>) and Sass (<http://sass-
lang.com/>), but not used either in a big website. It looks like Sass is
better – it is more powerful in that it supports more functions and you can
optionally use an alternative, less-redundant syntax with significant
whitespace and no semicolons. The 2009 post <http://nex-3.com/posts/83-sass-
and-less> by the creator of Sass compares the two, and the two deficiencies in
Sass mentioned in that post have since been fixed. From what I can tell from
looking quickly at the Less website, it hasn’t really improved since I last
saw it. I’m using Sass for my very simple personal website, and it works fine
for me.

------
Silhouette
There are few things in the software development world that are more annoying
than buzzwords.

One of them is people who completely misuse buzzwords in an attempt to seem
more relevant/knowledgeable/important than they really are.

It is not often that I wish I could actively downvote an article on HN, but
today I do.

~~~
howardr
I do agree with the buzzword comment, but her pattern, however it is named, is
a good one. We have been using at uShip.com for about 20 months.

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%

~~~
rimantas
How much did she increase the weight of HTML? CSS file can be downloaded once
cached and never bothered again (if expires is set correctly). Bunch of
classes attributes in your HTML will travel down the line every single time
you request a page.

~~~
hoopadoop
By an insignificant amount.

------
jarin
I've never been a big fan of the "throw in a bunch of classes" approach to CSS
frameworks (e.g. this, Blueprint, etc). I prefer Compass' mix-in approach
instead, since it maintains the separation between content and presentation.

Instead of this:

    
    
      <div class="span-12 loud last"></div>
    

You do something more like this in your SCSS:

    
    
      .mydiv {
        @import column(12, true);
        @import loud;
      }

------
ghempton
Would be really nice to see some actual code right up front. It's hard to grok
exactly what this is right off the bat.

------
torme
Im curious as to how this works, but there doesnt seem to be any code examples
and the download link seems non-existent. Can someone explain how this is
used?

Edit: Scratch that, the download seems to be working now, and it contains some
better documentation.

------
sayemm
Good book to check out on this is "Pro CSS and HTML Design Patterns" -
[http://www.amazon.com/Pro-CSS-HTML-Design-
Patterns/dp/159059...](http://www.amazon.com/Pro-CSS-HTML-Design-
Patterns/dp/1590598040/ref=sr_1_1?ie=UTF8&s=books&qid=1297301360&sr=8-1)

The author uses OO-based css examples all throughout the book, it was my first
time reading about it and thought it was pretty cool. You could read through
the descriptions on Amazon to get the general idea.

------
wladimir
Nice to see that people are working on making CSS better, in its bare state
its awful to read, write and maintain. And reuse is almost impossible, it's
the classic write only code.

How does this compare to sass? I suppose this also works as a preprocessing
step, and 'compiles' to CSS?

------
dahlia
<http://j.mearie.org/post/3212514215/object-oriented-css>

Someone wrote a post I agree about this.

------
siika2000
I hate everything that is marketed as OO, and I hate CSS, now I don't know
whether these two should cancel each other out or not...

