A list of things to read or watch that address these two questions: What is scalable CSS? and How do we create scalable CSS?
By scalable CSS, I mean CSS that is
- capable of remaining effective, coherent, extendable, and maintainable as projects grow over time
- capable of being understood and worked on by any number of different people in a consistent, systematic way
Included are resources that articulate key principles and practices. The list is restricted to the articles that I consider the most important to read -- that is, the best explanations (of which I'm aware) for different approaches to the problems.
If you know of a resource that should be added, please share! File an issue or a pull request.
(There are plenty of other problems related to CSS: understanding how it works, using specific properties, accomplishing specific styles, achieving responsive design, boosting performance, etc. This list is strictly focused on the problem of creating scalable CSS.)
None of the sections present any kind of "ranking" or "suggested reading order." Just read them all.
Newest on top, oldest on bottom.
- Medium's CSS is actually pretty f***ing good, by Jacob Thornton (8/28/14)
- Used and Abused -- CSS Inheritance and Our Misuse of the Cascade, by Micah Godbolt (8/25/14)
- Enduring CSS: writing style sheets for rapidly changing, long-lived projects, by Ben Frain (8/7/14)
- Challenging CSS Best Practices -- suggesting a unique approach (all utility classes) the author calls Atomic CSS -- by Thierry Koblentz (10/21/13)
- Atomic Design, by Brad Frost (6/102/13) -- which isn't really about CSS code, exactly; but so many people have found it a valuable way to think about frontend component architecture that it fits in well with this list.
- MindBEMding - getting your head around BEM syntax, by Harry Roberts (1/25/13)
- CSS Architecture, by Philip Walton (11/16/12)
- SOLID CSS, by Miller Medeiros (9/10/12)
- Shoot to kill: CSS selector intent, by Harry Roberts (7/17/12)
- The open/closed principle applied to CSS, by Harry Roberts (6/21/12)
- Keep your CSS selectors short, by Harry Roberts (5/15/12)
- The single responsibility principle applied to CSS, by Harry Roberts (4/28/12)
- About HTML semantics and frontend architecture, by Nicolas Gallagher (3/15/12)
- An Introduction to Object Oriented CSS (OOCSS), by Louis Lazaris (12/12/11)
- CSS Guidelines, by Harry Roberts
- Scalable and Modular Architecture for CSS, by Jonathan Snook
- SUIT CSS Documentation, by Nicolas Gallagher
- Multilayer CSS, by Robert Haritonov
- Object Oriented CSS Wiki by Nicole Sullivan
These styleguides articulate conventions and guidelines for authoring scalable CSS.
(I'm distinguishing styleguides from what I would call pattern libraries, which are references created to document and exemplify existing styles rather than guidelines for the authoring of the styles. Other people often use the term styleguide to refer to both or either of these reference types. I think pattern libraries are less specifically about scalable CSS, and more about a scalable frontend design and development workflow; so I'm not including resources related to pattern libraries.)
Newest first, I think.
- Adaptation and Components (slides), Nicolas Gallagher (2014)
- CSS is a Mess, Jonathan Snook (2013)
- Architecting Scalable CSS (slides), Harry Roberts (2013)
- CSS for Grownups (slides), Andy Hume (2013)
- Object-Oriented CSS (slides), Nicole Sullivan (2009)