Last year after reading the “smacks” book my approach to how I would structure a stylesheet completely changed.

Using an object oriented and modular approach on my stylesheets allowed me keep complex projects very tight and organized as well as with a minimum number of styles.

The Goodyear Truck website is a good example of that.

If you do any kind of front end development this is without a doubt a new religion, that you should embrace.

• SMACSS by Jonathan Snook
• CSS Architecture

Update 2013-05-14

An interesting article from Nicolas Gallagher on CSS Tricks that raises an interesting point in terms of the current best practices for naming css classes and selectors.

Nicolas says that the hyphenated-lowercase-4-life approach is pretty much the standard these days, but he suggests something slightly different.

.Button {}
.ButtonGroup {}
.Button--primary {}
.ButtonGroup-item {}

This naming convention communicates much more. Double dashes are a modifier. Single dashes is a component child.

Although it looks a little bit weird, what he’s saying makes actually a lot of sense. It would be very interesting to create a fork of Twitter BootStrap using this class naming convention.

Update 2013-07-14

Here’s another article that exposes BEM, Block-Element-Modifier approach.

• Fifty Shades of BEM