It’s a weird, confusing, exciting time for CSS.
Over the past few years we’ve seen a proliferation of paradigms, concepts, architectures, libraries, and frameworks emerge to assist us with writing modular, scalable, maintainable CSS. The inspiration for these things is commonly rooted in resolving specific issues the front-end community has had since the dawn of the web: coping with the lack of programmatic constructs (variables, control structures, scoping, etc.), alleviating the cognitive overhead (and reducing the cyclomatic complexity ) caused by the cascade and issues with specificity, establishing sane, maintainable naming schemes, and above all else, architecting and authoring CSS in a way that more closely utilizes the excellent best practices we’ve seen emerge in other web languages over the past decade.
We’ve seen varying degrees of success across this set of bullet points:
- Preprocessors and abstractions like Sass, Less, and PostCSS to provide programmatic constructs and allow us to conceptualize CSS as a genuine, turing-complete programming language
- Patterns like Atomic/Functional/Utility to contribute to the flattening and simplification of selectors, as well as lead the movement back to a presentational naming scheme
- Architectures like ITCSS to assist us with organizing our code and files into logical chunks, ordered in a sensible, predictable manner to make tracing our source and knowing where to place new code a breeze
- Testing frameworks like True and Sassaby for unit testing abstracted CSS code
All of these things ride atop the success of what are now considered “mature” patterns and architectures in the realm of CSS: OOCSS, BEM, SMACSS, and the like.
Each of these things is wonderful in its own way, but given the specific foci of each solution, it quickly becomes clear that a wholly fleshed-out CSS architecture will be a cobbled-together Frankenstein monster consisting of a handful of these solutions — they may work wonderfully together, or they may contain overlapping conventions and opinions that make our lives more difficult and push our desires for clean, maintainable, scalable CSS even further from reach.