CODEWITHSUNDEEP
cssoocss
Laz
Laz

Reputation: 3538

Anyone Using Nicole Sullivan's Object Oriented CSS Framework?

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?

Upvotes: 0

Views: 2501

Answers (4)

Isabelle Harms
Isabelle Harms

Reputation: 375

I am using it and loving it. The college I am employed uses rich intranet web applications that use a list {} object that I created. It arranges links horizontally and vertically, but has "extending classes" (skins) to convert them into header bars, menus, tool bars, tabs, accordions, and button groups. The List {} object contains no colors or borders, just a clearfix and a few modifiers. The actually appearance is stored in separate classes. I also use preprocessors to

I would make 3 suggestions if you go down this route.

  1. Use the B.E.M (block / element / modifier) naming conventions

  2. Think basic lego blocks and use use classes to extend them.

  3. Use LESS or SASS to separate out the appearance

Upvotes: 2

Rimian
Rimian

Reputation: 38458

The OOCSS framework doesn't solve some of the problems defined by its own principles. OOCSS still contains redundancy and by moving the composition of components into the DOM, its coupling content back to the presentation.

OOCSS does make some good design decisions that should encourage users to maintain their CSS in a consistent fashion. This is a good thing. But the lack of documentation supplied with it means you'd have to reverse engineer it should it not quite fit your needs. This process wouldn't be reliable so you could end up back where you started... with messy CSS.

Upvotes: 3

dre1080
dre1080

Reputation: 73

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

Upvotes: 2

clinton3141
clinton3141

Reputation: 4841

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

Upvotes: 3

Related Questions