What is OOCSS?

Object Oriented CSS, as its name implies, draws inspiration from object-oriented programming. The main motivation for this approach is to increase the usability of the CSS code, thereby facilitating its maintenance. In other words, it’s about making CSS more modular and object-oriented. Keep in mind that this is just a method of style writing, so you need to make sure our code is OOCSS compliant …

The OOCSS approach is distinguished by the term “object”, which is understood as a piece of HTML code (individual elements or whole groups thereof) with corresponding CSS classes and possibly some JavaScript code. Of course, such objects can be re-used in many places in the application. An example of such an object might be, for example, an input element with styles (including validation errors) and JavaScript validation. However, the object may also be the entire form, such as registration for the Newsletter.

Consequently, such objects should be kept in mind at the design stage of the HTML document structure. You can say that you have to “think at OOCSS” from the beginning, and we have two basic rules to help you:

  • separation of structure from style
  • separation of containers and contents

Below I will try to discuss these two rules in a bit more detail.

Separation of structure from style

This is to create first more global classes, which will define the general structure of objects of a given type. Then create more specialized classes that are responsible for the specific style of the object depending on the situation. The most frequently cited example is the button element, so I will be using it:

  • To begin with, we define the btn class responsible for defining the structure of all the buttons on the page: for example, we want all buttons to have rounded corners, centered text, 14px fonts, and some default settings.
  • Then we define the btn-primary, btn-cancel and btn-special classes and give them styles according to their destination.

In a CSS file this would look something like this:


.btn {
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000;
  padding: 5px 10px;
}
 
.btn-primary {
  background: #47c4ff;
}
 
.btn-cancel: {
  background: #b5b5b5;
  color: #fff;
}
 
.btn-special: {
  background: #ff0000;
  font-size: 20px;
}

Using the above classes in the HTML code would look like this:

<button class="btn btn-primary">Submit</button>
<button class="btn btn-cancel">Cancel</button>

As you can see, it means that by giving elements structural styles, we define the overall appearance of them, and, in addition, we can set a specific appearance according to their needs.

P.S. By doing “research” to this post I came across an additional “level” of separation, which I find quite a cool approach (you will find this in one of the links I posted at the end of the post). This is the class that is responsible for the size of the objects. In our example, we could have btn-small, btn-medium, and btn-large classes that would modify the font size and padding properties.

Separation of containers and contents

The second OOCSS principle talks about the separation of styles for containers and content. I think the easiest way would be to put it simply on the example – let’s first look at HTML:


<section class="meta">
  <h1>Meta</h1>
</section>
<article class="post">
  <h1>Post title</h1>
</article>

How often in “spaghetti” CSS we can find such styles for the above HTML:


.meta h1 {
  font-size: 1em;
}
 
.post h1 {
  font-size: 1.2em;
}

What’s wrong with this code? Ano styles for h1 elements depend on where the item is located … According to the OOCSS, the object should look the same regardless of the container we put it in. So if we want to add a modification anyway, we should use a specific class:


h1 {
  font-size: 1em;
}
 
h1.post-header {
  font-size: 1.2em;
}

Thanks to that, our sample HTML would now look like this:


<section class="meta">
  <<h1>Meta</h1>
</section>
<article class="post">
  <h1 class="post-header">Post title</h1>
</article>

This approach makes it easier for us to maintain the code - if you want to restore a component to its default look, you just need to remove the specific class from it. Besides, we are sure that an item that does not have a class will have the default settings.