CSS guru Jonathan Snook is a regular on SitePoint and the podcast. His latest project tackles a subject few developers consider until it’s too late: CSS architecture. If you’ve ever struggled to manage a large complex site with dozens of layouts and widgets, I suggest you read Scalable and Modular Architecture for CSS — or SMACSS (pronounced “smacks”) for short.

It’s not a how-to guide, framework, snippet library or even a set of recommendations. Jonathan has documented his own observations when structuring CSS code for larger projects. The online book suggests techniques to keep your code better organized and easier to maintain. It’s a unique approach about a topic which is rarely discussed in other CSS guides.

The first section identifies four main types of CSS:

  1. Base: primary HTML elements such as the body, form tags, links etc.
  2. Layout: how the page is divided into sections including headers, footers, sidebars etc.
  3. Modules: discrete, reusable, modular components, e.g. navigation bars, product lists, contact forms, etc.
  4. State: how modules or layouts change when in a specific state, e.g. errors, hidden, expanded, active, inactive, etc.

The book builds on these concepts and discusses themes, depth of applicability managing state changes and code formatting.

If you’ve been developing layouts for a while you’re likely to recognize many of the patterns. You may disagree with some of Jonathan’s suggestions. However, the book is reassuringly concise and you will begin to consider your own approach to scalable CSS.

Recommended.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


No Reader comments

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.