Understanding Object Oriented CSS

You may have heard the term before – Object Oriented CSS – which probably sounded confusing and way too technical. The truth is that it’s not. Object Oriented CSS (also known as OOCSS) is simply a practice of writing CSS that’s cleaner, leaner, and reusable.

The Concept

The concept is to code lighter, more efficient stylesheets that keep your web pages [or app] fast and organized. As a general rule of thumb – the smaller the stylesheet, the faster the load time and development time to make changes. If you’ve ever worked on a 10,000+ line stylesheet you know exactly what I’m talking about 😉

As it applies to bigger projects, OOCSS can save tons of time and keep multiple developers in sync. For smaller projects it may not be as applicable, but OOCSS is still a great practice to adopt and start using.

A basic example

Let’s look at the general structure of a fluid web page. Our markup will consist of a header, a wrapper, and a footer. A quick way to code this would be:

HTML

<div id="header"></div>
<div id="wrapper"></div>
<div id="footer"></div>

CSS

#header {
	float: left;
	width: 100%;
	margin: 20px 0;
	height: 100px;
	background: #000;
}
#wrapper {
	float: left;
	width: 100%;
	margin: 20px 0;
	min-height: 400px;
	background: #ccc;
}
#footer {
	float: left;
	width: 100%;
	margin: 20px 0;
	height: 60px;
	background: #333;
}

Now this is fine, but let’s look at another example using OOCSS:

HTML

<div id="header" class="full-width"></div>
<div id="wrapper" class="full-width"></div>
<div id="footer" class="full-width"></div>

CSS

.full-width {
	float: left;
	width: 100%;
	margin: 20px 0;
}
#header {
	height: 100px;
	background: #000;
}
#wrapper {
	min-height: 400px;
	background: #ccc;
}
#footer {
	height: 60px;
	background: #333;
}

As you can see, we’ve created a .full-width class that applies to each of our main elements, since they share similarities. So instead of recoding the same styles for each selector (like in the first example), we reuse styles by creating a common class and using it in our HTML when necessary.

The result is 4 less lines of CSS and better control over our HTML. Why better control? Let’s say the boss man wants to decrease the space between each main element. Now, you only have to change that once in the .full-width class (margin: 10px 0;) instead of changing it for every individual element.

Another example

Next, we’ll experiment with a more detailed example that further explores the power of OOCSS. Let’s use 3 various content blocks as our objects – a standard block, a block with a rounded border, and lastly, a block with a rounded border and light grey background. The normal HTML/CSS could be written something like this:

HTML

<div class="content-block">
	<h3>Title</h3>
	<p>Some text...</p>
</div>

<div class="content-block-rounded">
	<h3>Title</h3>
	<p>Some text...</p>
</div>

<div class="content-block-grey">
	<h3>Title</h3>
	<p>Some text...</p>
</div>

CSS

.content-block {
	padding: 20px;
	margin: 0 0 20px;
	clear: both;
}
.content-block-rounded {
	padding: 20px;
	margin: 0 0 20px;
	clear: both;
	border: 1px solid #ccc;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.content-block-grey {
	padding: 20px;
	margin: 0 0 20px;
	clear: both;
	border: 1px solid #ccc;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #ddd;
}

Again, this works. But let’s see if we can refine the code using OOCSS:

HTML

<div class="content-block">
	<h3>Title</h3>
	<p>Some text...</p>
</div>
<div class="content-block rounded">
	<h3>Title</h3>
	<p>Some text...</p>
</div>
<div class="content-block rounded grey">
	<h3>Title</h3>
	<p>Some text...</p>
</div>

CSS

.content-block {
	padding: 20px;
	margin: 0 0 20px;
	clear: both;
}
.content-block.rounded {
	border: 1px solid #ccc;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.content-block.grey {
	background: #ddd;
}

Here we’ve created a starting point with .content-block, and then we’ve added additional styles onto that class using the .rounded and .grey class variations (instead of creating 3 unique classes like in the first example). You can think of .content-block as our object, and the additional classes as attachments to that object.

Also, notice that we’ve saved 10 lines of CSS in this example (only 4 in the first). So you can imagine how the savings add up when you work on larger projects of scale.

Conclusion:

Object Oriented CSS is gaining more and more popularity in the web design world – It will help you code faster, smaller, and more organized stylesheets. OOCSS can be confusing at first, but once you get the hang of it you’ll never look back.

---