Nicole Sullivan is right at the cutting edge of best CSS practice. She started the Object-Oriented CSS open source project, has consulted with Facebook and the W3C and blogs at http://stubbornella.org.

We are very pleased to welcome Nicole to Webstock and asked Russ Weakley, frequent Webstock speaker and all-round good guy, to interview her.

Russ: What is this Object Orientated CSS all about, in a nutshell?

Nicole: OOCSS is the radical idea that we can build robust, scalable, maintainable interfaces that adhere to engineering best practices.

Russ: Initially, there seemed to be a backlash against the use of the name “object orientated”. Do you thing the term is accurate, do you wish you had called it something else – like “Nicole’s much more efficient method of CSS (NMMEMOCSS)”?

Nicole: The name was meant to draw a parallel, not be literal. I don’t really mind the backlash. I think the name initially got a few more people (beyond the usual CSS crowd) to start thinking about how to write truly great CSS.

Russ: You have often talked about two key principles of OOCSS being: “Separate structure from skin” and “Separate content from container”. Could you explain what you mean by these two concepts?

Nicole: These principles suggest ways to create layers of abstractions in your CSS objects. You want to have each object solve only one problem, and solve it very very well. In that way, this simple object becomes predictable, testable, and flexible. You can use it to achieve designs that haven’t even been imagined yet.

To keep the objects from becoming overly complex, you want to decide on their boundaries. For example a rounded corner box shouldn’t specify how a heading inside it is rendered. A heading is a separate object. In this way, you keep container and content separate, so flexible.

Russ: For those that have been used to building using location based styling, OOCSS is a major mind shift. Are there techniques people can use to gradually shift to OOCSS?

Nicole: I recommend starting with the tiniest content objects like headings, links, text treatments, and lists. When you can draw on a toolbox of content objects you will find creating new features is much simpler. In my workshop at Webstock, participants will also get to try creating pages from a site that was created completely in OOCSS. There is nothing like creating new HTML pages from an existing object library to cause an “ah ha” moments where you suddenly understand.

Russ: Finally, you have stated that you are opposed to Conditional Comments. What are your objections, and how do you address browsers such as the wondrous IE6/7 browsers?

Nicole: I don’t like conditional comments because they require additional HTTP requests in browsers that are already struggling to keep up. I also like to keep all the code for any one object in a single file. IE dev tools are really inferior, it can be hard to tell that an IE-specific rule is causing what looks like a bug.

Instead, I choose to use * and _ hacks to target specific versions of IE. As a side benefit, these hacks look really gross, which is great because people hesitate to over-use them!

When creating objects like rounded corner boxes, you might notice that each type of box has a lot of code in common. Different boxes may have only tiny variations, like border color and width. When you create an abstract “box” object the code for each of the specific subclasses (skins) becomes really simple and predictable.

Thanks to both Nicole and Russ for this interview!

Nicole will be conducting the workshop CSS of the future – building with Object Oriented CSS at Webstock on the 14th February. She’ll be covering best-practice CSS and you’ll leave armed with practical changes that will make your code lean, efficient, and flexible.