CSS Layers Are Changing How Specificity Works
Vložit
- čas přidán 16. 05. 2024
- FREE CSS Selector Cheat Sheet: webdevsimplified.com/specific...
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:
FREE CSS Selector Cheat Sheet: webdevsimplified.com/specific...
CSS Specificity Video: • Learn CSS Specificity ...
CSS Specificity Blog Article: blog.webdevsimplified.com/202...
Cascade Layers Blog Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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
7:17 "Boots-crap code"... I agree completely with this review 😁
he really said that :D
Didn't think it was possible to make me hate !important even more, but you have done it.
YESSIR
Why in the WORLD would they implement it like that? My god
Nice job not getting tongue tied saying "specificity" over and over! 🙌
Kevin Powell dislikes this comment.
It’s nice to see a great feature already implemented on tailwind being natively supported on major browsers!
Thank you for the simplicity!
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.
Awesome explanation! Thank you!
Amazing, thank you!
Interesting feature and nicely explained. I found that adopting the ITCSS approach solved my specificity issues. The possibility to "layer" a third party framework is interesting though, especially if they've written overly specific selectors.
Thanks a lot for teaching such an important thing
Your explanation are the best
Excellent content, as always.
You're so good thanks a lot man 🙂 i learnt something new.
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 sooooo happy 😂 thanks for share and it’s crazy that you uploaded it the same day I encounter this problem 🤣
bad news... experimental thing not ready for production 😂 will wait till supported to all browsers.
very interesting, thank you!
Congratulations to advance 1 million subscribers 🥳🥳🥳🥳
First time knowing about layers!
What are use cases for nested layers? And where we need to order them?
Timestamp at 3.35 is spot on ...... try to say specificity is hard enough to say let alone understand.
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.
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!
can you make the another tutorial on react testing using jest. I have seen on tutorial already
Does it also work if you want to overwrite css rules from an external library within React css/scss modules?
Great CSS insights! Nobody tell Kevin 😬😅
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 :)?
A designer/developer should never reveal their sources 😛
@@sicfxmusic So you're saying it's like asking a drug dealer where he gets his drugs :)
@@danielm1 :)
GAME CHANGER, HOW AM I JUST LEARNING THIS!?!?!?!
@kyle This is nice, but how can i put css in multiple files in the same layer? define the layer with same name everywhere?
I’m confused at the end. Does “@layer utilities.anotherLayer “ reference the same layer above it ? ie “@layer utilities {@layer anotherLayer{…} }”? Or utilites.anotherLayer completely separate and just one long name that isn’t related to the former ?
Eg.
” @layers utilities, utilities.anotherLayer, frameworks, etc”
@layer anotherLayer, frameworks, etc
hello.. off topic but wanted you to do a javascript async await video. i've gone through your playlists but there's none..
@layers has 59% support on caniuse
This is probably a dumb question, but is there any way to access a component(next js) in _apps.js from other pages? I want to move the change theme button to a menu, but can't figure out how to do it :/
Why not replace !important with a layer called "important"? Any downsides to that?
First viewer! Enjoying your videos man!
7:17 bootsCrap - nice freudian slip there
U r the best
You are amazing
This is cool. But what about the backwards compatibility? Ios especially is a pain in the ass when it comes to styles incapatability
Then how to overridie !important of bootstrap
WTH. I always thought the later (higher line number) the style comed in the sheet, it will override earlier styles. First time I learn about specifity. This explains so much... why I had to resort to using !important even though I know I shouldn't need it, if I "order" by css right...
If the selectors are of the same specificity, then it goes by whichever selector comes last (order based), although, if specificity is higher then the order in which it's defined doesn't matter.
Nice
@layer important 🤔
why haven't i heard of this before?
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!? :/
You can define a layer before the layer in which you import bootstrap. In that first layer you can create !important rules which will overwrite the bootstrap !important ones.
But the best thing is for frameworks to not use !important in their css. But that might take their developers some time to take out. (If it was easy they probably wouldn't have put them in in the first place)
Basically like !default in sass
[11:10] ok we need @veryimportant j/k. Hmmm not sure if this reverse of importance is a good call or a mistake by those in charge.
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! :)
How is the browser support? I hate when clients use outdated browsers and complain about things not working properly!! 😠
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?
I believe you could put Bootstrap inside its own layer and then define the rest of your styles at the top level. Then your own styles would be considered more specific.
@@ogreeni no because !important will override from the bottom layer to the top and not the other way around
@@yadusolparterre yes, but would it override everything including code that is not within a layer, or only up to the upmost layer?
@@ogreeni good question, I don't know
Fresh & modern & intuitive & fast curve of learning = KYLE aka WDS + luxury hair ;-)))))
Now having watched the last part about nested layers and !important in layers I'm going to buy stock in Tylenol and any other company selling headache medicine. 🤣
Important had to be different
With layers I don't need Kevin Powell no more! Jk
CSS can be used in making advance animation, but SCSS/SASS is better over normal CSS.
Looks like scss wrapper
Can you please make tutorial on redux toolkit that do crud in array without making any api calls
First viewer since your video starts
Hello
does it works on SCSS?
Did you just scoff at bootstrap? 😆
So now instead of having !important scattered all over the place devs will start adding non-layered styles whenever they are in a bind and have to override something. Only now there is no way at-all to override non-layered styles except with other non-layered styles plus specificity? And so !important will still get used. Isn't that what's going to happen when this isn't managed properly? lol
Boots"Crap" code (^_^)
So basically you cannot overwrite both !important and non-!important styles. Since 3rd-party CSS might have both, that makes CSS Layers pretty much useless.
4th
The layer ordering doesn't make sense, logically the most specific layer would appear first not the other way around.
888K subs
Very cool, but could you use a different color other than red?
3 giant red rectangles on a white background during the whole video really hurt my eyes, and make it harder to watch
So like just Sass ryt
is it me who is very slow or is the video really really fast? :-)
He talks fast but you can slow the video down.
does anyone know anything closer about this guy? His profession? Sometimes I feel like he can do everything
Second
First
I love your vids, am a subscriber, but my God you talk and teach so fast! I'm slowly learning, so it's probably my fault. I wished you would talk/teach slower. Love your teaching though, Kyle!
Oh man , is anyone catching you !? Toooo much fast talking 😳🙄🥺🤐
He talks fast but you can slow the video down.
people that develop CSS, never disappointed me by releasing broken bs features.
This could’ve been taught in 2 minutes
First