New CSS features to know for 2025

Great video. I was thinking about this technique to override bootstraplike frameworks with importants though. If you have such framework, isn’t it always loaded first? I.e. you can define the layers order but at that point the framework is already loaded?

I remember you struggling to say specificity, I think there is actually a dedicated video about it, glad you're saying it with ease is.

!important; on crack

Great video. Better shirt

I think this technique will either make thing simplier, or mess up the CSS LOL
and btw !important is still evil..damn boostrap

Is there, or will there be a way to import an external css like this: <link rel=”stylesheet” type=”text/css” layer="bootstrap" href=” bootstrap.css”> ?

This sounds like a pain and a blessing at the same time.

This is confusing, but.. still interesting!

Specificity: 31
Specificicity: 0
You've set a new record Kevin!

html * {
font-size: 16px;
line-height: 1.6;
}

No more !important; ? :/

Great video again. not an easy subject to explain, but Kevin battles through and gives everyone a good understanding . thank you. its nice that the video isn't too long either

To me it looks like a and !important block lol

This is brilliant! Makes CSS specificity far less mysterious - when you find yourself searching through modules. Now nodules are essentially layered namespaces. Thank you for the clarity.

Kevin, I will be looking for a front-end designer very soon for our animation festival that will feature our selection online.
Perhaps someone in your comments is proficient enough and reasonably priced.?!

so lit t-shirt, man!)))

CSS specificity is one of the easiest things on Earth.

you can easily give a value of inherent to the a, to avoid that specificity issue

I find that it's a great addition for people who are new to CSS, since it makes things more organized, and it makes it easy to deal with problems quickly. Though having said that, I still think that not using it is better if you have the time to write organized and structured CSS, since less lines of code would be needed, and layering could be done through splitting up your stylesheet into multiple ones.

Thank you for the video, I found it very informative! ✌🏼

Very clear, as ussual. Thanks Kevin

If the js can access @layer then it will be totally gane changer i think 🙄

For a second I was afraid that Mozille would introduce (document) layers again... It's the stuff nightmares are made off!

This is HUGE!

I just wish there was a way to undo !important in CSS - for those times where you work on legacy code and old projects where a client has been puking !important tags all over everywhere they couldn't figure out how specificity actually works - or you know, just because... Because you dont really just wanna go in and remove them all as you could end up breaking something else, because its not like they wrote any tests or snapshots to tell you when something gets broken either - and some clients have systems that go back 2-3 decades and just simply have too much code to realistically be able to know all the places that would rely on that style rule...

is there a way to check if said framework is using layers? and if not, a way to wrap it?

Something that's missing from this video is that you can set a layer to imported CSS files like "@import 'utilities.css' layer(utilities);". So you could import the CSS from a component library this way and have an easier time overriding some styles it defines.

is there a way to set a level of importance? such !important Lvl 9

This will save me Kevin, I'm working on an old project with such bad css practice. I will create my layer and voila! :D

Hate it

The reason unlayered rules have higher specificity is because they get put inside an anonymous layer that is below all other layers

Very important video thx

this video was one year ago and i didnt even know this was existed
this will be a life changer

thanks for the explanation and examples. Extremely handy!

Wait. Does this mean i can finally throw away all those god awful CSS-in-JS libs?!

Lovely explanations! I understood better than when read from Tailwind, for instance.

I didn't like that selectors outside a layer have higher specificity, it should be the opposite

Excellent video. Thx a lot!

With this make it easier to manage dark and light themes?

What lorem are you using?

the browser support is good for this feature so we can use it now :) great video!

Thank's Maestro

it would be nice if we could put a class-layer="isolatedLayer" on an element, and then that element and its children would ignore any author styles css rules not in a specified layer (and maybe even an inverse of that to ignore certain layers), so if you had bootstrap on the page and its screwing with something, instead of trying to counter it, you could have a div that completely ignores those bootstrap styles (i always have issues where a site designer has used tag name style definitions, and it screws up my apps styles, to be able to easily switch off some styles for an area would be a lifesaver.

or maybe instead of/as well as on the element itself, having the css definition be able to do something like that.

The fact that un-layered classes always have greater priority makes this feature nearly unless with any legacy code of much size. Shame, wonderful feature if they reversed that so layered items always were first in priority over non-layered. Only solution for a legacy site is to come up with new class names and semi-by-pass the legacy code which it a ton of work, would have been lovely if layers sat on top of the priority stack :( -- oh what could have been so easy

I've watched a lot of your videos and found them very useful, so please keep up the amazing work.
But I would like to see performance considerations with some of the features that you have addressed in your channel, and maybe some properties that may alleviate these such as 'will-change' etc

Bootstrap = bootcrap

Great content = subscribed!

Thanks for video! Can you share this courses codepen link? (Maybe it’s me who don’t find it)

unusually horrible explanation, but somehow I managed to understand so thank you I guess