TIL of a visual way to see CSS Cascade

POSTED ON: Apr 09, 2022

Ever wonder what gets priority?

Ever wish it was in a funnel?

Why is this useful?
Because when you're writing CSS, there's a specificity. MDN

As your CSS starts to grow, things can get real hairy real fast, and you start scoping your CSS. Some of you may even tack on hacks like !important.

And you can do weird stuff like do it's specificity weight.

But then questions start arising: will !important be higher priority than say, the Shadow DOM generated object?

This funnel clears that up!

See the Pen The Entire Cascade (as a funnel) by Miriam Suzanne (@miriamsuzanne) on CodePen.

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

Mar 18, 2023

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

Mar 11, 2023

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')

Mar 02, 2023