OOCSS (Object Oriented Cascading Style Sheets) is concerned with converting your regular CSS styles to reusable classes. A CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of code.

It has two major principles: Separate structure and skin and Separate container and content

1. Separate structure and skin

The structure refers to invisible styles applied to elements (width, height, margin, padding) while the skin is the visible styles (colors, fonts, shadows).

OOCSS defines these two separately. For example, this snippet of CSS:

.button {
   width: 100px;
   height: 50px;
   background: #000;
   color: #fff;
}

.button-2 {
   width: 100px;
   height: 50px;
   background: #fff;
   color: #333;
}

We can see that both classes have the same structure but differs in the skin properties. OOCSS deals with this situation and separate them as follows:

.button {
   background: #000;
   color: #fff;
}

.button-2 {
   background: #fff;
   color: #333;
}

.btn-structure {
   width: 100px;
   height: 50px;
}

Now we don't have redundant code and the .btn-structure class can be used on any button having the same structure.

2. Separate container and content

Content refers to the elements as images, paragraphs, divs which are nested inside other elements that serve as Containers.

Styles used for Content elements should be independent of the container class so that it can be used without restrictions on their parent element. For example, this is a regular styling for a sidebar.

#sidebar {
    padding: 2px;
    left: 0;
    margin: 3px;
    position: absolute;
    width: 140px;
}


#sidebar .list {
    margin: 3px;
}


#sidebar .list .list-header {
    font-size: 16px;
    color: red;
}


#sidebar .list .list-body {
    font-size: 12px;
    color: #FFF;
    background-color: red;
}

But if we separate content from container, it will something like this:

.sidebar {
    padding: 2px;
    left: 0;
    margin: 3px;
    position: absolute;
    width: 140px;
}

.list {
    margin: 3px;
}

.list-header {
    font-size: 16px;
    color: red
}

.list-body {
    font-size: 12px;
    color: #FFF;
    background-color: red;
}

Now these classes can be used in many situations without the restriction of having a parent with an id of #sidebar or .list.

This methodology has some benefits and some disadvantages. The benefits could be:

• Scalability and Reusability

The classes are in a global state that can be used in any project or application with minimum changes.

• Readability

Other programmers can read your styles easily as there is no nesting or complications.

The disadvantages on the other hand could be:

• Not suitable for small projects

This could be a headache to apply on a small project that has minimum styles and no complications in HTML structure.

• Increases number of classes

As you can see above, to apply these principles we had to increase our classes to apply separation concept.

Conclusion

There are many methodologies for organizing your styles, but this one is very simple and can be used instantly as long as you keep these two rules in mind.