Working on a team isn’t everyone, all at once, diving in together, communitas programming. Often times, it’s serial: first an architect designs a solution, a sole contributor might make the big technical decisions, someone else builds out a prototype, another person might set up the dev environment, a small team might do the initial development, others come in to make contributions late in the game, and some human on the other side of the continent is tasked with maintenance releases. The structure and conventions of code facilitate this cascading contribution.
Not CSS. Maybe because CSS was considered to live on the design side of the presentation layer, or maybe because it’s declarative, CSS development wasn’t talked about or followed in a predictable manner. Opening a CSS production file can feel like being knocked over and suffocated by a mudslide. So after years of treating CSS like the bastard child of the code base, we had no other choice than to devote time and thought to ridding the world of spaghetti CSS and classitus CSS.
Like so many conventions, frameworks & architectures, how to construct CSS is up for discussion. Some ideologies are better than others; some have stood the test of time; and some are good enough.
For me, it’s important for the team to know what’s going on, to communicate toward success, and to look forward to diving into the code at every stage of the project. When a project forms, everyone can help adopt the right CSS method for the group, and warn each other about gotchas.
“Never doubt that a small group of thoughtful, concerned citizens can change the world. Indeed it is the only thing that ever has.” — Margaret Mead
Well, right about now, we’re getting so advanced with CSS, deconstructing and renovating it, that some implementations are not even using it! But for these new methods to help us in daily production, we need to have a common background. And yet, there doesn’t seem to be a list of resources on the web for advanced CSS topics. Content marked “advanced” is frequently some experimental idea — that some day may become standard practice. Developers need pro CSS help for today’s project.
So I thought I’d start culling the advanced topics out of the large body of introductory and tutorial content. This list is not extensive, by far. I’m just beginning to gather the wisdom in one place. But if you’re a developer who is comfortable with coding CSS at a basic level, I hope this list will save you some time.
1. Organizing CSS with OOCSS, SMACSS, and BEM by Matt Stauffer [video]
2. Decoupling the Front-end with Modular CSS by Julie Cameron [video 1.5 hours, but worth it] [slides]
3. CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends by Heydon Pickering
4. Specificity on MDN
5. Cascading section of CSS Cascading and Inheritance Level 3 W3C spec editors: Elika J. Etemad / fantasai (Invited Expert), Tab Atkins Jr. (Google)
6. CSS chapter (5) of Frontend Architecture for Design Systems by: Micah Godbolt [A lot of regional libraries and organizations give members access for free]
7. Aspects of SMACSS — Modular CSS
8. PostCSS — A Comprehensive Introduction by Drew Minns
9. MVCSS [Modular View CSS] style guide by Nick Walsh and Drew Barontini
10. Coding guidelines for contributing to bootstrap projects [just a taste of conventions]
11. SUIT CSS naming conventions by suitcases [ok, one more]
12. CSS Architecture for Design Systems by brad frost [ok, I lied]
Lucky 13. CSS And LESS section of Lessons Learned In Big App Development, A Hawaiian Airlines Case Study by Cory Shaw
14. Inline Styles are About to Kill CSS by Colin Megill [video] This video speaks to a React audience, but shows a growing attitude that “CSS is pretty over”
15. CSS and the first meaningful paint by Patrick Hamann [video] How to deliver critical CSS faster than fast using HTTP/2 server push and Service Workers
16. Most recent article to get you excited all this? Sarah Dayan’s In Defense of Utility-First CSS
Please share any advanced CSS resources, because I’m planning on continuing to build this list.
