Object Oriented CSS: Separating Skin From Structure

legos

There are plenty of basic, but sometimes confusing parts of CSS.

Even after you begin to get a handle on the form and function of the language, it’s always good to have a road map, game plan or blueprint for your code. Just try going back and making edits to a CSS stylesheet you made a year ago!

After reading about OOCSS (Object Oriented CSS) on Smashing Magazine, I was inspired to both keep the concept in mind when editing stylesheets, but also implementing this concept when starting fresh.

Here’s how it works:

Object Oriented CSS

The purpose of OOCSS is to reuse code, thus making your stylesheet faster to read and easier to maintain.

OOCSS centers around the basic concept of separating skin from structure.

The skin is your style and branding — colors, borders, gradients.

The structure is the unseen structure.

If your website was a house, the skin would the painted walls and the structure would be the unseen framing.

When these different features are abstracted into class-based modules, they become reusable and can be applied to any element and have the same basic result.

Here is CSS before:

#button {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: solid 1px #ccc;
    background: linear-gradient(#ccc, #222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
    width: 400px;
    overflow: hidden;
    border: solid 1px #ccc;
    background: linear-gradient(#ccc, #222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
    width: 500px;
    min-height: 200px;
    overflow: auto;
    border: solid 1px #ccc;
    background: linear-gradient(#ccc, #222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

The three elements above have styles that are unique to each, and they’re applied with the non-reusable ID selector to define the styles. But they also have a number of styles in common. The common styles might exist for branding purposes or consistency of design.

Here is what it would look like with the OOCSS concept applied:

.button {
    width: 200px;
    height: 50px;
}

.box {
    width: 400px;
    overflow: hidden;
}

.widget {
    width: 500px;
    min-height: 200px;
    overflow: auto;
}

.skin {
    border: solid 1px #ccc;
    background: linear-gradient(#ccc, #222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

All of the elements are using classes and the common styles are combined, so nothing is repeated.

Less is more.

The separation between skin and structure can then be applied with the division of containers and content.

I highly recommend giving the whole concept a read and giving it a try.

It seems like some pretty solid code theory.

I like it.

Have you tried OOCSS?

[via Smashing Magazine | Image via indrarado]

Eric Dye

I am an entrepreneur and human rights advocate. I spend most of my time as writer and editor for ChurchMag and Finding Justice, but you can also find me working on Live Theme and for the International Human Rights Group. All while enjoying my family and sipping espresso in Italy.

We have 4 comments...
Now let's hear from you!

  1. says

    Eh, it’s not really object orientated (object orientated is something entirely different, with its own set of rules). It’s just separating your styles into reusable parts.

    Since I’m primarily a programmer (and we do that sort of thing with our code all the time) I’ve been doing that for ages, but I imagine to someone who doesn’t have that sort of background, this would seem quite revolutionary.

What would you like to say?

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>