The Case for Functional CSS

I feel strongly that if a global find/replace is the protocol for doing something as common as a color change, your architecture is suboptimal.

That's what the post is arguing—we're sacrificing a little more verbosity and need for mundane tasks like find+replace, in order to mitigate really hard and annoying to debug risks that currently exist in semantic CSS codebases.

At that point, why is "bg-color-blue" any different from inlining "background-color: blue" ?

This is a pretty common reasoning and I totally get that, aesthetically, they can feel similar. One difference that sticks out to me: functional CSS libraries pull their values from a central config, which encodes the design system. Inline styles are not reusable (they also affect specificity).

This is a risk in any CSS scenario, including yours though.

Agreed on this, and this is fundamental to the language. However, I would argue that semantic CSS actually encourages you to abuse that feature of the language (e.g. through "inheritance" like .button .buttonwarn .buttonwarn--fatal). In functional CSS, this is highly discouraged and always an exception to the rule. That's why abstractions really matter! They encourage day-to-day behaviors that impact long-term sustainability.

/r/programming Thread Parent Link -