Ali Jafarian
Ali Jafarian

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.

*Note: OOCSS can get complex, and there are plenty of other detailed articles on the web. This article is meant to serve as a basic understanding.

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.


Ali Jafarian

Ali is a father, husband and serial entrepreneur with a deep drive to create. He writes, records, codes and builds things to inspire the artist in all of us.


Did you find value here?

If so, jump on my email list to be notified of new posts.

Subscribe

Discussion

Leave a Comment

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


Latest Articles
Truly Seeing Our Children

How often do we truly see our children? Let me be clear – most of us see our children every day, especially if they’re still living in our homes. We…

View Post
A BraveSoul Experience

I had the recent privilege to experience the BraveSoul 2022 retreat in Ireland. This event was both world class and transformational. It’s the type of retreat you need to experience…

View Post
The Cost of Attachment

What’s the cost of attachment? This is a question came into direct focus for me with the recent passing of my dog, Raja. The experience of Raja passing was quite…

View Post