2

I have heard of OOCSS some time ago, but never really looked into it. Today I did so, and I thought of the implications of applying OOCSS to a simple CSS theme. One problem I thought of is that, by its nature, OOCSS encourages DRYness and consequently the use of many concise classes that should be applied to elements by the HTML developer. As a CSS theme, I would assume it isn't something significant enough for a developer would go out of his/her way to add specific classes to their elements when writing HTML:

<button class="blue rounded no-border $etc">Button</button>

as opposed to:

<button>Button</button>

Perhaps the HTML developers would be OK with writing the extra code, although it seems there is just as much repeating code on the HTML side as there would be without OOCSS. So, is OOCSS not a one-size-fits-all methodology for writing CSS code, as in this example? Or am I not understanding things properly?

8

I think that OOCSS by way of your example is an anti-pattern that does not provide a clear separation of concerns (html vs css) and does not provide you with semantic html nor css.

The separation of concerns is that HTML is concerned with the structure of a document, while CSS is concerned with how that document is presented.

<button class="green rounded no-border">Save</button>
<button class="grey rounded no-border">Cancel</button>

With the following css:

.green { 
    color: #0f0; 
}

.grey { 
    color: #777; 
}

.rounded { 
    border-radius: 5px; 
}

.no-border { 
    border: none; 
}

Violates this separation of concerns by having the HTML document indicating that the save button should be green (instead of CSS telling it).

While OOCSS is designed to reduce the amount of code you write, it ends up being a maintenance nightmare by having to declare many (not semantic) classes. Suppose you want later all your save buttons to be blue instead, are you going to change your green class to be blue, or are you going to do a ctrl+f in all your source files and update the text green to blue?

A good way to introduce reusability while still retaining semantic HTML / CSS is to use a CSS compiler (like less.js for example).

<button class="primary-action">Save</button>
<button class="cancel-action">Cancel</button>

With the following less.js:

/* these are reusable variables */
@primary-action-color: #0f0;
@cancel-action-color: #777;

/* this is a re-usable "mixin" */
.rounded() { 
    border-radius: 5px; 
}

button {
    border: none;
    .rounded;

    .primary-action {
        color: @primary-action-color;
    }

    .cancel-action {
        color: @cancel-action-color;
    }
}

While it is more code initially, when you start reusing these variables / mixins you will be able to benefit from the semantic HTML and organized CSS. For example, because the cancel-action has a good meaningful name, you can already add functionality to your app that makes sense. Take for example the following jQuery.

$("button.cancel-action").click(function(e){
    if (!confirm('are you sure you want to cancel?')) {
        e.preventDefault();
    }
});
  • Thanks for the informative answer. I realise I could use a CSS preprocessor such as LESS (which I use) as an aid when writing OOCSS, so I could use mixins in the CSS rather than specifying styles in the HTML (button { .rounded; .grey; .no-border; }, instead of <button class="rounded grey no-border"), though I suppose it would sacrifice speed - as the compiled CSS would be much larger - in exchange for the extra convenience. – Marco Scannadinari Apr 26 '14 at 12:02
  • @Marco: The compiled CSS would probably be a bit larger...but not outrageously so, as long as you try to keep things shallow. Meaning don't go arbitrarily nesting blocks in blocks in blocks in blocks in blocks....etc unless you actually need to be that specific. – cHao Apr 27 '14 at 1:05
  • @Marco: Also keep in mind the now-absence of the "rounded grey no-border" crap from every button in every page of the site. :) Your CSS file will typically be downloaded once and cached, so that one-time cost would likely pay for itself with the little bit shaved off every page loaded. – cHao Apr 27 '14 at 1:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.