This story was written by Keith Dawson for UBM DeusM’s community Web site Develop in the Cloud, sponsored by AT&T. It is archived here for informational purposes only because the Develop in the Cloud site is no more. This material is Copyright 2012 by UBM DeusM.

About CSS Architecture

Approaching CSS with an eye to maintainability.

Philip Walton has published an article that I confidently predict will become an instant classic. CSS Architecture spells out patterns and anti-patterns to encourage reusable and maintainable CSS code.

Walton is a front-end engineer at AppFolio, a vendor of property management software. His company's products are Web apps of (we can assume) some complexity, and multi-person teams work on them. However, Walton's advice for using CSS in such a way as to stay out of trouble will apply equally well to a developer working alone.

Walton takes a careful approach to offering advice about CSS style and patterns, knowing that the subject is fraught with strong opinions on all sides. Before identifying anti-patterns -- ways of using CSS that often or always lead to trouble down the road -- Walton lays out sensible goals on which developers ought to be able to agree. The guiding principle here is that you don't want your CSS to hinder the development process; this is no different than the goal you might enunciate for code of any kind. To this end, a project's CSS should be predictable, reusable, maintainable, and scalable.

The main reason CSS often adds to project fragility is easy enough to understand.

[CSS] classes are generally given too many responsibilities in front-end Web development. They style HTML elements, they act as JavaScript hooks, they're added to the HTML for feature detections, they're used in automated tests, etc.

Anti-patterns
Here are the anti-patterns Walton identifies that rob CSS of one or more of the desirable qualities listed above.

I believe that any front-end developer, in whatever sized team and at whatever level of experience, will find something of value in the way Walton has systematized thinking about CSS in a software engineering context. The piece is quite long (4,500 words), but it will amply repay your time and attention.