[chrisweekly]

The CSS cascade, leveraged properly, is perfectly compatible with the principle of favoring composition over inheritance. See https://every-layout.dev/rudiments/composition/

A good approach that scales will use the cascade instead of fighting it. That means global rules and carefully-applied exceptions, with rules' specificity inversely proportional to their reach:

> Sensible CSS architecture has “reach” (how many elements are affected) inversely proportional to specificity (how complex the selectors are). This was formalized by Harry Roberts as ITCSS, with IT standing for Inverted Triangle. ^ https://every-layout.dev/rudiments/global-and-local-styling/

[seanwilson]

> is perfectly compatible with the principle of favoring composition over inheritance

I understand you can use composition over inheritance (like in say Java) but by only using the cascade in limited ways (e.g. global styles), doesn't this demonstrate that the cascade doesn't scale and should generally be avoided?

[chrisweekly]

I guess it depends on your definitions for "limited", "global styles", or "scale". :)

https://every-layout.dev prescribes use of a robust global .css stylesheet with global and element selectors, paired with a brilliant and flexible typography-based scale, custom properties (think "design tokens"), and dedicated layout primitives, that combine to do nearly all the styling work a site could need. There's a place for utility classes as needed. By embracing the cascade and leveraging it properly -- ie, its exception-based paradigm -- it hugely reduces the amount of CSS you need to write (which is otherwise so typically bloated, radically over-specified, and brittle). It's hard to overstate how profoundly different and better our use of CSS can be, when it's based on the axioms so beautifully illustrated by https://every-layout.dev.

FTR I'm not affiliated in any way, just a huge fan of their imho singular work.