OOCSS Revisited

HTML & CSS
1

Hello everyone,

Some of you may remember this thread on OOCSS from a while back: http://www.sitepoint.com/forums/css-53/object-oriented-css-uses-learning-newbie-740553-2.html

In it, there was a link to a video of Nicole Sullivan presenting her brain child to a YDN group: Stubbornella » Blog Archive » Object Oriented CSS video on YDN

There is also an article about it here: Meet Object Oriented Css Cut The Fat Out Of Code With This Smart Time Savin | Articles | Meta Q (which is rather short).

I wanted to watch it way back then, but stuff got in the way and I didn’t watch it until today.

Now, I’d like to revise my stance a bit.

For those of you that don’t know, the basic premise is that you use class which essentially represent different “objects”. Then, to style your HTML, instead of creating unique styles for each object that’s slightly different, you give it multiple classes to describe the element using your already made blocks.

I don’t think this solution is perfect, but I do thing it’s certainly worthwhile to learn about (or at least watch the video).

It is definitely not a perfect system, however, I can definitely see advantages to using it. I’m in the process of wrapping up a redesign of a site with roughly 1,200 pages. In this case, I see where this system could have saved us considerable time.

The system does call for avoiding IDs, which makes sense in most cases. However, the religious avoidance of IDs would also be kind of pointless for one-off cases which always crop up.

What are your opinions on OOCSS? Have you ever used it in a project?

2

Hi,

It seems another case of giving a name to something that most of us will normally do throughout the construction of a site. I always look for similar structures and try to make re-usable blocks where possible to cut down on code.

Unfortunately most designers want elements to look different on each page and change just enough to make this method awkward and you end up with a basic structure that is then re-modified repeatedly through a document making it hard to make changes later because you don’t know what the original requirements were.

You usually end up with an element that has numerous modifying classes and it can be a nightmare 3 months down the line working out what you need to change without changing all the other elements based on that structure. (CSS is a bit like that at the best of times anyway.)

So in essence I agree that creating re-usable blocks is useful but it does depend on the design in hand. Remember that because css is cascading you can’t just lift a section of code and place it somewhere else as you never know what rules will cascade through it depending on its position. Although I gather that the premise is that you never create a global rule and apply styles to individual elements to avoid this. Of course that ends up with spaghetti html that is reminiscent of font tags and other deprecated presentational markup where all the information is now back in the html and not in the stylesheet.

The other thing that turned me off in the video was the extremely badly structured html examples that they used (and as we commented on in the other thread).

I don’t think the video was as bad as the others made out but it seemed more a case of stating the obvious in places. I think most of us have snippets of code that we use time and again and in a way that is doing the same thing.

Obviously if you say #outer p{} then you can’t just use p.test {} later as it will be over-ridden by the former but these are the things that you should plan in from the start.

I did a site a few years ago where the client had designed about 50 elements that they were going to re-use over the whole site so I created the basic structure for each element as a re-usable block. However, on this site they had 20 sections on the main menu and each page was themed in a different colour. Therefeore I have to modify the 50 elements another 20 times just to change colour on those pages.

However the client also changed how the element looked on the other pages - not by much - just larger text - images moved slightly and text moved or deleted. The basic structure was the same but in the end I was adding so many classes to make the differences that the code ended up being more bloated than If I’d create a new element for each and avoided all the conflicts that later arose.

I always tell clients not make me micro-manage content on each page and just be consistent throughout but unfortunately most clients aren’t interested and want variety.

I think I’m rambling now :slight_smile:

3

To me, this “object oriented CSS” nonsense is exactly that – 100% farm fresh manure that defeats one of the reasons to be using CSS in the first place; SEPARATION OF PRESENTATION FROM CONTENT.

Multiclassing for presentation is basically using presentational classnames – which for all intents and purposes is PUTTING PRESENTATION BACK INTO THE MARKUP. The only way this could be seen as advantageous is the people who never understood the point of CSS, semantic markup, and basically want to have to edit every blasted line of their HTML just for simple mass restyling.

In MODERN markup, HTML is for saying what things are, NOT what they are going to look like. Presentational classes are the antithesis of that and why I cringe every time I see classes like “left”, “bigfont” or “doubleBorder”.

Pure idiocy. It reeks of the same type of stupidity as putting classes on EVERYTHING, even when you have fifty identical elements in a row. Take a look a the output of a turdpress menu to see what I mean by that.

That they seem to be selling it as code saving when it makes more HTML – that’s just “HOLY HANNAH!!!” – been studying at the throne of jquery and Grid?

It does tread into CSS framework territory – and like Grid, YUI and all the rest, it again MISSES THE POINT OF CSS, SEPARATION OF PRESENTATION FROM CONTENT and the dozen other things that can give you REAL bandwidth savings and result in clearer code.

Just look at the rubbish example from MetaQ.


 <div class="unit size1of2">
        <div class="unit size1of3">
            <p>Lorem</p>
        </div>
        <div class="unit size1of3">
            <p>Ipsum</p>
        </div>
    </div>
    <div class="unit size1of2">
        <div class="unit size1of4">
            <p>Lorem</p>
        </div>
        <div class="unit size3of4">
            <p>Ipsum</p>
        </div>
    </div>

Vague/meaningless garbage – entirely typical of someone who failed to grasp the POINT of CSS. That point being NOT saying what the presentation is in the markup, and saying what things ARE… What the devil ARE those containers?

I swear, I’ve seen some DUMB… stuff … online, but this one really ranks right up there with the best of them.

Object oriented my ASS. As someone who’s been doing object oriented programming since smalltalk, SOMEBODY needs to go back and learn what that means – this is PRESENTATIONAL MARKUP. Nothing more, nothing less.