The CSS Cascade (2020)

&gt; Let’s take a look at the different tiers of the Cascade<p>Bad way of framing this, the navigation and phrasing makes it sound like we&#x27;re going from least to most specific as we scroll down the page but we&#x27;re not.<p>&gt; The hierarchy here is actually reversed for !important rules, meaning that an !important browser default rule wins over an !important website rule<p>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): <a href="https:&#x2F;&#x2F;webkit.org&#x2F;wp-content&#x2F;uploads&#x2F;cascade-layers-2048x1152.png" rel="nofollow">https:&#x2F;&#x2F;webkit.org&#x2F;wp-content&#x2F;uploads&#x2F;cascade-layers-2048x11...</a><p>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&#x2F;technicals nailed down a little more.<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Learn&#x2F;CSS&#x2F;Building_blocks&#x2F;Cascade_and_inheritance" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Learn&#x2F;CSS&#x2F;Building_...</a>

Huh, I always thought the cascade referred to the fact that certain properties apply to child elements (like font size) and others don&#x27;t (like borders). There are cascading and non-cascading properties. What is described here I would call the specifity (which is actually only one part of it).<p>The funny thing is that I even implemented a CSS parser and evaluator without knowing the official terms.

<a href="https:&#x2F;&#x2F;every-layout.dev" rel="nofollow">https:&#x2F;&#x2F;every-layout.dev</a> remains, hands-down, the best resource on CSS I&#x27;ve ever encountered since I started working in webdev 24 years ago.<p>See also this recent post by Josh Comeau, which does a good job explaining layout modes: <a href="https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;css&#x2F;understanding-layout-algorithms&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;css&#x2F;understanding-layout-algorit...</a>

Article a reminder of why CSS is so difficult to work with. Turns out I knew all these precedence rules, however when time comes to look at an element and figure out how to make it, say, wider, figuring out WHERE to add that rule is a challenge.

I find her website to be difficult to skim and overview, something which is essential for technical reading, because more often than not you will want to return to a document you have previously read to remind yourself of a detail that you remember there, somewhere.<p>It&#x27;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&#x2F;B code blocks doesn&#x27;t seem right either.<p>Which in a way is neither here nor there, since it&#x27;s not related to her content. Personally I find the &quot;Funky fact alert! The hierarchy here is actually reversed for...&quot; style of writing to be offputting, but I&#x27;m sure some others like it.

Can anyone explain how deep use of the CSS cascade is any different to OOP inheritance over composition? This is usually discouraged in OOP languages now because it quickly gets confusing and hard to maintain.<p>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).<p>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&#x27;s closer to regular programming? CSS seems to be in its own world with lots of debates about best practices.

&gt; When we add !important to the end of our declaration, it jumps to this level of the Cascade. Ideally, you reserve this level for Hail Marys, which are needed to override styles from third-party libraries<p>Or when you write Stylus[0] themes to create custom skins for your favorite sites. Sometimes the Stylus theme doesn&#x27;t honor what you&#x27;ve coded, and you have to manually over-ride with an !important<p>[0] <a href="https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-US&#x2F;firefox&#x2F;addon&#x2F;styl-us&#x2F;" rel="nofollow">https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-US&#x2F;firefox&#x2F;addon&#x2F;styl-us&#x2F;</a>

Which rules wins is the rule that is the most specific. This article explains it as having &#x27;the most hits&#x27;. Whatever that means.