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.