These CSS features give us more control on the cascade and specificity

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:40 - Order basics
03:10 - Debugging order
04:18 - Order linting
05:55 - Invalid declarations & debugging them
07:40 - Using order and invalid declarations on purpose
10:26 - Feature queries @supports
12:45 - Specificity intro
13:45 - Specificity basics
15:18 - Debugging specificity
16:40 - Modern selectors impact on specificity
24:00 - Cascade Layers introduction
24:38 - Cascade Layers basics
27:25 - Debugging layers
28:45 - Declaring layers before using them
31:28 - The impact of !important on layers
33:30 - Combining layers with “unlayered” styles
34:28 - Introduction to scope
36:04 - Scope basics
40:50 - Using scope with style elements inside an element

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[cintrond]

Wow this is fantastic and deserves more than a ☕. I'll be sharing this with my team as I'm sure it will help a lot of folks level up their css troubleshooting.

[rafa]

I am using BEM, 10000 lines of code in one file and no problem with maintenance and specificity. Before I started using BEM, CSS was a nightmare for me and I really didn't like it, especially in larger projects, now I like CSS :)

[petrmotejlek]

And here I worried this would be a 40ish minute video about using !Important :)

[clevermissfox]

This video auto played and I realized I am doing exactly what he mentioned; using :is(main#content, header, footer) to be able to overwrite some crazy selectors in wp.

Also in my new blueprint I started putting my plug-in and framework css files, as well as theme and child theme files into cascade layers. Much harder when the css is dynamically generated and lives in uploads but I think it’s working. And I don’t have to use ids !

[JasonJA]

He saved the best for last... Thanks for video.

[castlemoyle]

That trick of hovering over a tag or selector and seeing specificity is great. Doesn't show up in Firefox which is yet another reason for me to quit using it, I guess. Oh and congrats! on your specificity pronunciation!

[GerritforBazeja]

This is a very nice video and very important (ha, ha) to realise! what goes first who is the boss!! in CSS

[vilijanac]

What I found useful, embedded CSS in a style tag within the page itself, will override even specificity.

[nilaallj]

To my understanding, @scope is probably LESS powerful than scoping in at least some frameworks, especially those that rely much on Shadow DOM. I see this as a good thing, since Shadow DOM is usually TOO powerful for my use cases.
 
Shadow DOM means style encapsulation where nothing leaks in and nothing leaks out. @scope on the other hand lets styles with higher specificity leak in, and styles declared inside a scope block may leak beyond it’s scope limit if elements further down the DOM tree inherit them. @scope has very little impact on specificity. Its main thing is to give priority to styles closest to an ancestor scoping root, where order of appearance would have decided otherwise.

One very exciting thing with @scope is its potential to fully replace the need for BEM, using nested scope declarations with the &-selector, and/or together with cascade layers.

Great video as always. Looking forward to your @scope video!

[patricknelson]

17:11 - Welcome to the Typo Troubled Tongue Twister Tournament!

[alexgochenour]

Your visceral mastery of this technology is what makes your show so much fun to watch. I especially like your tying in the CSS/HTML to the browser dev tools. Thanks and thanks! 🏮🥐🍰

[ilirbeqiri]

The example shown with the feature queries, also used on the previous video where you demoed how to animate nav on scroll, if the feature query asserts that it supports scroll animation, styles were overridden but I think browser devtools were not correctly showing the styles. I tried to un-apply the styles inside the @supports block and nthg was changing, the case with top: 1rem and top: -5rem.

[petrmotejlek]

Specificity always felt like poker rules. You can kinda reason about them, but in the end, you still gotta learn the order by heart, because they don't all just make sense :D

[VeitLehmann]

scope is definitely something I want to play around with! layers as well, but in the projects that I'm working with, I think it would cause a lot of headaches because there are !important rules both in ui library/base theme code and consumers'/custom code, and the inversion of !important would probably mess things up badly... I already use the recent pseudo selectors a lot, and I'm most excited about being able to use :has in production code now since browser support is finally decent!

[djkomptenz]

do you have a deep Tutorial on how to create this effect in 10:55 the Video that you are talking about only releases to the @support feature and not on the actual design that you are using in this example?


btw Your videos are Amazing to watch and learn at the same time and i understand a lot, thank you for helping me and having fun with css

[sevenarts]

I also use BEM and always write properties in alphabetical order.

[eazygfx]

These are helpfull, never really thought about id's overwriting classes, i barely even use id's anymore maybe i should

The speficity based on placement in the file is a to keep in mind, as often i write my CSS from top to bottom (ie, hover > nav > content > footer)
in case my footer has higher specificity over my content, but it's easy to keep track where things are, so content doesnt come at the bottom & footer somewhere burried between.

Any tips on this? not sure if you have a video on this but would be helpfull as part of a css file structure for different eleements (header, content, navigation, footer etc)

[harshvishwakarama-eeml]

Please make videos on css library to make template crazy fast

[weblicegirl]

The cascade has always felt like a beautiful waterfall to me.
we must learn to understand it instead of trying to destroy it

[GrouchierThanThou]

You should probably have mentioned that Firefox doesn't support @scoped yet, so you should probably hold off on using it in production.