Why Object Oriented CSS (OOCSS) is the future

30 Nov 2014, by Moe in Developer

I often find myself frustrated at my CSS code after writing it, trying to maintain the giant mammoth of a file that seems to have something new every day. I typically go with whatever method is being used for CSS so I don’t have the luxury of deciding to change it halfway through and the refactor would take ages. So I’m hoping I can clear up some misconceptions about OOCSS and why it’s superior to standard CSS – which I believe is an outdated way of creating CSS.

A web developer would argue that speed is paramount to success, you need to meet your deadlines at all costs. The argument is that utilizing OOCSS would jeopardize our time and take it away from optimizing JavaScript for example. I find this is often true if the developer lacks a strong knowledge in Object Oriented (OO) in general or the application towards CSS. I find it takes me the same amount of time, or maybe less to create OOCSS since I can identify and reuse a lot of code which reduces the amount I need to write.

We need to focus on structure, CSS is often jumbled up or separated out by comments and code folding which is not structure. I’m talking about identifying the common denominator, pulling it out, and creating a sort of base class for it. We need to start out by using actual OO classes to reduce our code, increase performance, and reuse it later.

Next is focusing on separating the containers, from the content. Typically with standard CSS it’s common to find a piece of content that has an impact on its container. While this works, it has a huge impact when HTML is modified causing us to need to go back and refactor that piece of CSS and make sure it’s still usable everywhere it’s used in the HTML. Again, with OOCSS we are not concerned about that because we have that separation in place already. This also leads to unnecessarily duplicating code because now we have 2 or more places that were using that particular style and we need to create 2 similar styles to use because we changed something.

The proof of the success of this strategy is Twitter’s Bootstrap OOCSS framework. They implement OOCSS to the fullest and a simple and effective example is their buttons. We start with a button HTML tag and add in the “btn” class:

<button class=”btn ”>…</button>

This is the bootstrap buttons base class, it contains CSS that is common across all bootstrap buttons. Now, let’s make it look like a success button by using the “btn-success” class:

<button class=”btn btn-success ”>…</button>

Now our button looks pretty good and we can stop here if we’d like, but we want to make out button fill up the horizontal space so what do we do? We add the “btn-block” class:

<button class=”btn btn-success btn-block ”>…</button>

Our button now takes up 100% of the containers width that it resides in. Interactive CodePen here:

Notice how we kept adding more and more CSS classes to achieve the desired effect? This is the Object Oriented concept applied to CSS. Our button starts out with some basic common properties, then we add some more, maybe enhance some, change some, and the result is a great looking button!

This seems great and all but what about reusability? Well, if we look at the Bootstrap documentation we can see that all buttons will utilize the “btn” class so we have saved a tremendous amount of code from that alone.

Another benefit is a maintainable style sheet, with OOCSS we have an easy to maintain set of classes. When making additions to our style sheet, we won’t be adding anything, but extending it; much like we do in any application of the OO principal. Web site load times are reduced since we don’t have as much CSS. We also benefit from performance freebies because whenever we use our classes like the example show above, we are essentially creating a new styled element with 0 lines of CSS code.

A few tips I like to keep in mind are:

  • Avoid selectors (i.e. don’t use .item-list li)
  • Avoid IDs
  • Avoid attaching classes to elements (i.e. don’t do div.footer or h4.header)
  • Avoid using !important
  • Use a grid layout system

As with everything else in programming, we will always have a few exceptions here and there, use your best judgment. As for the last point, while it may be tempting to create your own grid system, there is no need to reinvent the wheel, we have plenty of free and really nice CSS grid systems out there.

In conclusion, while I know a lot of people will try to avoid OOCSS because it goes against many so called “best practices” in CSS; however, it’s becoming more and more important to structure anything in your project and that includes styles. Once we have more huge companies using OOCSS then the long-term benefits will be realized by the masses as with any new software development concept, not that OOCSS is new but that it’s finally getting some attention due to companies like twitter implementing is so successfully. Moving forward, I hope we can push for a more structured and cleaner form of CSS in future projects.