Multiple inheritance is also usually discouraged for similar reasons, but not in CSS in the way you can combine classes together without restriction (with `!important` and specificity on top of this).
And is CSS cascading actually a good approach that scales to complex UIs and designs? Is this approach successful anywhere else or is there a way to do styling that's closer to regular programming? CSS seems to be in its own world with lots of debates about best practices.
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/
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?
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.
One would necessarily have to generate the HTML, too, otherwise there are no guarantees, and even then the CSS—browser interplay might lead to broken styles.
However, it doesn’t really fit well if a brand-themed app is developed by a single team. Consistency is easier to maintain when styles can be reused across the application, and things like styled-components don’t work that well there since they tightly couple components to styles, so you need a theming system on top of them… which is silly, because CSS itself is a theming system.
CSS modules is a bit better, but even that encourages encapsulation which is necessarily broken if the styles need to be shared between components.
Inheritance is good and nice but...
You should not build 20 layers of it. You can build really nice CSS layout where components are separated and that is idea of component frameworks. There you have maybe 2 layers of cascade and that is it.
So it is people building castles in the sand thinking they are smart, until water comes in and all is washed away.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
.foo.foo { color: blue; }
.bar { color: red; }
<div class=”foo bar”>
I’m blue
</div>Bad way of framing this, the navigation and phrasing makes it sound like we're going from least to most specific as we scroll down the page but we're not.
> The hierarchy here is actually reversed for !important rules, meaning that an !important browser default rule wins over an !important website rule
I think this would be difficult for a beginner or even intermediate to understand. This chart does a much clearer jobs including every layer of specificity (including with @layer): https://webkit.org/wp-content/uploads/cascade-layers-2048x11...
I appreciate going for an approachable fun way to deliver a dry, complicated topic. Maybe look at how MDN writes about this stuff and get some of the specifics/technicals nailed down a little more.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
https://searchfox.org/mozilla-central/source/layout/style/re...
It's probably not only related to the wacky sidebar, but more related to the main content style, headlines being too large and an overuse of colors and emphasis in each section of text. Choosing to alternate dark and light scheme in the A/B code blocks doesn't seem right either.
Which in a way is neither here nor there, since it's not related to her content. Personally I find the "Funky fact alert! The hierarchy here is actually reversed for..." style of writing to be offputting, but I'm sure some others like it.
The funny thing is that I even implemented a CSS parser and evaluator without knowing the official terms.
See also this recent post by Josh Comeau, which does a good job explaining layout modes: https://www.joshwcomeau.com/css/understanding-layout-algorit...
Or when you write Stylus[0] themes to create custom skins for your favorite sites. Sometimes the Stylus theme doesn't honor what you've coded, and you have to manually over-ride with an !important
