What is Object-Oriented CSS?

Object-oriented CSS, at its core, is simply writing cleaner, DRYer CSS. It's not a different language: still the same old CSS we all know and love. It's just a paradigm shift. Really, object-oriented CSS is a few simple patterns and best practices.

So why call it object-oriented? Well, according to Wikipedia,

Object-oriented CSS is a coding paradigm that styles "objects" or "modules"—nestable chunks of HTML that define a section of a webpage—with robust, reusable styles.

This basically means that you have a standard "object" (an HTML structure). Then, you have CSS classes that you apply to objects, which define the design and flow of the object.

There are two main principles [in object-oriented CSS]: the first is to separate the structure from the skin and the second is to separate the container from the content.

Separating the structure from the skin means that your layout styling and your design styling are separate. One very practical way to do this is to use a grid system; there are many options, or you can create your own. If you're not using a grid system, you'll probably just define the structure on the primary object on your page; that's what we'll be doing today.

Separating the container from the content means that any object (the container) should be able to adapt itself to accept any content; for example, it shouldn't need to have an h3 at the top, followed by an unordered list for it to look right. This allows flexibility and reusability, which is paramount.

Why Should I Code This Way?

There are a few good reasons why you would want to write your CSS in an object-oriented way. One of the biggest benefits—and we've already mentioned it—is that your CSS will be more reusable. But your stylesheets should also become much smaller. Object-oriented CSS should make it easier to change the design of a site.

Writing your styling this way can also give you peace of mind: it will be much easier to change parts of your site without breaking things. Object-oriented CSS also enables you to change your site consistently.

How do I Practice Object-Oriented CSS?

Well, if you've come this far, you're interested in how exactly you write CSS with an object-oriented mindset. Here we go!

The first step is really prep for the CSS: you have to determine your HTML object. Generally, your object will have a header, a body, and a footer, although the header and footer are optional. Here's a very basic object.

<div class="object">    <div class="head"></div>    <div class="body"></div>    <div class="foot"></div> </div>  

Before you scream "DIVITIS!" realize that this isn't as bad as it looks; consider this:

<article>    <header></header>    <section></section>    <footer></footer> </article> 

Using HTML5, we now have got an object with semantic meaning and no soup-like characteristics. Actually, this is the object we'll use today.

If we're going to write some CSS, we'll need something to style, so let's whip up a very basic template: a blog home page, and a single post page. We'll be using a few HTML5 elements and some CSS3 styling today!

index.htm

Look familiar? That's our object, with an aside added for our sidebar. We'll look at the single post page a bit later, but let's hop into some CSS right now!

You'll notice that we are linking to three stylesheets: reset.css, text.css, and styles.css. Reset.css is Eric Meyer's reset. Text.css is important: the second step of object-oriented CSS is styling a few key basic elements; usually, these are text elements, like headers and lists. Styling these objects is important because it determines the consistent look and feel of the site; these elements, for the most part, won't receive any additional direct styling.

Here's what we've got in our text.css:

