Object Oriented Css - Simplified

Object oriented coding can sometimes be hard to understand. When working with other people I usually use this metaphor to explain oocss.

We want to create a list of books, that sit on a shelf within a library. As html it would look something like this:

<ul>
    <li>Book 1</li>
    <li>Book 2</li>
    <li>Book 3</li>
</ul>

The wrong way
The common (but very wrong) way is to apply specific class names to each level, combining structural and visual styles together under a single class e.g.

.library {
    margin: 0px auto 0 auto;
    width: 980px;
    background-color: #ffcc00;
}

.shelf {
    padding: 20px;
    background-color: #333333;
}

.book {
    display: inline-block;
    width: 100px;
    margin: 0px 10px 0px 0px;
    background-color: #ccff00;
}

The object oriented way
Separate structure/layout from style/theme. So in our example that would be:

Layout/Structure:
1) library - the bricks and mortar of the building
2) shelves - the shelves attached with hinges to the brick, x amount
3) book - the items containers with content inside them, x amount

Style/Theme:
1) library - The decoration on the walls, how it looks and is painted
2) shelves - the wood effect, shadows borders, spacing
3) books - whether the books are big blue hardbacks, or small red paperbacks

Layout

We can identify the common structural elements and give them their own name-spaced class:

.layout .row {
    max-width: 980px;
    margin: 0 auto 10px auto;
    overflow: auto;
}

.layout .row .row {
    margin: 0 -10px;
}

.layout .col {
    float: left;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

So how would our html look with the structural css class names?

<div class="layout">
    <ul class="row">
        <li class="col">Book 1</li>
        <li class="col">Book 2</li>
        <li class="col">Book 3</li>
    </ul>
</div>

Theme

Then identify the common visual/styling elements and give them their own name-space class:

.light {
    color: #333333;
    background-color: #ffffff;
}

.light .c1 {
    color: #333333;
}

.light .c2 {
    color: #2989D8;
}

.light .bg1 {
    background-color: #ffffff;
}

.light .bg2 {
    background-color: #eeeeee;
}

Now how would our html look with these style/theme classes?

<div class="layout">
    <ul class="row light">
        <li class="col c1 bg1">Book 1</li>
        <li class="col c1 bg1">Book 2</li>
        <li class="col c1 bg1">Book 3</li>
    </ul>
</div>

Now we can reuse our classes and even move the theme around to theme just a single row if we want or even add a second theme for that row of items:

<div class="layout">
    <ul class="row light">
        <li class="col c1 bg1">Book 1</li>
        <li class="col c2 bg1">Book 2</li>
        <li class="col c1 bg2">Book 3</li>
    </ul>
    <ul class="row dark">
        <li class="col c1 bg1">Book 1</li>
        <li class="col c2 bg1">Book 2</li>
        <li class="col c1 bg2">Book 3</li>
    </ul>
</div>

.dark {
    color: #ffffff;
    background-color: #111111;
}

.dark .c1 {
    color: #ffffff;
}

.dark .c2 {
    color: #2989D8;
}

.dark .bg1 {
    background-color: #111111;
}

.dark .bg1 {
    background-color: #333333;
}

To see a real-world example check out my simple responsive template on github:
https://github.com/kmturley/alley