OOCSS

This piece is part of a Learn HTML & CSS series. Check out part 3 here: HTML, The Cascade and Ways To Think In CSS

OOCSS stands for Object-Oriented CSS. The idea behind OOCSS is that you can reuse your HTML structures and patterns, meaning less CSS to deal with in the long run. This makes your stylesheets easier and more efficient to add and maintain over time.

So how does OOCSS work? The first step is to separate your structure from the skin.

What is structure? What is skin?

Structure is the basic core element that makes the website looks the way it does. When you are looking at structure, you are ignoring the branding elements such as typography, colors, borders, and any other specific stylized features.

Structure is based on the bones of your website. It helps you create the visual structure needed before you can start dressing it up. The structure is not expected to change too much over time. There might be tweaks such as fixing up a mobile web view compatibility issue or spacing in between columns and widget areas. But overall, the structure remains stable. They can act like Lego blocks that you can decorate later on.

Think of the skin as the decorative parts. It’s the bits and pieces that make your website ‘pretty’.

Structure is the basic core element that makes the website looks like the way it does. When you are looking at structure, you are ignoring the branding elements such as typography, colors, borders, and any special effects like hovers.

Think of structure as the base and bones of your website. It helps you create the visual rhythms needed before you can start dressing it up. The structure is not expected to change too much over time. There might be tweaks such as the spacing in between columns or widget areas. But overall, the structure remains stable. Most of the time, the structure is ‘invisible’ to the user and deals with how things are laid out.

The skin is the decorative part. It is bits and pieces that make your website ‘pretty’. Here is a table to help you differentiate the difference between structure and skin.

Structure

height
width
margins
padding
overflow

Skin

colors
fonts
shadows
gradients

Take a look at the following CSS below:

.button {
    width: 150px;
    height: 50px;
    background: #FFF;
    border-radius: 5px;
}

.button-2 {
    width: 150px;
    height: 50px;
    background: #000;
    border-radius: 5px;
}

The CSS is styling a button but there is unnecessary repetition. This can clutter your stylesheet over time and lead to potential inconsistencies because it requires changes in multiple places.

Based on the concept of OOCSS, you can abstract the above CSS into structures and skins. The width , height, and border-radius are repeated for both button classes, and the property types also falls under the structure side of OOCSS. Only background is different between the two buttons.

If we abstract it out, it means that we can reuse the .button class and only need to swap out the skin classes in our HTML.

Here is the refactored CSS:

.btn-light {
   background: #FFF;
}

.btn-dark{
   background: #000;
}

.btn {
   width: 150px;
   height: 50px;
   border-radius: 5px;
}

.button-light and .button-dark are both skins and decorates the base structure created through .button.

Here’s what it looks like when applied to the HTML:

<a class="btn btn-light" href="#">Home</a>
<a class="btn btn-dark" href="#">Blog</a>

Abstracting Structure: Separation of Container and Content

It’s easy to tell the difference between structure and skin once you get the gist of it. However, the scope of structure can get tricky. This is because structure is more than just setting the widths and spacing of things. Structure can be broken down into two further categories: containers and content.

Containers are the things that hold the other elements. These are the usual structural things like <div>, <span>, <article>, <navigation>, and <sidebar>. You don't really see containers.

Then there is the actual content such as <img>, <p>, <input>, and things like buttons. These elements may need extra styling such as positioning and typography. The issue that content often face is that it gets confused with being a skin. This is because things like typography can be both a structure and a skin, based on how it is used. The general rule for OOCSS is that if it's a repeating property, then it's a structure. If it's a variation of the base, then it is a skin.

Continue reading part 5: What Is SMACSS and How Does It Work?