../ Angus Lam / Blog

The case for plain CSS

Between working on an established codebase or starting out a new side project, it feels like there are so many choices for adding styling to websites nowadays. Plain ol' classic CSS, inline CSS making a comeback, Bootstrap, Tailwind, what about those fancy scoped CSS modules, Sass, PostCSS, CSS-in-JavaScript, do I bundle them or export them into a single CSS file? Multiple CSS files? Analysis paralysis.
The decisions to use these tools feel trapdoor-y. It's especially daunting when there are ambitious plans to build new and exciting projects. It feels like the right time to plan for the future and "do things right the first time".
I'm not going to argue to use no tools, but I am going to make the case to bias against using them unless there's a very clear reason to.

🔗 Unsurprisingly, no silver bullet

CSS, even in 2021, has a somewhat unfair reputation of being finicky, unintuitive, and developer-hostile, as underscored with the plethora of quality CSS memes featuring Peter GriffinPikachu, and even original comics.
Plenty of tools exist and work really well, but only for the problems they address. Unfortunately, there isn't anything that just generally makes styling better or right.
Generally, CSS has four major categories of complementary tools. Keep in mind some can be argued to fit in multiple categories.
Unfortunately with CSS, it has an added tendency of turning into spaghetti without some discipline. Some common pitfalls like the lack of namespacing, conflicting cascading styles, unintended inheritance, and using !important can quickly make CSS hard to reason.
These are some principles that are useful to justify using one or more of those tools.

🔗 Just write plain CSS

Especially when starting out, there's nothing wrong with writing a plain old CSS stylesheet.
A few hypothetical examples as food for thought: