Embrace the Cascade

This is a plea for the power of the cascade — the C in CSS. Too many times I’ve read rants against it, and most of the time it comes down to a lack of understanding.

The cascade is actually enormously helpful when it comes to styling, as long as you know what you are doing. There is no other frontend technique that lets you change the look and feel of an entire document with so little effort. The way the cascade works is very consistent and very logical, and now that @layer has been added to the mix, it is even easier to influence.

Even component-based design systems can use the cascade to their advantage. A design system probably has more similarities than differences across its components — so style the rule, not the exception. And when exceptions do arise, just style those. It takes less code too.

Is CSS a programming language?

CSS is not considered a programming language, and maybe it is not one, which is not a bad thing. That does not make it without logic, however — just not conventional programming logic. There are no user-defined functions, no loops. If statements are being worked on and even media queries are a form of if statement anyway. Built-in functions have made great progress in recent years and there is a lot to choose from, especially when it comes to colour.

All of that aside, CSS is first and foremost about layout, styling, and visual appeal. It is pretty harmless — yet remarkably powerful, in that a few simple statements define the look and feel of a complete website regardless of the depth of the DOM.

Think structured, even without a compiler

Not being considered a programming language does not make structured and consistent thinking about markup and styling redundant. Quite the opposite. The cascade rewards clarity and penalises chaos. Understanding it — rather than working around it — is what separates frustrating CSS from CSS that actually scales.