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.
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 🤣
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.
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.
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! :)
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!
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
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)
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. 🤣
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 :/
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.
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
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.
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
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!
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
It’s nice to see a great feature already implemented on tailwind being natively supported on major browsers!
Nice job not getting tongue tied saying "specificity" over and over! 🙌
Kevin Powell dislikes this comment.
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.
Congratulations to advance 1 million subscribers 🥳🥳🥳🥳
Amazing, thank you!
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.
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.
Great CSS insights! Nobody tell Kevin 😬😅
Thanks a lot for teaching such an important thing
Awesome explanation! Thank you!
GAME CHANGER, HOW AM I JUST LEARNING THIS!?!?!?!
7:17 bootsCrap - nice freudian slip there
Your explanation are the best
First time knowing about layers!
very interesting, thank you!
Thank you for the simplicity!
@layers has 59% support on caniuse
Excellent content, as always.
Timestamp at 3.35 is spot on ...... try to say specificity is hard enough to say let alone understand.
You're so good thanks a lot man 🙂 i learnt something new.
This is cool. But what about the backwards compatibility? Ios especially is a pain in the ass when it comes to styles incapatability
Why not replace !important with a layer called "important"? Any downsides to that?
hello.. off topic but wanted you to do a javascript async await video. i've gone through your playlists but there's none..
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.
Fresh & modern & intuitive & fast curve of learning = KYLE aka WDS + luxury hair ;-)))))
why haven't i heard of this before?
First viewer! Enjoying your videos man!
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! :)
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.
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.
U r the best
Then how to overridie !important of bootstrap
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 :)
can you make the another tutorial on react testing using jest. I have seen on tutorial already
@layer important 🤔
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!
You are amazing
@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
How is the browser support? I hate when clients use outdated browsers and complain about things not working properly!! 😠
Nice
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)
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. 🤣
What are use cases for nested layers? And where we need to order them?
Looks like scss wrapper
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 :/
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
Important had to be different
CSS can be used in making advance animation, but SCSS/SASS is better over normal CSS.
Does it also work if you want to overwrite css rules from an external library within React css/scss modules?
With layers I don't need Kevin Powell no more! Jk
does it works on SCSS?
First viewer since your video starts
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
Can you please make tutorial on redux toolkit that do crud in array without making any api calls
Did you just scoff at bootstrap? 😆
Boots"Crap" code (^_^)
Hello
So like just Sass ryt
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.
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
4th
does anyone know anything closer about this guy? His profession? Sometimes I feel like he can do everything
is it me who is very slow or is the video really really fast? :-)
He talks fast but you can slow the video down.
888K subs
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!
I hated CSS but now I hate it more..........
This could’ve been taught in 2 minutes
people that develop CSS, never disappointed me by releasing broken bs features.
Oh man , is anyone catching you !? Toooo much fast talking 😳🙄🥺🤐
He talks fast but you can slow the video down.
First