Object-Oriented CSS: What, How, and Why
Tutorial Details
- Topic: CSS
- Difficulty: Intermediate
- Estimated Completion Time: 30 minutes
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://d2o0t5hpnwv4c1.cloudfront.net/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://d2o0t5hpnwv4c1.cloudfront.net/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://d2o0t5hpnwv4c1.cloudfront.net/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://d2o0t5hpnwv4c1.cloudfront.net/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>
<h2>Archives</h2>
<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">
<h2>Recent Comments</h2>
<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://d2o0t5hpnwv4c1.cloudfront.net/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
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Andrew Burgess
Join our newsletter!
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
Whoo first comment! LOL.
Down to business this is a really well written tutorial, I wish there more like this. I know it’s more of a tutorial site but articles like this really help newcomers and age-old CSS experts alike to re-evaluate things rather than “thats the way it always works”.
I actaully think I do this without thinking abuot it, though my problem is not divisis, is making too many classes for things I change my mind about but leave in the CSS – PET PEEVE lol
I do the exact same thing. And then spend a day trying to clear up and redefine elements in a page at the end of the project (or worse, half way through). Kind of a nightmare that i create for myself too often.
I think I wouldve liked it more if you didnt use HTML5/CCS3 so that the tutorial would actually be crossbrowser friendly. I think there are way too many CSS3 tutorials on Nettuts, and everytime I read one I’m annoyed because I can’t use it yet.
Thanks for this tutorial though, the Object-Oriented CSS part was interesting, and that’s what it’s about.
I totally agree!
Stop css3/html5 for a while
It’s a good thing netplus is giving attention to css3/html5, even if you can’t widely use it yet. If early adaptors don’t start using css3/html5, it will take a lot longer to standardize the new technique.
I like to learn new techniques and to learn it before I can use it is even better its time off my learning curve so be happy with nettuts giving us a head start.
But its a great article
Why not write more and more about CSS3 and HTML5 and use them more and more and push out the old outdated browsers. Why is that people can put tons of money on new gadgets but can’t update their browsers for free?
Why to stop this?
If CSS3, HTML5 and other developments aren’t promoted in these tutorials and articles, where then?
This is a nice “someday” article because, until I have clients who don’t have a significant user base using IE6, the code is not reusable. The principles of using flexible CSS are great, but when you demonstrate it by jumping right into CSS3 and HTML5 to demonstrate its usefulness, it’s almost counter-productive for those of us who have to code in real-world production environments.
The child selector (>) isn’t even supported by IE6, and while I’d love to download an upgrade for each person I see using it, it’s not going to happen for a few years. Especially for those business-to-business client sites that are trapped behind firewalls.
Jquery solves the child selector issue
Negative,
With people buying computers with vista and 7, those platforms will have new versions of explorer which can do html 5 and css3.
People using IE 6 need to be punished with bad layouts and funny looking screens so that they know to upgrade, considering that if they care about their business, and their security, they should have already updated their browser.
So Jafar, I can tell you don’t design websites.
One IE6 users should not be punished, they should be gently nudged we don’t to be scaring off potential customers for either us or our clients.
Two, vista and 7 come with ie7 and ie8 respectively, and those two browser are no where near HTML 5 or CSS3. IE8 just now barely by the skin of its teeth supports CSS 2.1.
And I have to tell you I am really sick and tired of all the hype HTML5 and CSS3 are getting on the web these days. They are no where close to prime-time yet everyone is trying to implement them. I will be sticking with what works. They only CSS3 attribute I would love to use is border-radius.
IE6 doesn’t support multiple class selectors either (.reply.comment), and I personally wouldn’t use Javascript to hack for IE6 when it can be done in the css
too soon … too soon
Great tut as always!
Why images in the article can’t be seen ,I am in China….
because of your government? ^^
that’s not nice to say.
Ha ha. It was sort of funny and could actually hold some truth.
If the article has not been re-edited,It may be your browser problems.I am in china too.
I agree with almost all of the above comments. It is a very well written article, I think I do this naturally without thinking about it, and it would be better if it wasn’t HTML5/CSS3. Oh, and China…let’s not go there.
I don’t agree with the multiple stylesheets, as a single well commented stylesheet would do the trick and reduce http requests.
Secondly, “It’s a good thing netplus is giving attention to css3/html5, even if you can’t widely use it yet. If early adaptors don’t start using css3/html5, it will take a lot longer to standardize the new technique.”
That’s pretty silly. Nettuts seems to have a pretty decent following and I’d hate to see that fall off because you guys are trying to push a standard, that by most accounts, won’t be ready and fully functional for 11-13 more years. You’re not harboring love and acceptance for a new technique, you’re alienating your base and trying to make them assimilate to your way of thinking.
Have you ever met any developers? They’re all very well known for doing what other people tell them to do and accepting someone else’s “technique”. :)
Still love NetTuts, and your entire network…but give serious thought to your motives, or you’re no better than adai’s government and you’ll lose your people. Long live xhtml! :P
>I don’t agree with the multiple stylesheets, as a single well
>commented stylesheet would do the trick and reduce http requests.
It is a loss that optimizations like the httprequests are looked at from a development perspective and not from a deployment perspective.
A attitude more frontend developers should have is to optimize and compile before bringing websites to a public server. So in development time you can easily maintain multiple stylesheets, and you let your deployment compress then, combine them and cache-bust them. Having a good (automated using ant/maven/phing) deployment strategy is a create once, re-use always methodology that offers you the performance upgrades you need, while allowing you to develop as freely as you where used to.
Wow…this is excellent. Interesting to see how HTML5 is going to change the way sites are coded. Wonder when you will start seeing more of it.
Ryan
I don’t buy it. This CSS just looks it’s been written well by an experienced front end developer, no need to define it as OOCSS (Object-Oriented CSS), it’s just well written CSS and markup.
By your definition, do you mean ” .comment > header > p ” is an example of OOCSS?
Because I’ve been using CSS like ” #footer p { … } ” since I learnt CSS, it just looks like you’ve added ” > ” between the elements/classes/id’s to look like ” -> ” used in OOP.
/cynical rant over
See this link- http://webdesign.about.com/cs/css/qt/tipcsschild.htm
You’re right; it’s just well-written CSS! The reason it looks like an experienced front-end developer’s coding is because it’s “forward-thinking.” Usually, it takes years to see the benefit of writing your CSS classes in an extensible, fluid, and reusable way. OOCSS is nothing more than a label for best practices. It crystallizes what experts used to have to learn the hard way so that newbies can write excellent code from the beginning.
By my definition, “.comment > header > p” is an example of an OOCSS selector. To say it in a OOP way, you make an object of type ‘comment’; then, everything within it gets styled.
The >s are only there so that you style only the immediate children; I’ve only put them in to avoid problems with nested objects. But you’re right; it *does* look more OO that way! Also (and I could be wrong here), I think using > may speed up your CSS marginally, because you aren’t going as deep.
And, by using >, we get the added benefit of not being compatible with IE6!
Absolutely Agree. I too don’t see why you want to call it Object Orianted. Why don’t you call it better CSS design. Sorry but the name “OO CSS” makes no sense.
Of course some CSS’s concepts and structure looks like OO (class definition and property declaration, inhertence in someway) but…come on…stop naming things randomly.
Can you give me an example of “not OO” CSS and explain why it is not?
yeah it does sounds good and make you feel like a pro.
But in the nut-shell. Its just css. Writing in such specific selector way, you loss the reuse ability of some css class.
If you think about deep behind css. Its already very OOP and the language make it so easy to use.
I think this puts a nice spin on CSS practices. I use several of the CSS3 and welcome any CSS3 and HTML5 tuts that i can get my hands on, especially for the variation of views given on these subjects.
Nicely written and in depth tuts Andrew
If you want to use oocss you should try something that makes more sense. The whole “>” tag hardly makes this oocss. It makes a more friendly way to do nesting, which is NOT the same as Oject Oriented Code.
REAL OOCSS might look like this:
$content->post p{}
You now have an object “content” and you have the children of that object being pointed to.
Anyway, I think it is a decent idea…but it has yet to be executed correctly.
In my opinion the best css is the css that is cross-browser friendly, easy to read, well commented, and easy to modify. Nesting CSS can make it very complicated to read. Remember that most of the time you are going to be working with others who are going to need to be able to work with your coding.
And don’t forget the golden rule: “If it isn’t as simple as it can possibly be…it is wrong.”
Why write tons of complicated code, use parsers, and other advanced methods if they don’t decrease load time, improve readability, or decrease work time?
Forgot to mention one thing. There is NOTHING wrong with making the main containers of your site tags. In fact it is more proper than other elements most of the time.
As long as your html is readable and you code the elements so that they describe what they contain I am sure you will be just fine.
Divitis is using divs for everything: containers, menus and menu elements, images, unnecessary wrapping of elements, etc…
Stop using HTML5 :)
| Stop using HTML5 incorrectly.
FTFY.
Benjamin Reid is exactly right. All you’re doing is embracing the cascading part of CSS. To call it OO is a bit of a stretch here. However it’s still a good tutorial on writing clean CSS (the way it SHOULD).
This is a joke to call this Object Oriented. Your doing nothing more then writing basic CSS to a structure theory.
Agreed.
I think that it is just an irresistible title and makes you wanna click on it…
First, this is a great tutorial for teaching people how to do CSS properly. Well done.
Second, I hesitate to call this “Object Oriented”. I saw the headline and was expecting something a bit more useful than just teaching CSS newbs to use good practices like extended tree selectors (as opposed to -just- an ID or class) and to indent children.
This is no more object-oriented than I am a professional footballer because I can kick a football.
I thought the same thing, wasn’t sure if anyone else did. I think it was written this way to drive traffic, create hype, and get people to click from Twitter upping ad-clickthru/exposure…etc.
Think they need to vet these articles better, if not for better credibility in the community.
Also, why exactly is
considered divitis? That really bothered me. It’s a container, with 3 containers inside of it. Typical wrapper, header content footer setup. The only difference in HTML 5 are the div tags are now called header footer section etc, nothing fundamentally has changed except the words you type.
Now, had it been
….etc… thats divitis.
Annnnnd markup was stripped out. Anyway, 3 separate divs does not qualify as divitis.
If your coding semantically, then the CSS will follow down the lean clean route anyway, no need to rebrand it as something different. its still CSS. I think Nicole Sullivan must have a lot of free time on her hands so decided to reinvent the wheel.
You know?, at first I thought OO-CSS was something like using libraries, variables, nesting and increasing the stylesheet’s complexity… And I was so wrong xD
I like Nicole Sullivan’s definition about components when she says they are like legos, if you code them well, then you can use them over and over to create new layouts. But in order to make this work, you have to keep in mind some patterns and best practices like you said in the tutorial.
By the other hand if anyone wants to fully understand object oriented concepts, it would be useful to know a few basis about programming. If you only work with html, javascript and (old) css it may be hard for this to make any sense.
Thanks for the extensive explanation, you cleared up some doubts I had :) .
It is good post for new ones. I like it
I don’t see any new “trick” in this technique. Combining classes and optimising stylesheets, yeah what else should you do.
Also CSS is a markup language, like XML and HTML. It is not capable of processing data. It is not an object oriented languaga. You can’t change that and can’t define “object oriented CSS” with a Wikipedia definition of “object oriented programming” because CSS != OOP
To this matter php != OOP.
PHP is not at its core an object oriented language. But that dosn’t stop programmers from thinking in an OO way when writing the code.
Wow. I’m suprised at the quallity of posts here.
Just to add my 2 cents in, I’m finding this technique (particularly for me) useless. I think sitting down and focusing on what you are styling will go farther than using an OOP style approach.
You gotta remember, style sheets exist to make changes to a sites apperance easier. This may be forcing CSS a step back…but then again, that’s just how it affects me.
Thanks for all the comments, guys! I’m glad the article is stirring things up a bit and making us step back and think about CSS more “objectively.” :)
I understand where you’re coming from if you don’t think this is object oriented; it certainly isn’t object oriented in the way a language like PHP is. I would argue that this approach to CSS is oriented around objects: HTML structures, in this case.
I totally agree that OOCSS (and its HTML implications) aren’t for every site, and certainly not for every developer. However, my opinion is that it can give you peace of mind, let you do more with less CSS, and overall help you write better code. If nothing else, it makes you think twice before you type.
Object Oriented CSS is a misnomer, pure and simple, and will only serve to confuse beginners and annoy more experienced developers.
+1
Blind leading the blind, here.
Two issues: I don’t like the way you define “object” here–you’re basically redefining an HTML5 section (no, not the section element). Where do you get object from this? It seems you’ve just made this up.
Secondly, have you taken the time to read the HTML5 spec? The way you are using the article element is just plain wrong in many places, i.e., article id=”container”. :(
Just another Nettuts example where something shiny is published without having been thoroughly inspected.
You have completely misunderstood the definition of “object-oriented:”
You’re making up a new definition of the term “object-oriented” in an attempt to sound smart. At the very least, it’s confusing for people trying to learn CSS.
Now for the good. I think this is something we all should try to do: build simple, reusable stylesheets. Thanks for the reminder.
“I would argue that this approach to CSS is oriented around objects: HTML structures, in this case. ”
That would still not make it an object. A HTML structure is a data structure, not an object, because it has no methods. You can only call something an object when it has both data properties and methods. If you were using the term “object” in a general sense, such as “apple”, you would be right, but since you are specifically calling your CSS object-oriented you are wrong.
Well, I really like to see, that a lot of people “want” to forget the IE6 disaster. But as a Webdeloper for other Agencys and Businesses, I have to tell you, that there is absolut no sense to waste his time with CSS3 and HTML5. IE6 will still be there the next few years and HTML5 will just come in 11-13 Years.
Every Webdeveloper, who works for clients and “intentionally” ignore IE6 as a client base is definitly not working correct.
I really don’t like to say that, but this is unfortnately our “gift” from a lot of faults at the past. And we can’t do nothing against it for the next 10 years.
So.. let’s be happy with what we have and create stunning things with a lot of code ;)
IE6 will still be around, absolutely. HTML5 is here today, though. This 11-13 years business is nonsense.
HTML 5 will come in 13 years LOL. When browsers support it in full, its here, and practically is already.
Ok Mike, I have read some smart comments from you, but this one was just… dumb.
http://ishtml5readyyet.com/ The finally spec is supposed to be done until 2022. It doesn’t matter that browsers support HTML 5 now because it could be something completely different by then. I know at the moment they are debating on wether to include the video tag.
IE6 won’t be around for much longer, I give it anther 2-3 years until its completely phased out.
Microsoft have confirmed that IE6 will be around until 2014, and as someone else stated HTML 5 wont be fully supported until 2022, so really you will just end up with an alternative IE6 if you like a browser that drags its heels supporting HTML 5 until 2022.
So we will be in the same boat as we are now for the next 13 years but just with a different turkey.
I agree with this. Unfortunately IE6 is still a very real problem and if you’re a good enough coder it shouldn’t be a big issue anyway. Just make your CSS cross browser compatible. It really isn’t that hard.
Nice article but I agree, not OOCSS just very smart CSS.
So mad post!! very good! thx!!
This method has practical components and impractical ones as well. For the most part though, it was well written.
most things do not work on internet explorer 6 :(
Try out this folks,
http://remysharp.com/2009/01/07/html5-enabling-script/
This is a completely different interpretation to OOCSS to me. I’ll try and dumb down an example of the way I think about this and I’d like some feedback from you guys. Maybe I’ve missed the OOCSS boat and have a different way of thinking.
So the way I think about CSS is I’ll print out designs for a whole site that I’m about to start work on and I’ll look over each page and find elements across that are going to use the same styles, colours, fonts etc. So for a basic example I’ll say that across the site I’m using the colour: #999; multiple times and border: 1px solid #333; so then I’ll write two classes one could be .lightGray {color: #999;} and the other could be .darkGrayBorder {border:1px solid #333} so then on the element itself I’ll have the two classes so class=”lightGray darkGrayBorder” so essentially darkGrayBorder extends the lightGray class.
Obviously that’s a dumbed down example and on some sites I end up with up to 5 classes on some elements but I’ve found that I’m not repeating myself in my CSS and when I come to elements on the page I can quickly style elements logically and just thinking blah extends blah extends blah etc.
Also here is a nice video on OOCSS if you guys are interested. It’s a talk by Nicole Sullivan who Andrew referred to in this article: http://developer.yahoo.net/blogs/theater/archives/2009/03/website_and_webapp_performance.html
I really hope your style names are just examples…
You do know it’s not a good idea to color name your styles, right? You need to call your styles semantically, like so:
.subtitle
.user
.page-header
Next, you place your style rules in there. If you call your style “.lightgray” what if you later on change the colour to red?
Hey Ferdy,
It all depends on the complexity of the site for me. If it’s a simple site like a blog with 10 – 20 pages then I would use class names similar to your suggestions however if the site has many different versions of layout and I know from the page designs that I’ll be using the same style over and over again then I will tend to use names like the ones I used in my brief example.
I’m always one to learn something new so I’ll throw you an example to get your feedback. :)
If you had say a 1px solid black border around say .subtitle, .user and .page-header for example and they all had other various properties such as font-size, letter-spacing, etc how would you write your css?
Would you do
.subtitle, .user, .page-header {
border: 1px solid #000;
}
or
.subtitle {
border: 1px solid #000;
/* other styles */
}
.user {
border: 1px solid #000;
/* other styles */
}
.page-header {
border: 1px solid #000;
/* other styles */
}
I’d just do something like .solidBlackBorder {border: 1px solid #000;} and reuse that class to reduce file size and repetition in the CSS.
In regards to changing a colour later on to red. I guess I’m just lucky because my designers always have a finalised design that the client has signed and approved before I commence development. If such a thing did happen then I would just do a find and replace for the class name or if it had been a few months since I worked on the site I’d just use Firebug to trace the style and alter it that way.
I wish the author hadn’t used HTML5 or CSS3.
I wish he hadn’t used horrible location dependent selectors.
I wish he had focused on the OOCSS way of working – building up a library of reusable code (in a/many library file/s).
I wish everyone who read this article had first visited the OOCSS wiki and understood how it actually should be done.
I understand why people may wanna see more stuff that can be used in our daily tasks. But this is a development blog. Its our mission, as a community of developers, to push things to the right direction and set the standards.
Nice article. Keep’em coming.
I thought this was a tutorial blog? And that these tutorials were for a) beginners b) people who do it for a living. Now if we were to push things in the “right direction” we would also be breaking current standards. So if our client’s clients can’t access the site because we decided to “set the standards” and they are using the wrong browser who is in the wrong? Well the client couldn’t be because he/she didn’t tell us what tech to use, neither would the client’s client because he/she clicks the icon on the desktop.
Thanks for the tutorial, this is awesome post !
Nice article about CSS-selectors, but I totally agree with the majority here. This is NOT object-orientation.
If anything I would call it Container-oriented CSS (COCSS, no pun intended)…
But isn’t all CSS really container-oriented – considering the C(ascading) in CSS?
Also, I agree on the HTML5/CSS3 comments. For us developers working with larger corporations, HTML5 and CSS3 is really not a valid alternative for another couple of years. It’s alot of fun to play around with on your spare time, but it’s utterly useless when corporate sites needs to include as many visitors as possible.
Please keep in mind that many readers of your articles are consultants with basically no power over the chosen technology/browser-compatibility.
People should go back to C++ and see what object-oriented programming is really all about. What you did here is just a clever presentation of CSS code – which is nice – but, there’s nothing object-oriented to it because the objects don’t do anything and can’t interact.
And if one of the main messages is “future thinking” then you might consider “Don’t using ID’s in CSS” -> http://f055.net/article/dont-use-ids-in-css/
A very detailed tutorial, great work :)
Now and for the next few years IE6 will be along the browsers, witch you have to implement a lot of fixex to display your web sites, like the other browsers do it naturaly. Why is IE6 an important browser development ? because it comes with windows xp and we all know that it was the best windows platform ever and will take years since we will upgrade our os.
OO in CSS is implemented since the css or css2 (i’m not sure wich of them) was released and to give you an example: #footer p span .red { …. }; the space is the selector for the “children” if you want to call them that way.
Great tutorial but I don’t find it usefull at the moment.
But that css selector only selects the direct children. > selector selects children and grandchildren.
And no IE6 is not sticking around because of XP. It is actually sticking around because of Windows 2000, and mainly business/schools refusing to upgrade because it just “works”
#footer p span .red { …. }; for the specific children classes red within the span and for all the grandchildren #footer p span { …. }; including the children .red.
Excuse me I forgot about windows 2000 I only concentrated on the most used windows platform nowerdays.
Since ie6 will disapper it will take some years until then we have to endure and suffer!
Nicole, Andrew. Please don’t call this OO CSS. It’s a misleading term whose only function is to impress or indimidate people with limited knowledge of web design. Just call your article “Best Practices CSS Tutorial” or something, and we will all respect you more.
Nothing new. I’ve been doing this for several years.
Object Oriented CSS? lol.
Things I’m really sick of hearing about in these comments:
1. “First!” Even if you lol it, it’s lame
2. “I’m so smart I already know this technique.” No one cares.
3. “IE6 users should just upgrade.” I would argue that a large percentage, if not the majority of IE6 users are probably on the corporate side and CAN’T upgrade because of IT policies. I worked for one that had 350,000 users running IE6. These aren’t just people sitting in their house freaked out to hit the Install Updates button, and they shouldn’t be “punished.”
4. People who bitch about all the lamo comments and don’t even address the article itself. Oops, that’s me.
i see you have extra free time.
why people still messing with the html 5?? it will be released in 2022, why bother ?
A good idea is to have your CSS3, worry about HTML5 later, in another style sheet for those browsers that do use the CSS3 standards.
Then have a secondary style sheet for those that don’t. It may not be as grand as your CSS3 based style sheet but it will still work for your visitors that use IE or whatever other browser that doesn’t support CSS3.
This way you can use all the added treats of CSS3 but have still have a style for the less then best browsers.
this is counterproductive to write two or more stylesheets for diferent browsers when you can write one for all the browsers.
You already have to write an additional stylesheet for IE for all that it supports.
Why not do a little more?
Why not do a little less? Why not just include all the css3 attributes to your hearts content, but let the non supporting browser degrade gracefully.
Useless.
IE6 doesn’t allow the “>” selector.
40%+ of all businesses still use IE6, regardless of how retarded it is, so you’d have to code not one but two entire CSS files to style the same site. That doesn’t make my job as designer/developer easier.
This wouldn’t be some minor tweak using an IE-only workaround like “width:12px;*width:10px;”, either. The basic architecture of the CSS would have to be different, and you would end up with two different files on the most fundamental level.
Don’t believe me?
http://msdn.microsoft.com/en-us/library/aa358819%28VS.85%29.aspx
“Note Requires Windows Internet Explorer 7 or later.
Note Combinators are enabled only in standards-compliant mode”
think the point here is that all he is saying to do is to try to think and define you CSS as objects. That is something that a lot of us might be doing anyway without actually calling it that, well that’s fine. Maybe you might want to call it that and when you sit down and start writing up your CSS consciously think about it in that way. It might allow you to get your styles done quicker with less errors. If not then go back to the way you were doing it.
I also think that he said it might not be OOP exactly, but simple to define your design into objects.
That being said I think the boat was missed just a little bit here in the examples. He tried to create style objects called articles, and comments. This is were I would approach it differently because it isn’t very reusable to me. can you reuse that style outside of comments even if the answer is no why limit yourself to it.
I would think of it like a .threaded-list or something as the basic object so you could reuse it a little better. Then if you needed to override something like a background color. You could do something were class=comment threaded-list. That still might be a bad example but something like threaded-list would appear to be more reusable.
“I also think that he said it might not be OOP exactly, but simple to define your design into objects.”
You either are convinced that you are doing OOP and then call your article “OOP”, or you admit that it has nothing to do with it and call it “structured CSS”. You cannot have it both ways.
Calling this technique object orientation is more than just a word game:
- It completely puts junior developers on the wrong foot
- You embarass yourself since you clearly don’t know OOP
- You are intentionally doing this just to have a scoring title
I am not sure the author was trying to say this was OOP , but OOCSS. OO as a theory is really nothing more than theory. Yes in the end it might look like it is simply well formed CSS, but you can still have an OO process to get there.
I believe the author was just trying to portray this,
“- It put junior developers on the wrong foot” how exactly, this is just a possible methodology to produce pretty well formed clean css (sure maybe it isn’t the nest to jump into css3/html 5 just yet but that is a different argument)
“- You embarass yourself since you clearly don’t know OOP” I am not sure as to why this is an embarrassment. The title isn’t OOP with CSS, it was OOCSS to me clearly different. Just trying your best to apply OO theory when generating your CSS.
“- You are intentionally doing this just to have a scoring title” I disagree, fact is there has been a little buzz about OOCSS, and if the methodology helps reuse and minimize code why not. If you run a site that is about trying to write relevant article to possibly further web development. I don’t think that you can just ignore it. I do think the examples here fell a little short, and they tried to do to muck in one article (OOCSS + CSS3/HTML5), but I do believe nettuts had good reason to publish this type of article.
Also, I think you can apply the same theory even if you don’t use the >. that is just markup. 00 isn’t defined by the way the markup looks.
c#, vb, php – if you use either of these for OO style programing their markup will look different. But it would still be OO.
it really useful for me. Thank your post
OOCSS seems more appropriate for heavier data-driven websites where things aren’t as ‘custom-designed’ but are more modular or interchangeable.
In theory it’s a good idea, however might be overkill for smaller sites as it seems to inflate a segregate code. That’s not to say you couldn’t adopt this technique to a more appropriate extent depending on the website.
I also agree it would have been a little easier to swallow without the added worry of HTML5, CSS3, and browser compatibility issues.
Thanks for the TUT in any case!
This is called cascading, not object-oriented. It’s not really anything new either, that is why they called the language” CSS”.
Sure, it is cascading that would be the CSS part of the OOCSS. He is using that to his advantage.
But OO is simply a methodology of generating your code. They are simply trying to break down there skins into legit style objects. And then using CSS they best way they can to mark it up.
Sure, it isn;t perfect because you cant truly inherit from another class lets say. But he can’t really rewrite the CSS spec, so you put the use the cascading nature the best you can.
Also you don’t have to use it. Coming from OOP I like it. When I set out to develope a class, I ask myself what are my objects. Now I have been trying to do the same with my styles. What are my style objects, then I build them. Then I just place them were the need to go. CSS maintenance becomes very easy.
Jeff, thats not OOP. Thats simply future thinking.
Ben, no one ever said it was OOP. First off CSS is not a programing language.
My question is why isn’t it OO. If you are breaking you style out to distinct reusable objects, why isn’t it OO.
Everyone here is loving to give this guy a hard time saying that’s not OOP. Well he never suggested that the article was OOP w/css. Only a object orientated why at approaching CSS. If you don’t like his examples, than fine (i can agree with you there). But there is nothing wrong with his methodology in calling it OO.
i thought inheritance already exist in the CSS world …
Divitis as explained by Yahoo front end specialists who created YUI is using a DIV instead of using its appropriate tag
example:
DIVITIS
Nettuts!
non-DVITIS
Nettuts!
ugh supposed to be
div
Nettuts
/div
p
Nettuts
/p