Object Oriented CSS

It wasn’t till a few weeks ago that I learned there was an actual term to what I have been building and practising when working with CSS. Object oriented CSS is basically creating robust and reusable CSS to style blocks of HTML – which can then be reused in various layouts without having to create new CSS. This means you can build a cleaner, meaner, smaller CSS file for high performance websites and applications. Though the main goal is to improve your CSS, this theory encompasses how you build your HTML so that they CAN be reused optimally.

There are two main principles [in object-oriented CSS]: the first is to separate the structure from the skin and the second is to separate the container from the content. – Nicole Sullivan

Nicole Sullivan on Object Oriented CSS Video

It’s pretty crazy that I am just finally putting the correct terminology to what I have been doing all this time. I was in a team meeting when one of the developers brought up the term  “object oriented CSS” and I just had that funny look on my face like… what does that mean? And as soon as he explained it, I was awash with understanding and validation as if he had just put into words my inner web designer truth. So yeah, I’m pretty… no, I’m mega super excited about this and now I know what to call it. Thanks Ryan (explaining it to me) and Jason (sharing the video). I couldn’t imagine building a website without this core philosophy, it just wouldn’t make sense otherwise.

You can definitely learn more about the philosophy and how to put it into practice with the following links below.

Further Reading: