Colleagues wondered how I have such detailed CSS and JavaScript knowledge... It didn't come out of nowhere, I'm usually just keeping up with new features and solutions because of these videos. 😆
That inline styling thing is really cool! The specificity issue can (other than maybe the "to" part) can just as easily be solved with ":where(article) { a { color: red; } }".
Yessss… back with classic KPow content !!!! Awesome! View-Transitions multi page next? (And perhaps updates for single page since they’ve changed a bit since the last KPow VT coverage?) 🤩
When you use the … to (a[class]) 16:10 you mentioned being able to use advanced selectors ; does that include things like :is() , :not(), :has(), :where ? So I could do: :is(.btn, .btn-inverse:has(i)) or something similar ?
Kevin, I'm a big fan of yours now. Thanks to you, I've learnt and improved my css way ahead. Every day, I'm improving thanks to your awesome and informative tutorials
The style scope embedded within the element made my jaw hit the floor. Sweet leaping jebus! That feels like it would be interesting in combination with web components.
I wonder if the inline style block thing (23:25) could be used to define css variables. Imagine working with a CMS that allows you to redefine props like width, colors, stuff like that at a page level (temporary change color for a button for instance). This could be messy with only used CSS variables because of the inheritance nature of CSS.... but with the new @scope, I can imagine a way to set new rules without going crazy of selector names... I totaly get the "why people will hate this", I am divided on that matter myself, but I have to admit, to open new cool possibilities !!
I found @scope interesting in the dev article you showed, but in practice not much. Your example was very insightful, but still considering :where, :is, :not and :has are well supported, @scope seems a bit niche. The inline feature definitely seems powerful, I think it would be a fantastic replacement for ::ng-deep, very neat!
Having the scope work in HTML is awesome! I currently use CSS Scope Inline for this. Locality of behaviour like that is great for server-side rendering!
After watching this in-depth video, I realized it's still safer to use CSS modules to prevent styles from leaking especially in the enterprise applications
The style tags in elements thing is very interesting... It seems like it would be useful in a server-side component library. That way you can give someone your card, or ect. But it would make the document much larger than necessary. One of my coworkers often writes things that are Ajaxed and/or CURLed into other systems by other people and includes his own style tag before his HTML. He has to use long prefixed classes to hopefully not apply styles to things he doesn't own. This would fix that. He could just wrap his thing in a div and scope his styles to that div.
It's great that Firefox exists as an alternative to Chromium and Safari. But it's a bit frustrating to me that they're so much slower at implementing useful features like this.
Really cool content again Kevin :) Thanks for taking the time to make this video! Once Firefox catches up, I'll early-adopt @scope this summer. Progressive-enhancement, of course. Scope should be additive and optional, and that's good enough :)
It isn’t tho. The biggest problem with @scope is that it’s very bad for progressive enhancement. There’s no graceful fail, your selectors simply don’t work.
@@HenriqueErzinger You can still use @supports to check if it's supported or not, and then use it. Otherwise, default selectors apply. That would make it easier later to just get rid of old selectors when you want to modernise your CSS approach.
I'm having trouble imagining a use for the scoped inline style block. In a componetized codebase, adding this to define components would result in the the styles being duplicated all over the DOM (everywhere the component is used). This is going to bloat page size (for server-rendering) and DOM size. Am I missing something? Maybe it would be useful for a blog that uses a bunch of one-offs in its articles?
Shopify themes have per-block/component settings (configured by theme user later) that get scoped via targeting element ids-this seems like a terser builtin version
Man, I didn't realize you say "front-end friends" and not "friend and friends" until I read it on the t-shirt 😆 I was like what does that even mean, friend and friends, haha.
So cool! Would love to see examples using @layer and @scope at the same time and tips on when to use one or the other, since they both address specificity issues!
Nice option to have a slightly varied style, but could get messy&complicated if used improperly. Will have to look more into that 'to' condition logic, see if it's very useful. Also, this is great natively, coz it's similar to how scope styling works in Vue & Svelte components (and can style just by targeting generalised elements(e.g. button), rather than having to think of a different classname(e.g. .btn) for different pages/sections/etc., so the styles are contained within the components, without having to bleed out to other areas of the pages.
I was heavily using custom properties ( CSS variables ) to solve your problem i.e different card colours with different text accent cramped on a minimal amount of CSS classes. But it made the whole thing too much tightly coupled together and a chore to debug, I might give Scope a try soon ! 👍
You mentioned that the scoped style would be useful "in a componentized world" but that a JS framework would already have a solution for that. I think the scoped style with a style block in a component could _replace_ the JS styling in a component, letting you more easily build web components that include their own styles that apply only to the component.
Would love to see a breakdown of the differences between @scope and @layer. Right now I'm using @layer in a common component library to allow easy overrides on a scope. Where do you think they differ?
Maybe I don't understand the implications, but I really don't agree with specificity overruling @scope. I personally think any style in @scope should take precedence when applied to the same element as styles outside the scope, regardless of specificity. I feel like the way it's going to be limits its usefulness. But again, maybe I'm just not getting it yet.
My first thought was exactly that. When selectors have same specificity @scopes helps. But styles can still get (accidentally) overwritten by other rules with higher selectors. I feel, @scopes only solves the special case, but adds potentially a new barrier through further syntax for junior newbies in a new project :/ But maybe I will have a second thought in the future and see the full power of it - what is more often the case than not with all the new stuff :)
I think @scope, @layer, :is, and :where mostly are helpful when you are building reusable components and your generic framework. They don't prevent people from overriding your styles and that's the whole point. They make it easy to define styles that do not easily win if someone else is trying to get more specific.
just started watching but im gonna say this. \@scope is also great for frameworks because before that frameworks had to keep up with new CSS features in order to make scoping work right but now since its a native feature, it will be more straight forward
Murphy's law. If it can get messy, it will get messy. Inline @scope inside opens a lot of possibilities. However, do expect people to use it incorrectly.
This would have been useful 3 years ago when I was building a ui library and i wanted to allow users to override the theme for a specific dom element, but i couldn only go 2 levels deep due to specificity issues
Hey Kevin. One question that you might be able to help me out with. I've started using the content-grid approach you talked about in another video, for some of my pages. One thing I've come across, is my designer often wants stuff like box shadows to overflow outside the content-grid.. So if I make a box shadow on an element, the box shadow is getting cut off, by the content-grid wrapper (That I'm using to control my sections width). What I'm doing to get around it at the moment, is using the breakout class on those elements. Then some padding + negative margin, to give room for the box shadow, but aligning back into place with the other content. It just doesn't seem optimal. Is there a way to make box shadows overflow, without doing overflow on the entire content-grid?... Hopefully it makes sense.
I’m trying @scoping the css inside a style tag for each component.. this means @scope { :scope .. can target the parent element removing the need for a unique class name
Making profit is what every investors want, when you're investing and not making good profit only losses it definitely becomes a waste of time and capital for you. Forex Trading has made a Lot of people wealthy and equally destroyed a lot others
Many newcomers harbour dreams of getting rich quickly through trading and are suddenly frustrated when the opposite occurs either because of poor trading skill or relying on luck. Luck can also play a part in winning and losing.
Investing with an expert is the best strategy for beginners and busy investors, as most failures and losses in investment usually happen when you invest without proper guidance. I'm speaking from experience..
I rather invest my money on crypto. Bitcoin trading is great unlike the stock market and other financial markets, bitcoin has no centralized location , since it operates 24hrs in different parts of the world...
This is exactly what Big time investors are talking about, not just you. key thing here is to always trades with a good strategy even if the price goes up or down....
It still feels like Scope is one of those things added to CSS to be used as a crutch for people who don't understand or write CSS, and just wanna continue to not learn it. That said, there is a very valid argument for meeting the people where they are. If the reality that most professional CSS is written in the context of some 3rd party framework in javascript, you may as well make it more sane for that usecase.
I wonder how this works with cascade layers. What if I have a button which is in a ‘utilities’ layer, and I have it in a nav and need it to be slightly tweaked when in the nav. I wonder which will win? The cascade layer I assume. While on the subject of cascade layers I have run in to a similar issue on a site I’m building. I have my buttons in a ‘utilities’ layer (the last layer in my CSS). There’s a button in my nav which has a slightly altered style, but is only ever used in the nav. My nav is in a ‘blocks’ layer. Because of this I can’t tweak the button just for the nav, as the button’s layer always wins. So I had to actually move my buttons to the ‘blocks’ layer before my nav to allow the cascade again. Just an interesting issue caused by cascade layers. I know that’s literally the point of them, but sometimes you need to just tweak something from a utility layer based on the block it’s in, and you can’t. I suppose in the buttons utility itself I’d need to add a @scope(.nav) and whack the tweaks in there, but then it’s obviously not in a nav block in the CSS where some people might expect to find it.
For the first part of the video, an other solution is to declare custom properties and re-declare it for each scope style and it will be properly scoped.
They had to create another css feature because they dropped the ball with @layer, which is useless because so many vendor stylesheets have !important qualifiers.
Things I learned from this video: 1. @scope can specify child scope exceptions (to etc) 2. un-named scopes in style tags (super interesting!) 3. "footgun" -edit- unnamed scoped styles inside an element (via ) sounds like a great solution for injecting styling for specific parts of a page without those styles taking over the rest of the page. This is something I've needed to do on pages that need unique styles for multiple elements (eg this page has 30 tables that need to be a different colour from the usual tables on other pages). Currently I declare these rules in a style element inside the main and have to add a main.is-post selector before all the rules to make sure these styles don't bleed out to the rest of the page (eg the site header styles) so scoping the whole thing would allow me to remove main.is-post from all the selectors, which would be great!
FWIW Firefox has said @scope is part of their 2024 interoperability initiative so it should (in theory) arrive this year. Which means we can likely start using it next year, depending on how you care about a given version of Safari.
I was solving this by using css properties. Using .light .dark (dark in light) would require a new rule. ``` .light { --bg: white; --text: black; } .dark, .light .dark { --bg: black; --text: white; } .vibrant { --bg: deeppink; --text: white } ``` I then use these variables to set background color and such. I could also add variables for links if they are colored differently compared to the text.
Kevin mentioned many times he is not using Tailwind. In fact many CSS gurus don't use it either. Never saw Adam Wathan - founder of Tailwind getting invited to any of the CSS events which is strange considering Tailwinds impact on the way most people style their apps today
i remembered scss functions or something like that i learned years ago i really forget it i did something like changing the lightness of a color based on that background color using scss function or idk what was that i would that would be great if u detail it like u do and tnx for every think and all the effort
this language is so convoluted... why isn't that the default when nesting selectors besides you could very well be using directly descendant selectors without much of an issue
CSS as many other old technologies are like a frankenstein. Because it needs to work for all the old content created before it, all the mistakes and bad decisions made before needs to be kept. All that they try to do today is remedy such problems with solutions that doesn't mess up what's already in use. Such problems are likely because of it.
All solves to a problem that have to be implemented to take effect include their own footguns. Backwards compatibility has a bad habit of creating this problem when languages or syntax changes.
This is not a new concept... Web components does it through shadow DOM, and CSS modules have existed for years at this point, and today frameworks like Astro does it, too by default unless opted-out. The real footgun is using global CSS and having to deal with order of selectors, and end up creating overly specific selectors, or duplicate CSS.
Been waiting for this episode 😉 Though now I feel it doesn't make a fix for my issue I mentioned in one of previous episodes any better. For now I'm using: .my-nav a:not(.btn):not(.dropdown-item) to force specific components to stay the same wherever they appear in .my-nav. Wouldn't it be better if @scope actually did come before specificity? And if I did want to override it I would do it inside the scope declaration. Like: @scope (.btn) { color: #fff; background: #f00; // If I want to override .btn styles in my navigation .my-nav & { color: #000; background: #eee; } } At least this way my .btn (specifically ) would be still properly styled if used in .footer where .footer a { color: #f00; } I feel like for now scope only complicates things and you still have to list all the components you DON'T want the styles to be applied to. Only instead of: .my-nav a:not(c1):not(c2) you use: @scope (.my-nav) to (c1, c2) { a {...} }
Sometimes I feel bad that TailwindCSS took over the CSS world, we have less opportunities to write CSS. We end up not getting opportunity to use such features.
That's... not true at all. Tailwind does not replace CSS-it doesn't replace CSS in the browser. You can still use these features however you like. Tailwind is just a set of utility-first primitives with additional features to allow for theming.
@@dealloc It doesn't replace CSS in the browser, but it does replace the use of CSS by developers. And what determines if we use something or not is the job market. If most jobs require TailwindCSS instead of CSS/SCSS, what's the point of using it if you already know it?
Tailwind is what CSS should be. You don't have naming problem in TailwindCSS. Ugly classes ? Use prettier and class hiding plugins and scope css in components. One of the reasons Tailwind is superior to CSS: using CSS you create many many custom classes and in large projects your CSS bundle just exploding (doesn't scale). Also I notice many people try to reinvent the wheel in CSS - to create their own utility classes (which Tailwind is doing out of the box). I just feel bad that TailwindCSS is not the standard!
Thanks for your introduction! Writing the styles inside HTML within the scope ist great in some situations, i.e. overriding quick & dirty or while building components. But in general, I would always try to separate structure and styling in different files.
I think embedded style / scope is an extension of the abomination that is style="..." Its good for quick prototyping and testing but not good for professional development and deployment.
On the surface, this looks like a good idea. It's really not. Breaking specificity rules means people are going to use !important to override styling because they can't understand why just overriding it with natural css hiearchy isn't working. This is a tool we don't need, and it'll actually cause more issues than it solves. And most of the issues it solves are just from novices/lazy devs who don't fully understand how css works. The proper approach for overrides like this would be to use css variables that you can modify using standard css selector structure. They provde the same thing as scope without breaking hiearchal rules.
Most progress happens that way. For JS we had jQuery, then JS was enhanced, so jQuery wasn't needed anymore. Tailwind and React set new Standards, and the Standard makes likexsome of the things. As developers we profit now that things we do run faster.
Thanks for the shout-out/link to my article, Kevin. Love that you spent a lot of time on the specificity-aspect.
doesn't matter if i can build the style of any website, i always learn new things from you, and it always makes me thrilled to use them in my projects
Colleagues wondered how I have such detailed CSS and JavaScript knowledge... It didn't come out of nowhere, I'm usually just keeping up with new features and solutions because of these videos. 😆
That inline styling thing is really cool!
The specificity issue can (other than maybe the "to" part) can just as easily be solved with ":where(article) { a { color: red; } }".
8:18 - I thought MORE HOPS was BETTER, but after seeing this explanation, I checked again and I now see that MORE HOPS is BITTER. 🍻
It's in Firefox Nightly already
Yessss… back with classic KPow content !!!! Awesome! View-Transitions multi page next? (And perhaps updates for single page since they’ve changed a bit since the last KPow VT coverage?) 🤩
I do have it on my content calendar, but it's a several weeks away :)
@@KevinPowell 🤩🤩🤩 still great news and something to look forward to!
+1 I would watch that!
When you use the … to (a[class]) 16:10 you mentioned being able to use advanced selectors ; does that include things like
:is() , :not(), :has(), :where ?
So I could do:
:is(.btn, .btn-inverse:has(i))
or something similar ?
Kevin, I'm a big fan of yours now. Thanks to you, I've learnt and improved my css way ahead. Every day, I'm improving thanks to your awesome and informative tutorials
The style scope embedded within the element made my jaw hit the floor. Sweet leaping jebus! That feels like it would be interesting in combination with web components.
I wonder if the inline style block thing (23:25) could be used to define css variables.
Imagine working with a CMS that allows you to redefine props like width, colors, stuff like that at a page level (temporary change color for a button for instance). This could be messy with only used CSS variables because of the inheritance nature of CSS.... but with the new @scope, I can imagine a way to set new rules without going crazy of selector names...
I totaly get the "why people will hate this", I am divided on that matter myself, but I have to admit, to open new cool possibilities !!
Oh, that's an interesting idea for the custom props!
I found @scope interesting in the dev article you showed, but in practice not much. Your example was very insightful, but still considering :where, :is, :not and :has are well supported, @scope seems a bit niche.
The inline feature definitely seems powerful, I think it would be a fantastic replacement for ::ng-deep, very neat!
It could replace view-encapsulation, not ::ng-deep.
@@HenriqueErzinger there would be no reason anymore to depend on ng-deep? I just say this because it’s been “falsely” deprecated for a while.
Having the scope work in HTML is awesome! I currently use CSS Scope Inline for this. Locality of behaviour like that is great for server-side rendering!
After watching this in-depth video, I realized it's still safer to use CSS modules to prevent styles from leaking especially in the enterprise applications
That inline style block has given me an idea.
That's pretty neat
Awesome video
The style tags in elements thing is very interesting... It seems like it would be useful in a server-side component library. That way you can give someone your card, or ect. But it would make the document much larger than necessary.
One of my coworkers often writes things that are Ajaxed and/or CURLed into other systems by other people and includes his own style tag before his HTML. He has to use long prefixed classes to hopefully not apply styles to things he doesn't own. This would fix that. He could just wrap his thing in a div and scope his styles to that div.
This is rad, thanks Kevin. You literally change the way I work.
It's great that Firefox exists as an alternative to Chromium and Safari. But it's a bit frustrating to me that they're so much slower at implementing useful features like this.
Really cool content again Kevin :) Thanks for taking the time to make this video! Once Firefox catches up, I'll early-adopt @scope this summer. Progressive-enhancement, of course. Scope should be additive and optional, and that's good enough :)
It isn’t tho. The biggest problem with @scope is that it’s very bad for progressive enhancement. There’s no graceful fail, your selectors simply don’t work.
@@HenriqueErzinger You can still use @supports to check if it's supported or not, and then use it. Otherwise, default selectors apply. That would make it easier later to just get rid of old selectors when you want to modernise your CSS approach.
I'm having trouble imagining a use for the scoped inline style block. In a componetized codebase, adding this to define components would result in the the styles being duplicated all over the DOM (everywhere the component is used). This is going to bloat page size (for server-rendering) and DOM size. Am I missing something? Maybe it would be useful for a blog that uses a bunch of one-offs in its articles?
Shopify themes have per-block/component settings (configured by theme user later) that get scoped via targeting element ids-this seems like a terser builtin version
Man, I didn't realize you say "front-end friends" and not "friend and friends" until I read it on the t-shirt 😆
I was like what does that even mean, friend and friends, haha.
It means friends with increased specificity! As in .friends.friends🤪
lol there's always someone new on each video that figures it out
on the nav bar example with the button, you COULD also use a :not(.button) on the styling of the main nav elements.
Tab told me at the css day to look up @scope for our data theme problems and now there’s a video 😀
Thanks
So cool! Would love to see examples using @layer and @scope at the same time and tips on when to use one or the other, since they both address specificity issues!
Nice option to have a slightly varied style, but could get messy&complicated if used improperly. Will have to look more into that 'to' condition logic, see if it's very useful.
Also, this is great natively, coz it's similar to how scope styling works in Vue & Svelte components (and can style just by targeting generalised elements(e.g. button), rather than having to think of a different classname(e.g. .btn) for different pages/sections/etc., so the styles are contained within the components, without having to bleed out to other areas of the pages.
I was heavily using custom properties ( CSS variables ) to solve your problem i.e different card colours with different text accent cramped on a minimal amount of CSS classes.
But it made the whole thing too much tightly coupled together and a chore to debug, I might give Scope a try soon ! 👍
You mentioned that the scoped style would be useful "in a componentized world" but that a JS framework would already have a solution for that. I think the scoped style with a style block in a component could _replace_ the JS styling in a component, letting you more easily build web components that include their own styles that apply only to the component.
"@scope will change how you write css". I'm like: Oh no, not again, I've just became a frontender...
I will still wriye CSS in the same way. With Tailwind. 😁
Would love to see a breakdown of the differences between @scope and @layer. Right now I'm using @layer in a common component library to allow easy overrides on a scope. Where do you think they differ?
Maybe I don't understand the implications, but I really don't agree with specificity overruling @scope. I personally think any style in @scope should take precedence when applied to the same element as styles outside the scope, regardless of specificity. I feel like the way it's going to be limits its usefulness. But again, maybe I'm just not getting it yet.
My first thought was exactly that. When selectors have same specificity @scopes helps. But styles can still get (accidentally) overwritten by other rules with higher selectors. I feel, @scopes only solves the special case, but adds potentially a new barrier through further syntax for junior newbies in a new project :/
But maybe I will have a second thought in the future and see the full power of it - what is more often the case than not with all the new stuff :)
I think @scope, @layer, :is, and :where mostly are helpful when you are building reusable components and your generic framework. They don't prevent people from overriding your styles and that's the whole point. They make it easy to define styles that do not easily win if someone else is trying to get more specific.
23:38 this trick will come in really handy for web components, I guess. Wanna play with it a little bit to see if I really like it
just started watching but im gonna say this.
\@scope is also great for frameworks
because before that frameworks had to keep up with new CSS features in order to make scoping work right
but now since its a native feature, it will be more straight forward
helpful with template tag styling
OG of CSS!!
Murphy's law. If it can get messy, it will get messy.
Inline @scope inside opens a lot of possibilities. However, do expect people to use it incorrectly.
now I can final do a inline hover ... kind of 🤔
@scope{:scope:hover{color:green}}inline hover
yeah, it's works 🥳
Wow. There's so much in there! Feels like you're showing us the whole elephant. Gonna have to start eating piece by piece.
You could have used :is(: hover, : focus-visible) for your nav a instead of using a:hover, a:focus-visible, right?
This would have been useful 3 years ago when I was building a ui library and i wanted to allow users to override the theme for a specific dom element, but i couldn only go 2 levels deep due to specificity issues
This is good video is you want to understand the concept of @scope. We should use it to define "themes" and not individual selector behavior.
Hey Kevin. One question that you might be able to help me out with.
I've started using the content-grid approach you talked about in another video, for some of my pages.
One thing I've come across, is my designer often wants stuff like box shadows to overflow outside the content-grid..
So if I make a box shadow on an element, the box shadow is getting cut off, by the content-grid wrapper (That I'm using to control my sections width). What I'm doing to get around it at the moment, is using the breakout class on those elements. Then some padding + negative margin, to give room for the box shadow, but aligning back into place with the other content. It just doesn't seem optimal. Is there a way to make box shadows overflow, without doing overflow on the entire content-grid?... Hopefully it makes sense.
I’m trying @scoping the css inside a style tag for each component.. this means @scope { :scope .. can target the parent element removing the need for a unique class name
The link to Bramus’ article seems to be missing, can you update please. Great video BTW.
Making profit is what every investors want, when you're investing and not making good profit only losses it definitely becomes a waste of time and capital for you. Forex Trading has made a Lot of people wealthy and equally destroyed a lot others
Many newcomers harbour dreams of getting rich quickly through trading and are suddenly frustrated when the opposite occurs either because of poor trading skill or relying on luck. Luck can also play a part in winning and losing.
Investing with an expert is the best strategy for beginners and busy investors, as most failures and losses in investment usually happen when you invest without proper guidance. I'm speaking from experience..
I rather invest my money on crypto. Bitcoin trading is great unlike the stock market and other financial markets, bitcoin has no centralized location , since it operates 24hrs in different parts of the world...
The fact that i got to learn and earn from his program is everything to me think about it, it's a win win for both ways...
This is exactly what Big time investors are talking about, not just you. key thing here is to always trades with a good strategy even if the price goes up or down....
Algo bump, thanks KP
It still feels like Scope is one of those things added to CSS to be used as a crutch for people who don't understand or write CSS, and just wanna continue to not learn it. That said, there is a very valid argument for meeting the people where they are. If the reality that most professional CSS is written in the context of some 3rd party framework in javascript, you may as well make it more sane for that usecase.
Great video. Never used scope. Gonna give it a try at some project.
Could you put the context (css) in the title? The thumbnail didn't let me know what the video was about
I wonder how this works with cascade layers. What if I have a button which is in a ‘utilities’ layer, and I have it in a nav and need it to be slightly tweaked when in the nav. I wonder which will win? The cascade layer I assume.
While on the subject of cascade layers I have run in to a similar issue on a site I’m building. I have my buttons in a ‘utilities’ layer (the last layer in my CSS). There’s a button in my nav which has a slightly altered style, but is only ever used in the nav. My nav is in a ‘blocks’ layer. Because of this I can’t tweak the button just for the nav, as the button’s layer always wins. So I had to actually move my buttons to the ‘blocks’ layer before my nav to allow the cascade again. Just an interesting issue caused by cascade layers. I know that’s literally the point of them, but sometimes you need to just tweak something from a utility layer based on the block it’s in, and you can’t.
I suppose in the buttons utility itself I’d need to add a @scope(.nav) and whack the tweaks in there, but then it’s obviously not in a nav block in the CSS where some people might expect to find it.
For the first part of the video, an other solution is to declare custom properties and re-declare it for each scope style and it will be properly scoped.
Really loved the scope in html thing, could be very useful in some cases.
24:32 This looks p great for shopify themes-no js and tons of boilerplate generated id scopes for components
Love this, But seems its not available for firefox browsers - another rule we are going to have to wait for I think.
Why not use sass or less? What are the benefits?
They had to create another css feature because they dropped the ball with @layer, which is useless because so many vendor stylesheets have !important qualifiers.
The inline scope is more useful to set custom properties, I think.
there are many cool features firefox so late, i feel some manipulate invisible hands behide!
I don't really understand how the scope is different to just nesting the css.
Isn't it the same to do
.scope-class {
div {
}
ul {
}
}
inline scoped style is maybe the perfect middle ground
Things I learned from this video:
1. @scope can specify child scope exceptions (to etc)
2. un-named scopes in style tags (super interesting!)
3. "footgun"
-edit-
unnamed scoped styles inside an element (via ) sounds like a great solution for injecting styling for specific parts of a page without those styles taking over the rest of the page. This is something I've needed to do on pages that need unique styles for multiple elements (eg this page has 30 tables that need to be a different colour from the usual tables on other pages). Currently I declare these rules in a style element inside the main and have to add a main.is-post selector before all the rules to make sure these styles don't bleed out to the rest of the page (eg the site header styles) so scoping the whole thing would allow me to remove main.is-post from all the selectors, which would be great!
FWIW Firefox has said @scope is part of their 2024 interoperability initiative so it should (in theory) arrive this year. Which means we can likely start using it next year, depending on how you care about a given version of Safari.
I was solving this by using css properties. Using .light .dark (dark in light) would require a new rule.
```
.light {
--bg: white;
--text: black;
}
.dark,
.light .dark {
--bg: black;
--text: white;
}
.vibrant {
--bg: deeppink;
--text: white
}
```
I then use these variables to set background color and such. I could also add variables for links if they are colored differently compared to the text.
Could you please create one video explaining full Tailwind CSS and also comparison of CSS with Tailwind CSS???
Kevin mentioned many times he is not using Tailwind. In fact many CSS gurus don't use it either. Never saw Adam Wathan - founder of Tailwind getting invited to any of the CSS events which is strange considering Tailwinds impact on the way most people style their apps today
@@alexpanteli3651 I need to learn, requirement is there that's why.
Ok
@@ajiteshmishra0005 what?
@@alexpanteli3651 Tailwind CSS
i remembered scss functions or something like that i learned years ago i really forget it i did something like changing the lightness of a color based on that background color using scss function or idk what was that i would that would be great if u detail it like u do and tnx for every think and all the effort
Scope seems nice but first example I'd refactored to using pallete anyway.
This could potentially replace the BEM naming convention. What are your thoughts?
These things are always cool but I'm also worried if they are supported by all kinds of browsers
in the 'scope' sintax isnt 'except' a better word to use instead 'to' ?
Попробовал, всё работает, спасибо!
you could use a high pass filter for your audio - this video is a little boomy
Did you stop using scss?
what is the advantage of using scope instead of child combinator?
this language is so convoluted... why isn't that the default when nesting selectors
besides you could very well be using directly descendant selectors without much of an issue
CSS as many other old technologies are like a frankenstein. Because it needs to work for all the old content created before it, all the mistakes and bad decisions made before needs to be kept. All that they try to do today is remedy such problems with solutions that doesn't mess up what's already in use. Such problems are likely because of it.
It took them about 20 years to add ways to do layout in a layout language so I don't expect much from them.
What new features would you suggest I learn today? The last new feature I learned was flexbox lol 😂 I think it's time to modernize.
For angular developers, is this the ::ng deep alternative 🤔
You are saying specificity much better these days 😁
Should we start dismissing questions like "have you used BEM before?" during tech interviews? Seems like @scope if the modern way to target elements.
Scoping what's on the same DOM plane feels like just another foot gun.
All solves to a problem that have to be implemented to take effect include their own footguns. Backwards compatibility has a bad habit of creating this problem when languages or syntax changes.
This is not a new concept... Web components does it through shadow DOM, and CSS modules have existed for years at this point, and today frameworks like Astro does it, too by default unless opted-out. The real footgun is using global CSS and having to deal with order of selectors, and end up creating overly specific selectors, or duplicate CSS.
#NorthernGaza_is_dying_of_hunger
how was css day?
Been waiting for this episode 😉 Though now I feel it doesn't make a fix for my issue I mentioned in one of previous episodes any better. For now I'm using:
.my-nav a:not(.btn):not(.dropdown-item)
to force specific components to stay the same wherever they appear in .my-nav. Wouldn't it be better if @scope actually did come before specificity? And if I did want to override it I would do it inside the scope declaration. Like:
@scope (.btn) {
color: #fff;
background: #f00;
// If I want to override .btn styles in my navigation
.my-nav & {
color: #000;
background: #eee;
}
}
At least this way my .btn (specifically ) would be still properly styled if used in .footer where
.footer a {
color: #f00;
}
I feel like for now scope only complicates things and you still have to list all the components you DON'T want the styles to be applied to. Only instead of:
.my-nav a:not(c1):not(c2)
you use:
@scope (.my-nav) to (c1, c2) {
a {...}
}
Sometimes I feel bad that TailwindCSS took over the CSS world, we have less opportunities to write CSS. We end up not getting opportunity to use such features.
That's... not true at all.
Tailwind does not replace CSS-it doesn't replace CSS in the browser. You can still use these features however you like. Tailwind is just a set of utility-first primitives with additional features to allow for theming.
@@dealloc It doesn't replace CSS in the browser, but it does replace the use of CSS by developers. And what determines if we use something or not is the job market. If most jobs require TailwindCSS instead of CSS/SCSS, what's the point of using it if you already know it?
Tailwind is what CSS should be.
You don't have naming problem in TailwindCSS.
Ugly classes ? Use prettier and class hiding plugins and scope css in components.
One of the reasons Tailwind is superior to CSS: using CSS you create many many custom classes and in large projects your CSS bundle just exploding (doesn't scale). Also I notice many people try to reinvent the wheel in CSS - to create their own utility classes (which Tailwind is doing out of the box).
I just feel bad that TailwindCSS is not the standard!
@@AmodeusR > Tailwind is just a set of utility-first primitives with additional features to allow for theming.
Isn't it like using nesting in SCSS?
@scope (.parent) {
.child {
color: blue;
}
}
.parent {
.child {
color: blue;
}
}
Seems like a more complex way of using: :has() :not() :is() etc.
#NorthernGaza_is_dying_of_hunger
#NorthernGaza_is_dying_of_hunger
#NorthernGaza_is_dying_of_hunger
#NorthernGaza_is_dying_of_hunger
#NorthernGaza_is_dying_of_hunger
I can see embedded scoping getting abused in the future.
Naming things just got easier ...
Yay there is only on problem remaining in the webdev world: cache invalidation and off-by-1 errors.
Thanks for your introduction! Writing the styles inside HTML within the scope ist great in some situations, i.e. overriding quick & dirty or while building components. But in general, I would always try to separate structure and styling in different files.
I think embedded style / scope is an extension of the abomination that is style="..." Its good for quick prototyping and testing but not good for professional development and deployment.
Why cant you create videos with length upto 7.25 minutes
Who would have thought Firefox would get under my skin on a daily basis...?
On the surface, this looks like a good idea. It's really not. Breaking specificity rules means people are going to use !important to override styling because they can't understand why just overriding it with natural css hiearchy isn't working.
This is a tool we don't need, and it'll actually cause more issues than it solves. And most of the issues it solves are just from novices/lazy devs who don't fully understand how css works.
The proper approach for overrides like this would be to use css variables that you can modify using standard css selector structure. They provde the same thing as scope without breaking hiearchal rules.
or use tailwind
People will do anything to not use React/Tailwind
Most progress happens that way. For JS we had jQuery, then JS was enhanced, so jQuery wasn't needed anymore. Tailwind and React set new Standards, and the Standard makes likexsome of the things. As developers we profit now that things we do run faster.
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
#شمال_غزه_يعاني_من_الجوع
How is @scope( .light){ :scope making the code simpler and more readable - you are solving a problem that doesn't exist in the real world.
I got 5m into this vid and came to the same conclusion, but I've basically used mostly Tailwind for two years