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 :)
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.
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! 🏮🥐🍰
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
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!
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!
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.
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!
Yeah, I agree that there are issues with the shadow dom. I think it was one of those "this is probably the best way to do this" things, that they only realized can be a real footgun once it was too late. And yeah, nesting + scope works really well from the quick things I've played with. Like you said, it basically removes the need for something like BEM, since specificity is no longer an issue.
Seriously though, I can totally see how :is(.some-selector, #override-xyz) where "xyz" refers to some other part of the stylesheet would be more self-documenting than the usual !important modifier - in cases where you really, really need it. (Which should be somewhere between "never" and "almost never".)
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
When you use scope with the style tag you can also nest :scope {} within to access the parent html element meaning you don't even need to use classes if you don't want to.
I did warn about browser support for it when I first started talking about it, saying how support as of the time of recording is at only about 70% right now, and that there's a link to the browser support tables in the description, for people watching later on :)
Only a few people have afaik... from what I've heard it's crazy expensive to run, so I don't think they'll be inviting many people to try it out for awhile 😆
