Instantiate the cascade: Object-oriented CSS in action
In web production, there is always a conflict between design and engineering. But the one thing they have in common is the user's happiness.
Code is fragile. Even the cleanest code gets ruined the first time a noob touches it. The learning curve for CSS is actually pretty steep. You should know all the rules before you get started.
In many projects, re-using code is not a common practice. Style guides are non-existant and people don't trust other people's code. This makes filesizes grow enormously. Having a 1 MB stylesheet is a common occurrence.
So can object-oriented CSS work? Nicole Sullivan, a consultant for companies like Facebook, says that it's an evolution of the language.
The architecture is about how we define the selectors.
Let's start with a simple example: headings. When a designer hands off a mockup to a client-side engineer for slicing, they usually don't get a style guide with heading sizes clearly defined. Think of your components as LEGOs.
What are the building blocks you need to make the page work? It's okay to ping the designer back and say that a certain heading size won't work.
Avoid location-dependent styles, aka Modular CSS, is not good. Instead of just sticking a heading anywhere, use them as headings.
Define classes along with headers instead so you can give elements within the page that are not headers, the styles of a header. Like this:
h1, .h1 {...} h2, .h2 {...} ...
Use hacks sparingly. If you are hacking something other than IE, then your markup is bad. Make sure a hack doesn't mess with your specificity.
Abstract structure into a separate class. Structure is not "look and feel". It's more about the overall layout of the page. This is where you write a lot of rules that will be reused. Give all the rules the same strength: use cascade order to overwrite previous rules.
CSS needs encapsulation. Don't access sub-nodes of an object directly. Don't just reference .inner, make sure you are as specific as possible.
Avoid singletons. Don't style IDs ever! #myUniqueIdentifier is a no-no. You will always have more than one of something, especially if you have more than one web page on your site.
All of this is confusing, but it's possible to work today. Check out Sullivan's OOCSS code at GitHub and tell me if it worked for you.
Sullivan also has a wish-list of items that should be part of CSS, and one of them is the ability to use variables in CSS:
You would call them like this:
I think this is a great idea, but it adds another layer of confusion.
How much do you use CSS? I realize this is more of a consumer tech blog, but we are all becoming web developers nowadays. How important is it for you to learn CSS?
Let me know your thoughts in the comments below, or send me a message on Twitter.
More from Event Apart 2009: