Don't Use @layer in CSS! (until you know these two things)

In this video, we cover how layers help organize your CSS. We also talk about two big drawbacks that can mess with your setup if you choose to use @layer.

Chapters:
00:00 – Intro
00:06 – Quick Overview of CSS Layers
01:07 – Layer Structure (Global, Elements, Components, Utilities)
03:05 – Real-World Example
06:29 – Drawback #1
08:49 – Drawback #2

#css #webdevelopment, #frontenddeveloper, #csstutorial, #csstips, #moderncss, #cssbestpractices, #csslayers, #cssframeworks, #responsivedesign, #cleancode

[KeganVanSickle]

More over-complication of something that should be, and used to be, so simple. However, great video and informative!

[nelosanjines]

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.

[kelindrawn]

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

[mikeonthebox]

If importing to the layer "framework" is an issue. What would happen if you don't place it on a layer at all?

[HarryPujols]

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.