Anyone Using Nicole Sullivan's Object Oriented CSS Framework?

Question

Edit: Due to an excellent comment by Kobi pointing to this StackOverflow Question, I have amended the question below:

Has anyone out there tried out Nicole Sullivan's Object-Oriented CSS framework or one of their own? If so, what were the advantages/disadvantages?

Are there any production sites using the framework Object-Oriented CSS?

Answer 1

I use both OOCSS and normal CSS in most of my stylesheets. I don't think that it makes sense to use OOCSS for styling of typography, but for things like columns, boxes and buttons, I think that it does make sense and it can really help to (in my opinion) make the code simpler.

Using a rather contrived (and terrible - classes should describe function, not form) example:

Using OOCSS

a.button {display: block; background-color: red;}
a.border {border: 1px solid orange;}

<a class="button border" href="#">My bordered button</a>
<a class="button" href="#">My normal button</a>

Using normal CSS

a.button_and_border {display: block; background-color: red; border: 1px solid orange;}
a.button_no_border  {display: block; background-color: red;}

<a class="button_and_border" href="#">My bordered button</a>
<a class="button_no_border" href="#">My normal button</a>

As you can see, there's less CSS in the OO example, which I personally find easier to read. But I suppose at the end of the day, it's all down to personal preference and coding style :)

Answer 2

you shouldnt specify the tag in the oocss, its one of the pitfalls that she presented, so you can use the .button on any other tag and then extend that new tag..eg.

<button class="button">works on this</button>
<a class="button">works on this also</a>
<input type="submit" class="button" value="and this too"/>

specifying a.button in the css means you'll have to repeat it in the css again if u want to use it on another tag.. the main point is so that you dont repeat your styles and avoid redundancy.. you should download her examples on github