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.
Articles
Newest on top, oldest on bottom. (A note for you outside the US: my dates are month/day/year format.)
- 8 rules for a robust, scalable CSS architecture, by Jarno Rantanen (10/16/2016)
- More Meaningful CSS, by Jonathan Snook (5/17/16)
- CSS and Scalability, by Adam Morse (3/24/16)
- Can CSS Be Too Modular?, by Harry Roberts (3/8/15)
- Side Effects in CSS, by Philip Walton (3/3/15)
- 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/10/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)
