CSS Layers Are Changing How Specificity Works

Specificity in CSS is a pain to deal with, but that doesn’t have to be the case anymore. With custom CSS layers you can create your own specificity hierarchy which makes writing and overwriting styles so much easier.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:50 - CSS Layer Basics
03:45 - Custom CSS Layers
07:06 - Using Layers With External CSS
10:58 - Using Important In Layers
12:08 - Nested Layers
13:22 - Browser Support

#CSS #WDS #CSSLayers

[hugoanderkivi]

Didn't think it was possible to make me hate !important even more, but you have done it.

[MajorRushMore]

Nice job not getting tongue tied saying "specificity" over and over! 🙌

[_the_one_]

Kyle your teaching style is amazing! I wish you could teach a little us some Sveltekit content! I know that you are more into React and personally I am more into Vue but man, Sveltekit is amazing! Please add some content related to it.

[VinceAggrippino]

7:17 "Boots-crap code"... I agree completely with this review 😁

[JuanIGN]

Today on my work, I got some messy css old code that I need to improve and I had some problems with libraries… I will test this tomorrow and if it works I will be happy 😂 thanks for share and it’s crazy that you uploaded it the same day I encounter this problem 🤣

[sumandutta]

Congratulations to advance 1 million subscribers 🥳🥳🥳🥳

[dave]

Great CSS insights! Nobody tell Kevin 😬😅

[goffyfoot]

Timestamp at 3.35 is spot on try to say specificity is hard enough to say let alone understand.

[paxdriver]

Why not replace !important with a layer called "important"? Any downsides to that?

[danielm]

Very cool. What sources do you use and/or recommend to keep yourself up-to-date with state of art web dev (besides your amazing youtube channel :)?

[andyschulze]

Thank you. Very well explained! However, I am aware that long tutorials don't sell, but could you please slow down a little next time!? :D It was a bit hard to follow along. Anyway: nice work! :)

[fadhilh]

Do you have any tips to improve CSS skill? I already have basic CSS, but sometimes I still struggled to implement some CSS property. Any tips is appreciated.

[mannumannu]

Then how to overridie !important of bootstrap

[andyschulze]

Oh, and here is a question: you said that the important! rule inside bootstrap messes the whole thing up, since these rules are applied the other way around. But if so, I can never include an external CSS-library, because I can never gurantee, that they won't use important! in their code, right!? :/

[alvaroprietovideos]

Wow! That is very interesting! Do you know if there is something to prevent css contamination? Something like isolated scopes, or some kind of easy and clean css reseter? Thank you!

[MrCC-hxxr]

Fresh & modern & intuitive & fast curve of learning = KYLE aka WDS + luxury hair

[TheGarageboyz]

First viewer! Enjoying your videos man!

[yadusolparterre]

Please tell me if I am wrong... If you put Bootstrap inside the lowest layer, it is impossible to override any of its rules that have the "!important" keyword in the higher layers... But since Bootstrap uses "!important" in virtually every single rule, I guess that it's useless to import it in a layer... Am I right?

[QwDragon]

What are use cases for nested layers? And where we need to order them?

[codehan]

Does it also work if you want to overwrite css rules from an external library within React css/scss modules?