1. body { font: 13px/1.6 Helvetica, Arial, FreeSans, sans-serif;}  
2. h1, h2, h3, h4, h5, h6 { color:#333; }  
3. h1 { font-size: 50px; text-shadow:1px 1px 0 #fff; font-family:arial black, arial}  
4. h2 { font-size: 23px; }  
5. h3 { font-size: 21px; }  
6. h4 { font-size: 19px; }  
7. h5 { font-size: 17px; }  
8. h6 { font-size: 15px; }  
9. p, h1, h2, h3, h4, h5, h6, ul { margin-bottom: 20px; }  
10. article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } 
    

Now we'll start building styles.css; this is where the object-oriented magic begins. However, I'll first just throw in a few top-level styles, just to set a body background and some link and list styles.

1. body   
2.   { background:url(../img/grad.jpg) repeat-x #c0c0c0;   
3.   }  
4. /*Note: All the image will be in the downloadable source code. */  
5. a   
6.   { text-decoration:none;   
7.     color:#474747;   
8.     padding:1px;  
9.   }  
10. a:hover   
11.   { background:#db5500;   
12.     color:#fff;   
13.   }  
14. .selected   
15.   { border-bottom:1px solid #db5500;    
16.   }  
17. li   
18.   { padding-left:15px;   
19.     background:url(../img/bullet.png) 0 5.9px no-repeat;   
20.   } 
    

Our first order of business is to define the structure of the page:

1. #container                                      
2.   { margin:40px auto;   
3.     width:960px;   
4.     border:1px solid #ccc;   
5.     background:#ececec;   
6.   }  
7.   #container > header, #container > footer                           
8.     { padding:80px 80px 80px;   
9.       width:800px;   
10.       overflow:hidden;   
11.       border: 1px solid #ccc;   
12.       border-width:1px 0 1px 0;   
13.     }        
14.   #container > header                           
15.     { background:url(../img/header.jpg) repeat-x #d9d9d7;   
16.     }  
17.     #container > header li, #container > footer li  
18.     { float:left;  
19.       padding:0 5px 0 0;  
20.       background:none;  
21.     }  
22.   #container > section                          
23.     { background:#fdfdfd;   
24.       padding:0 40px 40px 80px;   
25.       float:left;   
26.       width:493px;   
27.       border-right:1px solid #ccc;   
28.     }  
29.   #container > aside                            
30.     { padding-top:20px;   
31.       float:left;   
32.       width:346px;   
33.     }  
34.   #container > footer                           
35.   { padding:40px 80px 80px;   
36.     background:#fcfcfc;  
37.   }  
38.     #container > footer li:after                
39.     { content:" |"   
40.     }  
41.       #container > footer li:last-child:after   
42.       { content:""   
43.       } 
    

Notice that we're styling our container object by starting all our selectors with #container. However, that's a special case: usually, you will want to use classes, because they are freely reusable.

We can use class selectors for our post styling:

1. .post                       
2.   { overflow:visible;   
3.     margin-top:40px;   
4.   }  
5.   .post > header            
6.     { margin:0 0 20px 0;   
7.       position:relative;   
8.     }  
9.   .post .date               
10.     { padding:2px 4px ;   
11.       background:#474747;   
12.       color:#ececec;   
13.       font-weight:bold;   
14.       transform:rotate(270deg);  
15.       -moz-transform:rotate(270deg);  
16.       -webkit-transform:rotate(270deg);  
17.       position:absolute;   
18.       top:60px;   
19.       left:-105.5px;   
20.     }  
21.   .post img                 
22.     { float:left;    
23.       margin-right:10px;  
24.     }  
25.     .post.ext img           
26.       { float:rightright;   
27.         margin:0 0 0 10px;   
28.       }  
29. .post footer              
30.     { overflow:hidden;   
31.     }  
32.   .post footer li  
33.     { float:left;   
34.       background:none;  
35.     } 
    

Let's look at what makes this CSS object-oriented. Firstly, we have not limited the class to a specific element; we could add it to anything. This gives us the most flexibility possible. Then, notice that we haven't set any heights or widths; that is part of separating the structure from the skin; we already wrote the sturcture styling, so this object will fill whatever space the structure gives it.

Also, we have styled all the elements involved in an independant way: the parent elements don't require certain children to look right; although we have styled child elements, nothing will break if they aren't there. And the child elements are, for the most part, not dependant on their parents; I haven't styled the h2 in a post object, because it should be consistent across the site; we already took care of that in text.css.

There's another important bit, the part most like object-oriented programming: extended classes. You probably saw that we have styling for both .post img and .post.ext img. I'm sure you know what they will do, but here's the proof:

Simply by adding another class to your object, you can change minor parts of the look and feel; I should mention that Nicole Sullivan would have created a class called .postExt, and then applied both to the object; I prefer to do it this way, because it allows me to use the same class name ("ext") for all my extensions, and I think it makes the HTML look cleaner. You just have to remember not to put a space in the selector; ".post .ext" will look for an element in class ext inside an element in class post. Without the space, it will look for an element in both classes.

On to the Sidebar

Now that we have the main content area set out, let's look at the sidebar. We've got two objects in the sidebar: an archives list and a recent comments list. To begin, we'll create a .side-box class for them:

But let's create an extension for this; however, since we want to do a large visual adjustment, we won't extent the side-box class directly; we'll create a new class.

1. .pop-out > section > *   
2.   { display:block;   
3.     background:#fefefe;   
4.     border:1px solid #474747;   
5.     padding:20px;   
6.     position:relative;   
7.     width: 120%;   
8.     left:20px;   
9.   } 
   

So what does this do? Notice the selector: we are targeting every element directly inside the body of our object; when styling an object, you always apply the class to the object itself. This CSS will "pop" the content out to the right.

"HEY, you set a width! What about separating struture from skin?" I set a width because we are targeting the elements inside the body of our object; since the object has padding, that inner element is a bit narrow by itself. That sounds like an excuse for breaking the rule, but I don't think I really broke the rule: I set the width as a percentage, which still depends on structure styling further up the cascade.

Here's what that looks like.

I just told you that you should always apply classes to the top-level objects, and use child selectors to mold the inner elements. But part of object-oriented CSS is being able to mix and match styles easily. It's quite possible you'll want to use a similar header on two objects that aren't really related in any way. It's ideal to have a collection of header and footer classes that you apply directly to the header or footer of an object. This way, you aren't adding similar code to multiple non-related classes, but abstracting that away and applying it in the relevent place. Let's create an abstracted header.

You'll notice that we gave the header of our recent comments object a class called 'post-it.' Let's create that class now.

1. .post-it   
2.   { border:1px solid #db5500;   
3.     padding: 10px;   
4.     font-style:italic;   
5.     position:relative;   
6.     background:#f2965c;   
7.     color:#333;  
8.     transform:rotate(356deg);  
9.     -moz-transform:rotate(356deg);  
10.     -webkit-transform:rotate(356deg);  
11.     z-index:10;   
12.     top:10px;   
13.     box-shadow:1px 1px 0px #333;   
14.     -moz-box-shadow:1px 1px 0px #333;   
15.     -webkit-box-shadow:1px 1px 0px #333;   
16.   } 
    

It's important to stress that even though we plan to use this for a header, we haven't specified that in the selector. If this resembles a common design aspect of our site, we may end up wanting this style for something else; for example, we could extend it with classes that adjust the colour and rotation, and use them on a wall or bulliten board or something similar.

Often you'll want to take it further than just header and footer classes; a component library is a huge part of object-oriented CSS; a basic rule might be this: whenever you want to apply the same style in multiple un-related places, abstract. Of course, you might find after hard coding something into an object that it would be more useful if you could use it elsewhere; don't be afraid to refactor. It's always to your benefit.

You'll see these components in the page header and the recent comments box.

1. .meta   
2.   { font-size:75%;   
3.     font-style:italic;   
4.   }  
5. .subtitle   
6.   { text-transform:uppercase;   
7.     font-size:90%;   
8.     font-weight:bold;   
9.     letter-spacing:1px;   
10.     text-shadow:1px 1px 0 #fff;   
11.   } 
    

Well, we're done with our index page; let's look at a bit more object-oriented-ness on a single post page. Just copy that index page, rename it 'post.htm' and swap out the page header and section for this code.

1. <header>  
2.   <h1>Object Oriented CSS</h1>  
3.   <p class="subtitle">(really just a bunch of best practices and patterns; not a new language)</p>  
4.   <nav>  
5.     <ul>  
6.        <li><a href="index.htm">Home</a></li>  
7.        <li><a href="#" class="selected">Archives</a></li>  
8.        <li><a href="#">About</a></li>  
9.        <li><a href="#">Contact Us</a></li>  
10.     </ul>  
11.   </nav>  
12. </header>  
13. <section>  
14.   <article class="post">  
15.     <header>  
16.       <span class="date">September 10, 2009</span>  
17.       <h2>Check out WorkAwesome!</h2>  
18.     </header>  
19.     <section>  
20.       <img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />  
21.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,  
22.       ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis  
23.       diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar  
24.       tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus  
25.       imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>  
26.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,  
27.       ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis  
28.       diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar  
29.       tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus  
30.       imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>  
31.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,  
32.       ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis  
33.       diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar  
34.       tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus  
35.       imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>  
36.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,  
37.       ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis  
38.       diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar  
39.       tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus  
40.       imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>  
41.     </section>  
42.     <footer>  
43.       <ul>  
44.         <li><a href="#">Digg!</a></li>  
45.         <li><a href="#">Share!</a></li>  
46.         <li><a href="#">Like!</a></li>  
47.       </ul>  
48.     </footer>  
49.   </article>  
50.   <article class="comments">  
51.     <header><h2>Comments</h2></header>  
52.     <section>  
53.       <article class="comment">  
54.         <header><p>First-commenter</p><p class="meta">Sept 10</p></header>  
55.         <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,</p></section>  
56.       </article>  
57.       <article class="reply comment">  
58.             <header><p>Reply-commenter</p><p class="meta">Sept 12</p></header>  
59.             <section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>  
60.           </article>  
61.       <article class="comment">  
62.         <header><p>Second-commenter</p><p class="meta">Sept 10</p></header>  
63.         <section><p>tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus </p></section>  
64.       </article>  
65.       <article class="author comment">  
66.         <header><p>The author</p><p class="meta">Sept 11</p></header>  
67.         <section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>  
68.       </article>  
69.       <article class="comment">  
70.         <header><p>Fourth-commenter</p><p class="meta">Sept 12</p></header>  
71.         <section><p>imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi</p></section>  
72.       </article>  
73.     </section> 
    

Now we can see where some reusability comes in; we can use the post class for the blog posting here; that's the same post class we used for the home page; because we didn't specify the structure, but let the object expand to take in whatever we give it, it can handle the whole post.

Now let's turn our attention to the comments on this page; comments are a great place to use object-oriented CSS. We'll start by adding this:

1. .comment   
2.   { border:1px solid #ccc;   
3.     border-radius:7px;   
4.     -moz-border-radius:7px;   
5.     -webkit-border-radius:7px;   
6.     padding:10px;   
7.     margin:0 0 10px 0;  
8.   }  
9.     .comment > header > p   
10.       { font-weight:bold;    
11.         display:inline;   
12.         margin:0 10px 20px 0;   
13.       } 
    

This alone gives us some psuedo-attractive comments; but we can do more. Our HTML has classes for replies and author comments.

1.     
2. .reply.comment   
3.   { margin-left:80px;   
4.   }  
5. .author.comment   
6.   { color:#ececec;   
7.     background:#474747;   
8.   } 
   

Make sure you don't have a space between the two class names. This is a bit different from what we did earlier: instead of changing the styling of the comment class, we are actually extending it (So maybe these are the real extended classes).

And the finished comments . . .

And while we're here, let's add a comment form to our component library.

1. .comments-form p   
2.   { padding:5px;   
3.     border-radius:5px;    
4.     -moz-border-radius:5px;    
5.     -webkit-border-radius:5px;   
6.   }  
7. .comments-form p:hover   
8.   { background:#ececec;    
9.   }  
10. .comments-form label   
11.   { display:inline-block;   
12.     width:70px;   
13.     vertical-align:top; }  
14. .comments-form label:after   
15.   { content: " : ";   
16.   }  
17. .comments-form input[type=text],  
18. .comments-form button,  
19. .comments-form textarea   
20.   { width:200px;   
21.     border:1px solid #ccc;   
22.     border-radius:5px;   
23.     -moz-border-radius:5px;   
24.     -webkit-border-radius:5px;   
25.     padding:2px;   
26.   }  
27. .comments-form button[type=submit]   
28.   { margin-left:70px;   
29.   } 
    

This gives us a nice rounded-corner form with a soft hover effect.

I'm kind of torn here; a fundamental concept of object-oriented CSS is the ability to add a class to different elements; but what about this case? This class would basically be useless on anything but a form; should we change the selectors to form.comments-form as a kind of security? What do you think?

Well, that really covers the ideas of object-oriented CSS.

Review the Main Steps

1. Determine your object.
2. Set your reset, base elements, and base object styles.
3. Apply classes to objects and components for the desired look and feel.

I didn't use the standard message example, but it's really a great way to get into object-oriented CSS. Try creating an message class that you can apply to different elements, like a paragraph, a list item, or a complete object. Then, extend it with error, warning, and info classes. See how flexible and reuseable you can make it.

Is Object-Oriented CSS Always Useful?

I don't think the answer to this question is a simple "yes" or "no"; that's probably because object-oriented CSS isn't a language, but a collection of patterns and best practices. You may not always want to apply the idea of the standard HTML object, but most of the CSS principles are always valid. If you think about it, you'll see it's really about where you want to optimize: you could code you're HTML minimalistically, with a few ids for handles, and be able to style it easily; but the CSS won't be reusable, and the site might break later when you come to change things. Or you could write a bit more HTML and optimze the CSS with the principles we've looked at in this tutorial.

I'm willing to expand my HTML a bit so that I can write CSS that is reusable, flexible, and DRY. What's your opinion?