CSS

How to code object orientated CSS

It sounds really impossible that a language like CSS can be object oriented but it is possible to implement OOP ideas in CSS to make it into a much more pleasant writing experience whilst along the way making your CSS faster to load.

What is object-oriented CSS?

When you hear “object oriented CSS” you may think that this is somehow a new CSS, a pre-processor or something that was added to CSS but no, object-oriented CSS is the same CSS we have always written; but in a cleaner, dryer way so it’s merely a different way to write CSS than what you may be used to.

One that includes some simple practices to follow.

One of the principles attached to OOCSS is that you should separate structure from skin, by that I mean you should separate positioning from styling and keep these two in different classes so that you can later reuse the styling without duplicating the CSS.

Let’s say you have this H3:

<h3>I am an H3</h3>

Without the use of this principle you would style it something like this:

h3 {
    padding: 10px;
    font-color: #9ac689;
    font-size: 16px;
    font-weight: bold;
}

At first this will all work but the problem comes when you create another H3 and you want the same skinning as in this one but not the same positioning. This leads to repetition in the CSS which always makes up for bigger files.

Using OOCSS you would just separate it in classes like so:

<h3 class="padding aside-header">I am an H3</h3>
.padding {
    padding: 10px;
}
.aside-header {
    font-color: #9ac689;
    font-size: 16px;
    font-weight: bold;
}

This may look like some more code but when it comes to reusing this skinning you won’t need any extra CSS code, no repetition so at the end of the day it’s much less code.

The second principle is that you should separate container from content so that later you can reuse the styles no matter where those elements are in the DOM.

This means you shouldn’t bind elements to their container but instead just call the element in question so that in that way the element is movable without the change of any CSS.

The idea is that you shouldn’t do something like:

.header .nav {
    background: #f1f1f1;
}

But instead do something like:

.nav {
    background: #f1f1f1;
}

This means that if later in the coding you wish to duplicate this nav in the sidebar you won’t need to change any CSS in the process just copy the HTML and it all should work great.

The benefits of using OOCSS

As you saw in the code there are great benefits to using OOCSS in your projects those being:

  • Faster websites: since you are not repeating as much code in your CSS this means your CSS code will be smaller and download faster.
  • Maintainable stylesheets: there is no doubt that using this approach will make for more maintainable stylesheets, if you want to change the color of all the H3’s there is only one line to change, not 10.

Conclusion

Some people don’t really like the ideas behind OOCSS because in some ways it goes against best practices we used to have, but the truth is, in the long run when it comes to maintaining a stylesheet it becomes much easier when using OOCSS.

In my opinion OOCSS is something that has a future in the development community and that more people will start using mainly because websites are getting bigger and bigger and maintainable and faster websites are needed now more then ever.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
  • ajaykarwal

    The principle is good but the problem you’ll end up with is HTML markup littered with classes which perform very specific styling.

    Surely it would be better to just take a little extra time to think about the structure of your HTML (and of course beginning with your design) to ensure you don’t need to make decisions like ‘I want this H3 to have padding but not this one.’

    A few generic classes are fine, but I see your approach becoming overwhelming.
    Think Twitter Bootstrap. (col-xs-12 col-sm-6 col-md-4 col-md-offset-3 hidden-lg col-shut-the-hell-up!)

    • Shawn

      I’m not sure I agree with you @jaykarwal . On the surface, you comment makes sense, and I would not argue that planning prior to your project will help you immensely, however, there are applications where this method is extremely beneficial and time-saving.

      If you create multiple themes or skin from a basic structure-set or base theme, or if you develop dynamic modules for a CMS like WordPress, then OOCSS can really benefit. Sure the code you see may be a bit cluttered, but it will save you time and allows for a more module-based workflow.

    • To some degree, this is true, however, arbitrary selectors like ‘.padding { padding: 10px }’ should only be used from a micro-layout perspective. If you’re using object-orientated CSS, creating a reusable component should automatically inherit arbitrary selectors like ‘padding’, and so forth, should be written as part of that component and not inline with your HTML. Using padding on everything where it’s needed is just plain silly. Though, I call selectors like this ‘helper classes’ that are used very, very sparingly, though, extremely useful and reusable. Need padding on that heading? No problem. Use a helper class. Why create another declaration for the sake of a single rule? It’s all about reuse.

  • I think @ajaykarwal:disqus has a good point. It’s really nice to see HTML that is using class names to describe what the elements *are* rather than what they *look like.* And if you find yourself repeating code often, you can use your preprocessor’s mixin or extend features to keep everything DRY. With this approach, you can keep semantic class names *and* be able to change the color of all your h3’s with one line of code.

    I like what you said about the performance gains that OOCSS can bring. Definitely a relevant conversation for today’s web. That bit is a little trickier to manage with a preprocessor, too.

  • davidbiehl

    That was a great read, thanks for sharing. I’d like to learn more about OOCSS. Are there any other references or community supporting these principles? Are there more principles? Any examples of websites that do this well? Thanks!

  • Oh how nice, that is what I already tried out in my last projects, and it has a name! I think its very usefull, I use it for backgroundproperties, aligns, floats, backgroundcolors and more. I mostly use up to only three classes per div, very seldom four.

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress