Woolly, the CSS sheep.
CSS is notoriously difficult to organize. The complexity of CSS selectors coupled with ever-changing project requirements and redesigns can quickly turn even the simplest of stylesheets into a snarled, tangled mess of code. Ugly code can be perfectly functional code (if it couldn't the entire web would have collapsed in on itself long ago), but who wants to maintain barely understood spaghetti code?
We've looked at some general suggestions for organizing CSS in the past, the highlight of which is still CSS guru Nicole Sullivan's suggestions for organizing and maintaining large CSS codebases.
I recently stumbled across another great resource anyone who needs some practical, example-filled advice on how to organize CSS -- Yahoo developer Jonathan Snook's new online book, SMACSS.
SMACSS (pronounced "smacks") stands for Scalable and Modular Architecture for CSS. Don't let the overly technical title fool you, Snook's book is not only highly readable it's chock full of examples that will help you wrangle your code into something more manageable. Snook calls SMACSS more of a "style guide than rigid framework," and suggests that it's best approached as a way to "examine your design process and as a way to fit those rigid frameworks into a flexible thought process." In other words, it's a system you can adopt or borrow portions of and adapt to your own work.
The book is available online, either as a single, massive page of HTML or broken into sections. I highly suggest browsing by section since there are comments on each of the pages where readers can ask questions and offer their own suggestions. Throw SMACSS in Instapaper or add it to your bookmarks, it's well worth a read and likely something you'll want to refer back to in the future.
See Also:
