Good explanation, does working with a large number of @import rules not make any project slow to load, due to the multiple requests that @import makes?, and much more if it is used and works with vanilla CSS?. Well greetings and thanks for the material that is very helpful to me personally.
Thank you! In my case, it's not an issue because it's Astro, so it bundles the CSS when you build it. In a Vanilla context, it's not the best practice to have a lot of imports.
Since you use a framework like Astro, is there a big benefit in using @layer anyway? In my project, most styles are scoped to the components and I just import a global.css
There's no huge benefit, but being able to import utility classes into the main global stylesheet and have them apply last is pretty nice. That's the only thing that comes to mind. But also... I have just one utility class so far. I'll only refactor the site to use @layers if I have more.
To me css @layers are unusable for the way it deals with !important. Instead of weakening it, it made it stronger. Not only it’s a problem with plugin css files, but team members with less css knowledge will use that !important strengh to abuse it even more.
Yeah, it is not the most intuitive. There is logic behind it, though; check out this article: css-tricks.com/css-cascade-layers/#important-origins-context-and-layers-are-reversed. I totally agree with you that the entire team has to be fully onboard before switching to layers.
While I understand this problem, I think it would be more fair to criticize the overuse of important declarations, rather than how layers handle them. When you use `!important` you tell the browser “reverse the entire cascading order for this specific property”, which means that the layer order also get reversed. This is in line with how `!important` always has worked, and changing that behavior only because of a new feature would likely cause confusion among those who have learned to use `!important` the way it was intended. Sometimes I find `!important` useful also in cascade layers, especially when dealing with media features such as `prefers-reduced-motion`, `prefers-contrast` or `forced-colors`. With `!important` you can safely use them in layers that are normally low priority.
More over-complication of something that should be, and used to be, so simple. However, great video and informative!
Good explanation, does working with a large number of @import rules not make any project slow to load, due to the multiple requests that @import makes?, and much more if it is used and works with vanilla CSS?. Well greetings and thanks for the material that is very helpful to me personally.
Thank you! In my case, it's not an issue because it's Astro, so it bundles the CSS when you build it. In a Vanilla context, it's not the best practice to have a lot of imports.
Since you use a framework like Astro, is there a big benefit in using @layer anyway? In my project, most styles are scoped to the components and I just import a global.css
There's no huge benefit, but being able to import utility classes into the main global stylesheet and have them apply last is pretty nice. That's the only thing that comes to mind. But also... I have just one utility class so far. I'll only refactor the site to use @layers if I have more.
Lightningcss replace preset env
Does it treat @layer differently for older browsers?
I think you could like @ scope
Yeah, @scope is amazing. I'll cover it in one of the next videos.
@@dmtrmrv another issue I found is that @layers is poorly implemented in Opera. You may want to take a look at it.
To me css @layers are unusable for the way it deals with !important. Instead of weakening it, it made it stronger. Not only it’s a problem with plugin css files, but team members with less css knowledge will use that !important strengh to abuse it even more.
Yeah, it is not the most intuitive. There is logic behind it, though; check out this article: css-tricks.com/css-cascade-layers/#important-origins-context-and-layers-are-reversed. I totally agree with you that the entire team has to be fully onboard before switching to layers.
While I understand this problem, I think it would be more fair to criticize the overuse of important declarations, rather than how layers handle them. When you use `!important` you tell the browser “reverse the entire cascading order for this specific property”, which means that the layer order also get reversed. This is in line with how `!important` always has worked, and changing that behavior only because of a new feature would likely cause confusion among those who have learned to use `!important` the way it was intended.
Sometimes I find `!important` useful also in cascade layers, especially when dealing with media features such as `prefers-reduced-motion`, `prefers-contrast` or `forced-colors`. With `!important` you can safely use them in layers that are normally low priority.
@nilaallj Yeah, I agree. While the way !important works in layers isn’t exactly intuitive, it does have a logic to it.