Object-Oriented CSS: What, How, and Why
It sounds like an oxymoron, or at least an impossibility, doesn’t it? How can a static language that’s really more like markup than programming be object-oriented? In this tutorial, I’m going to introduce you to the idea of object-oriented CSS, show you how it works, and try to convince you that you should be using it too!
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 programming (OOP) is a programming paradigm that uses “objects” — data structures consisting of datafields and methods — and their interactions to design applications and computer programs.
If we were to re-write that definition for object-oriented CSS, it might say something like this:
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.
Confused? Let’s look a bit of theory.
What is the Theory Behind it?
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.
I quote Nicole Sullivan, whose brainchild object-oriented CSS is. So how do these two principles play themselves out?
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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Object Oriented CSS</title>
<!--[if IE]><script src="http://nettuts.s3.amazonaws.com/450_ooCss/http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- This makes IE recognize and use the HTML5 elements -->
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/text.css" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<article id="container">
<header>
<h1>Object Oriented CSS</h1>
<h2 class="subtitle">(really just a bunch of best practices and patterns; not a new language)</h2>
<nav>
<ul>
<li><a href="index.htm" class="selected">Home</a></li>
<li><a href="=post.htm">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<article class="post">
<header>
<span class="date">September 10, 2009</span>
<h2><a href="post.htm">Check out WorkAwesome!</a></h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
<article class="post ext">
<header>
<span class="date">September 7, 2009</span>
<h2>The Intro Post</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
<article class="post">
<header>
<span class="date">September 5, 2009</span>
<h2>Welcome</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
</section>
<aside>
<article class="side-box">
<header>
<h3>Archives</h3>
<p>look into the past</p>
</header>
<section>
<ul>
<li><a href="#">August 2009</a></li>
<li><a href="#">July 2009</a></li>
<li><a href="#">June 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#"> . . . </a></li>
</ul>
</section>
</article>
<article class="pop-out side-box">
<header class="post-it">
<h3>Recent Comments</h3>
<p>see what folks are saying</p>
</header>
<section>
<ul>
<li>
<p>I think oocss is really cool!</p>
<p class="meta">By J. Garret on Sept 12, about "The Intro Post"</p>
</li>
<li>
<p>Are you kidding? CSS can't ever be Object Oriented.</p>
<p class="meta">By Joe Thomas on Sept 11, about "The Intro Post"</p>
</li>
<li>
<p>Envato has done it again; workAwesome is simply awesome!</p>
<p class="meta">By GV on Sept 10, about "Check out WorkAwesome"</p>
</li>
<li>
<p>I really like the site's desing; another work of art from Collis.</p>
<p class="meta">By Anonymous on Sept 10, about "Check out WorkAwesome"</p>
</li>
</ul>
</section>
</article>
</aside>
<footer>
<ul>
<li>Standard</li>
<li>Footer</li>
<li>Information</li>
<li>Yada</li>
<li>Yada</li>
<li>© 2009</li>
</ul>
</footer>
</article>
</body>
</html>
I know it’s kind of long, so here’s a diagram of our basic structure:
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:
body { font: 13px/1.6 Helvetica, Arial, FreeSans, sans-serif;}
h1, h2, h3, h4, h5, h6 { color:#333; }
h1 { font-size: 50px; text-shadow:1px 1px 0 #fff; font-family:arial black, arial}
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }
p, h1, h2, h3, h4, h5, h6, ul { margin-bottom: 20px; }
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
(Hats off to the 960 Grid System, whose text.css file this is spun off.)
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.
body
{ background:url(../img/grad.jpg) repeat-x #c0c0c0;
}
/*Note: All the image will be in the downloadable source code. */
a
{ text-decoration:none;
color:#474747;
padding:1px;
}
a:hover
{ background:#db5500;
color:#fff;
}
.selected
{ border-bottom:1px solid #db5500;
}
li
{ padding-left:15px;
background:url(../img/bullet.png) 0 5.9px no-repeat;
}
Our first order of business is to define the structure of the page:
#container
{ margin:40px auto;
width:960px;
border:1px solid #ccc;
background:#ececec;
}
#container > header, #container > footer
{ padding:80px 80px 80px;
width:800px;
overflow:hidden;
border: 1px solid #ccc;
border-width:1px 0 1px 0;
}
#container > header
{ background:url(../img/header.jpg) repeat-x #d9d9d7;
}
#container > header li, #container > footer li
{ float:left;
padding:0 5px 0 0;
background:none;
}
#container > section
{ background:#fdfdfd;
padding:0 40px 40px 80px;
float:left;
width:493px;
border-right:1px solid #ccc;
}
#container > aside
{ padding-top:20px;
float:left;
width:346px;
}
#container > footer
{ padding:40px 80px 80px;
background:#fcfcfc;
}
#container > footer li:after
{ content:" |"
}
#container > footer li:last-child:after
{ content:""
}
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:
.post
{ overflow:visible;
margin-top:40px;
}
.post > header
{ margin:0 0 20px 0;
position:relative;
}
.post .date
{ padding:2px 4px ;
background:#474747;
color:#ececec;
font-weight:bold;
transform:rotate(270deg);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
position:absolute;
top:60px;
left:-105.5px;
}
.post img
{ float:left;
margin-right:10px;
}
.post.ext img
{ float:right;
margin:0 0 0 10px;
}
.post footer
{ overflow:hidden;
}
.post footer li
{ float:left;
background:none;
}
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:
.side-box
{ padding: 20px 80px 20px 40px;
}
.side-box:not(:last-child)
{ border-bottom:1px solid #ccc;
}
.side-box > header h3
{ margin-bottom:0;
}
.side-box > header p
{ text-transform:uppercase;
font-style:italic;
font-size:90%;
}
Again, you should take note that we’re being careful to follow the two rules: we’ve separated the structure from the skin by not setting the height or width; the object flows to fill whatever space it needs to take. And we’ve separated container from content by not making child elements required for proper styling. Yes, I have adjusted the h3 styling, which makes that particular h3 look dependant on the class side-box; in most cases, that’s undesireable, but in this case, I haven’t done too much.
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.
.pop-out > section > *
{ display:block;
background:#fefefe;
border:1px solid #474747;
padding:20px;
position:relative;
width: 120%;
left:20px;
}
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.
.post-it
{ border:1px solid #db5500;
padding: 10px;
font-style:italic;
position:relative;
background:#f2965c;
color:#333;
transform:rotate(356deg);
-moz-transform:rotate(356deg);
-webkit-transform:rotate(356deg);
z-index:10;
top:10px;
box-shadow:1px 1px 0px #333;
-moz-box-shadow:1px 1px 0px #333;
-webkit-box-shadow:1px 1px 0px #333;
}
A poor semblance of a post-it note!
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.
Don’t lock down your selectors; you never know when you’ll want those styles!
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.
.meta
{ font-size:75%;
font-style:italic;
}
.subtitle
{ text-transform:uppercase;
font-size:90%;
font-weight:bold;
letter-spacing:1px;
text-shadow:1px 1px 0 #fff;
}
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.
<header>
<h1>Object Oriented CSS</h1>
<p class="subtitle">(really just a bunch of best practices and patterns; not a new language)</p>
<nav>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="#" class="selected">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<article class="post">
<header>
<span class="date">September 10, 2009</span>
<h2>Check out WorkAwesome!</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Digg!</a></li>
<li><a href="#">Share!</a></li>
<li><a href="#">Like!</a></li>
</ul>
</footer>
</article>
<article class="comments">
<header><h2>Comments</h2></header>
<section>
<article class="comment">
<header><p>First-commenter</p><p class="meta">Sept 10</p></header>
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,</p></section>
</article>
<article class="reply comment">
<header><p>Reply-commenter</p><p class="meta">Sept 12</p></header>
<section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
</article>
<article class="comment">
<header><p>Second-commenter</p><p class="meta">Sept 10</p></header>
<section><p>tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus </p></section>
</article>
<article class="author comment">
<header><p>The author</p><p class="meta">Sept 11</p></header>
<section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
</article>
<article class="comment">
<header><p>Fourth-commenter</p><p class="meta">Sept 12</p></header>
<section><p>imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi</p></section>
</article>
</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.
\
Comments
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:
.comment
{ border:1px solid #ccc;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:10px;
margin:0 0 10px 0;
}
.comment > header > p
{ font-weight:bold;
display:inline;
margin:0 10px 20px 0;
}
This alone gives us some psuedo-attractive comments; but we can do more. Our HTML has classes for replies and author comments.
.reply.comment
{ margin-left:80px;
}
.author.comment
{ color:#ececec;
background:#474747;
}
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.
.comments-form p
{ padding:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.comments-form p:hover
{ background:#ececec;
}
.comments-form label
{ display:inline-block;
width:70px;
vertical-align:top; }
.comments-form label:after
{ content: " : ";
}
.comments-form input[type=text],
.comments-form button,
.comments-form textarea
{ width:200px;
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:2px;
}
.comments-form button[type=submit]
{ margin-left:70px;
}
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
- Determine your object.
- Set your reset, base elements, and base object styles.
- 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?
Other Resources
- Nicole Sullivan’s Blog Post on OOCSS
- Sullivan’s OOCSS framework on Github
- And her presentation on OOCSS
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Andrew Burgess
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
danmoore - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
To be honest, what’s up with all these “OOCSS” ? I appreciate and thank you for writing this well-written tutorial! But to be straight forward, you can not call a well written CSS for OOP. It’s just well written, if you do alot PHP programming and it’s just well written but you haven’t jumped into OOP yet, it’s still NOT OOP.
The only thing I can think of is if you used PHP with CSS and used variables to store colors and often used declerations you could call it.. not OOP. There will never be a Object Oriented Stylesheet, it’s the way it is…
Lets see here where do I start? Well it was a well written article. Very informative and just all around great. It informs people about the > selector albeit in a long way.
But this is not Object Oriented. Like so many people before me said this is extremely confusing to newcomers and just make pros frustrated. When I first clicked on this article I was expecting some cool new CSS stuff that would really speed up development and I got extremely excited. Only to have my excitement deflated.
Also why HTML5 and CSS3? Two very incomplete specs. I don’t find any reason to use them now and break compatibility with older browsers. Its great to know what they can do but when demonstrating a practical ability it just doesn’t help.
Anyways I’ll pass, this technique isn’t much use to me.
I agree, he should of left out CSS3/HTML5. One thing at a time.
Contentious approach to CSS, but useful as a spur to reflecting on what actually drives my own approach. Many thanks for the post …
First off: this is a really well written article on the topic of OOCSS.
It’s sad to see so many developers stuck in their ways. The way they were taught/learned css is the one and true way. Obviously the article, nor Nicole’s documentation on OOCSS, are stating that CSS is actually Object Oriented. I really have to wonder if a lot of you that wrote negative comments bothered to read the whole article or researched it further by checking out the actual source: http://wiki.github.com/stubbornella/oocss.
Just as with any subject, certain people comprehend it in a variety of manners. Learning multiplication for one kid won’t work for another. When you think about it like that, OOCSS is great for developers who are learning CSS. They understand the basics of Object-Oriented design.
- Objects have properties (css properties: background, color, width, height)
- Objects can be extended with subclasses (the cascading in css)
When you think about it in that way your HTML module would be the Object with various properties that define it in your CSS. You can now have a base .box object with common properties for all .boxes on your site and extend that further with something like .box.galleryImage with any additional properties, or overwrite existing properties if need be. I feel that’s the real “gotcha” and “ah-ha!” factor to OOCSS that may be lost on people just getting started.
With that said, OOCSS isn’t appropriate in all projects, and that’s true for ALL technology. Whether it be HTML5, CSS3, php vs ruby. It’s all subjective/relative. Whatever helps you get your project done faster, and more efficiently in the given situation. I’m tired of comments from zealots who blindly follow the opinion of Andy Clarke and other such figures in the community, and never ask “why”. I don’t mean to talk smack on Andy, or others, because I love their work, but development isn’t black or white.
I did have a few issues with the article however. The biggest one would be using HTML5 and CSS3 to explain a concept people are already going to have a hard time swallowing. Other than that, great work!
Exactly!
This is not about developers being stuck in their ways. I actually think the author makes a good point in structuring your CSS for reuse. This is about developers complaining about the complete misuse of the term OO.
I think you are missing the point of all the people saying this is not OO. OOCS is never appropriate because OOCS does not exist. There is no such things as OOCS, at the most there is structured CSS but since CSS already stands for CASCADING stylesheets, the term “structured” is also useless.
To explain it once more why this is not OO in any way: OO is a term coming from programming languages. Before OO there was functional programming, which meant passing data structures into functions. Data and methods were strictly seperated. OO changed that, OO in a nutshell is combining data and methods into objects. Plus, there are additional principles, such as multiplication, inheritance, associations, encapsulations, abstraction and polymorphism.
All of those things combined are called OO, and it is a strong term established since the 70s. You cannot just call everything OO. What the author showed in his article is structured CSS, not even remotely anything OO.
Obviously no one here is saying that OOCSS is ACTUALLY Object Oriented. In this instance it’s a clever way of getting people to think about how they organize their CSS in a different way from the norm.
You are wrong in saying that OOCSS doesn’t exist though. Someone developed a well thought out set of rules for working with CSS and decided to label them with what she thought made the most sense, and if you take the time to dig in to her theory you can’t argue why she thought OOCSS was appropriate.
Now whether or not it’s the best label is debatable. I happen to think it’s very clever and I have no problems objectively seeing the parallels between her Object Oriented CSS concepts and the actual Object Oriented design philosophies.
In the end it doesn’t matter what this is called (I agree with you there), but the fact that you can’t step back and actually admire what is trying to be accomplished with OOCSS is what bugs.
I can call a car what ever the hell I want to, no one is going to stop me, and it will still get me from point a to point b just fine.
OK, this will be my last comment. So you are saying that the main reason this isn’t OOCSS. Is simply because OOCSS doesn’t exist.
Like you said OOP had a beginning, and before it there was functional programming. It was forward thinking then that gave way to OOP, and eventually complete OO programming languages.
Right now OOCSS is a theory, one that if you open your mind should show you how in certain use cases can offer some benefits. Benifits like maintainability and scalability (the same key benefits that OOP gave us). If you do some reading on Nicole, she actually proposes some changes that she would like to see that would help us grasp this (like inheritance, abstractions,etc.) But for now she makes do with what she has.
even if the markup looks like the same old css, really take a look at how it is structured. It is different most css seems to be structured into regions like reset, header, sidebar, footer. But OOCSS would have a structure like lists, box’s, modules, containers.
Both could be well formed, and professionally written. Neither one is necessarily right or wrong. But the process is definitely different.
Object Oriented is a philosophy, the languages used today in OOP would not have existed if no one embraced that philosophy first. It is about invention and progress. Simple as that.
If you simply don’t see this methodology as viable or providing benefit, than fine I can at least respect that argument. But to say this tutorial is no good, or useless, or a waste of time to have posted is simply silly.
If we never stepped back to rethink things and challenge the current way of doing things there would never be any progress. And that would make life boring.
Fine, I’ll give up. You can indeed call a car whatever you want. Let’s start calling 16v “8v”, because the philosophy of engine power is the same. Let’s get rid of model and make names too, since it does not matter what you call things. My new name will be Tom, since you can people what you like.
Honestly, I don’t see nothing new or brilliant here… only the way you call the technique, “CSS OOP” instead of a standard or a intelligent CSS workflow (it’s something we all now already exists and most of the competent developers take advantage).
No doubt it’s well written, and I like the HTML5 and CSS3, sometimes I get a bored of old XHTML/CSS + Jquery projects… would love to see more tutorials pointing to this direction :]
A beg to differ on this being OO, all you’ve done is masking.
There is nothing ‘object oriented’ at all through this so called tutorial, it’s well written I’ll give you that, but it teaches you absolutely nothing.
If you had a professional job as a web developer you would get laughed at.
:] I agree! but was trying to be more polite… masking is the perfect term!
+1
The fact that tuts+ has allowed this article to be published with a title such as “Object-Oriented CSS” is a shame.
It shows that there is almost no QA on anything posted here.
“Object-Oriented CSS” is not possible. CSS is not a programming language like C++. CSS is a language used solely for layouts and styling. There are no data structures, algorithms, and functions, which exist in programming languages like C++.
Object-Oriented programming ONLY applies to actual programming languages like C++.
Additionally, HTML5 is not widely supported, and the spec is still open right now. In the many years it will be in development, it can be modified and changed to something far different from what it is now.
There is no reason to be using HTML5 on sites that need cross-browser compatibility. Even IE8 is just getting around to implementing CSS2 properly. The way this is presented won’t even work in IE6 without using Javascript to fix it. As much as we all hate IE6, it is still around, and some people have no choice due to companies that will continue to use it for the time being.
It’s great to learn about new technologies, but I come to tuts+ to learn about technologies I can use now. In professional work, and all web work in general, we should be using technologies that are widely supported.
If tuts+ goes all HTML5/CSS3, I will no longer have a reason to visit. You are devaluing your tutorials and misleading readers into thinking that the use of HTML5 and CSS3 is a good idea at this point in time.
Nettuts+ is here to provide tutorials so that web developers can improve their work or learn about how to do something, thus the *tutorials*. There’s no reason to teach me how to do something that should not be done yet.
What’s next? An article about how to use tables for layouts? How about something useful instead.
I agree. +1
I completely agree with Brandon, this is not a good tutorial for any web developer at this point in time. Sure, it’s nice and fancy, but it’s not helpful in the current internet environment.
Nobody should even be considering starting to code in HTML 5 and CSS3, and it annoys me that anyone thinks it’s acceptable to do so. It isn’t. You aren’t a good developer if you do. A good developer takes into account all browser capabilities, and currently HTML 5 and CSS3 aren’t supported by many of them.
Maybe if this tutorial was posted in a years time, we could appreciate it, but right now it is utterly useless. You aren’t teaching new developers ANYTHING useful in this tutorial.
If anything I think there needs to be a QA on some of these comments. I don’t mean any disrespect, but it feels as though some of you aren’t even reading the article (as I’ve mentioned already). OOCSS is an actual documented technique. This isn’t something that Andrew made up and posted to Nettuts. He was writing about and building upon Nicole Sullivan’s (who IS definitely a professional developer working for Yahoo http://www.stubbornella.org/resume/index.html) brainchild/experiment which has recently been gaining a lot of buzz in the community; basically something worth writing about. You can’t blame Nettuts for posting this with OOCSS in the title because that is in fact what the article is about! They would be “masking” the subject by titling the article anything else.
Please, please, please don’t read the title, jump to conclusions and post a comment about what Object Oriented programming really is. That’s what about 80% of the previous comments are saying already. I’m all down for informing people what Object Oriented programming is all about, but to try and invalidate this technique and article is just plain trolling.
Many of the comments are not implying that the author invented the technique or the nomenclature used to represent the technique.
However, no matter who coined the term, it is inaccurate. It is superimposing a method of programming onto CSS, that is not really applicable to a language like CSS.
I read the entire article, and I did not make assumptions. However, having programmed many times before and taken professional classes in relation to programming, “Object Oriented CSS” is a misnomer, no matter how you take it.
1) If it was called something else, there wouldn’t be an issue. I agree that it is just semantics, but semantics can be powerful.
2) It is simply another method of structuring CSS, and should not be hailed as the holy grail of CSS coding, like it is some angelic structure.
If the article was titled “A great way to structure your CSS”, I think it would make more sense, and wouldn’t lend itself to the failure of a name that OOCSS is.
Funny to think that the inventor of OOCSS was unprofessional enough to label it as such. Proof that no matter who you are, no matter what your credentials are, you still have an enormous propensity to be ignorant in a way that affects many people.
Don’t take me wrong, however. I am not attempting to invalidate the article or technique used, only the name it has been given, and what the name improperly implies.
The technique is great and can prove to be quite useful. However, that was not the subject of my gripe, nor does it have to be.
It’s great that all these options are available for people who want to code this way, but I’m getting a little tired of being told to OOP everything. There is a job for all tools, and a tool for every job and OOP isn’t the answer every time.
Not to say anything about the majority of the article itself, which explains the concept and practice well.
Wow, that’s a long thread of discussion you got there… very informative with a lot of inputs and opinions from different readers from different backgrounds and practices… good post.
FOR THE LOVE OF GOD!!!
He never, ever ever even wrote the word OOP!
I just had to get that of my chest. No offence. It just bothered me that people accused him for saying it when he didn’t. He did say Object-Oriented thou, but I think it’s well explained.
Yes I have now read all the comments here (yes I should really find something better to do now! ;P )
I have too say that I agree with Jeff and Derek. The whole discussion here made me understand the topic more (even thou I wanted to rip my head off on the sight of some of the comments.) so thanks everyone for participating!
Go Jeff and Derek!
It’s not Object Oriented, it’s Element Oriented at the most.
Yeah great tut. Can’t wait for HTML5 / CSS 3, it’ll make many things much more logic and easier.
fail
Nice Tut!
Good article, something to think about anyway even if I can’t directly use some of the method right now.
It should be called “Object-based CSS”. “Object-oriented” is simply wrong.
Idea is good but but but but not work in IE
Hi, there is “another” object-oriented CSS, on http://dewem.com. There is a “meccano” there, which make a tag as object with CSS style attribute that as xml web-based saved on Server-side. And so you can make even a whole page with it – as is as you make a page with many tags-objects… I understand it so, that Html and Css were automated there. See it yourself…
I like the concept of best practice in code re-use, once understood. However, the code doesn’t validate;
# .post.ext img
# { float:rightright;
# margin:0 0 0 10px;
# }
At first I thought this was a new hack, but then hacks aren’t clever. Thought-provoking article, nontheless.
The comment about Nicole would have you create a class .postExt is a very valid point. While I agree that ideally you would want two re-usable classes to chain “.post.ext” you are going to run into problems in IE6 because it doesn’t support multiple class selectors. IE6 will apply the styles for .post but ignore .ext.
You could get more specific, but then you start to kill re-usability. So for my money .postExt makes a lot of sense; for the next few years at least.
Who claimed it was object oriented *programming*? The way I understand it, OOCSS defines visual objects so saying it’s object oriented (layout) is surely valid? Plus it’s only a name, who cares?