The Unexpected Possibilities with Locally Scoped Properties

[@talhaibnemahmud]

The same trick can be used to manage Light/Dark mode toggle which makes life so much easier

[@WaqarAhmad-jp4mw]

Can you please explain a bit how we can achieve tht

[@ed1nh0]

And that's the beauty of CSS! You always learn something new every time you watch videos like yours. That isolation property is something I'd study a bit further because it should solve an issue I've had in the past. Custom properties is really misused even nowadays and they definitely can solve a loooot of headaches regarding mods, variants and even specificity. Thanks Kevin! You nailed it again! 👍🏼👍🏼👍🏼

[@toddribnek6660]

Good stuff. Two things that you went really quickly over and might need further explanation. Inset defined the top, right, bottom, left properties. Transform scale(0,0) makes the background disappear until the :hover transform scale (1,1) made it visible.

[@KevinPowell]

Yes, good point, I did skip over that pretty fast!

[@ed1nh0]

He already spoke about the inset property before.

[@Neth91]

i just want to put this into all my css and rework my whole project. its so cool

[@clevermissfox]

These locally scoped properties have really cleaned up my css!

[@dave6012]

I wish there was a backend youtube creator who is as good a teacher as Kevin here. I’d be #fullstack in no time!

[@valentepablo]

There's Kyle from WebDevSimplified, he's amazing. But if you talk about going deep into things like Kevin, there's one I know but he's mexican, his courses and tutorials are in spanish :c. Anyways, in case you speak spanish, check JonMirCha's channel!

[@dave6012]

@@valentepablo Kyle isn’t backend. He’s touched on node.js a bit but he’s 90% front-end javascript.

[@ViorelMocanu]

Great, time-saving and complexity-reducing technique, Kevin! Great job, as always!

[@jsuddsjr]

I need to use CSS vars more. Thanks for the tips!

[@gregoryolenovich6440]

Hey Kevin, something really useful you didn't mention (and I find no one really talks about this) is that you can also define custom properties via the html style="--btn-clr: blue;" on an element. This can be super useful in certain instances, like using props in react and lots of other uses.

[@KevinPowell]

Yes, for sure! I'll try to remember to mention it in a video at one point, because that is a great use case 😊

[@Brunoenribeiro]

0:47 kevin is almost rapping the intro by now 😜 10 words per second

[@developerfilip]

At the rate at which CSS is expanding, I will soon allow myself to call it a programming language :D

[@sarahwbs]

Awesome video, so many great little tidbits included 👏

[@ThomKnepper]

This is so fun! I'll definitely be rewriting a whole bunch of css.

[@FaizanAnwerAli]

Can you explain on details about difference between gird area and grid line names not line numbers. And also their usability using single line gird-template: property.

[@kieransweeden]

Loved this! Thank you for such an informative & fun video.

[@rickardelimaa]

It's also easier to just play around with things in the Inspector when you got CSS properties set that affects several elements, let say the animation speed, as mentioned in the video.

[@mrSargi7]

Gonna refactor my css tomorrow after watching this

[@shrishailgharat1964]

Really appreciate this 😭

[@FuzailShaikh]

I remember the days when CSS used to be so simple, it changed so quickly over the years

[@eliseenlaura]

Hey Kevin, what do you do about IE11 not supporting css variables? Do you make a fallback for all of them or just simple: ignore IE11?

[@AdamFiregate]

Great example, thank you!

[@YaroLord]

Hi Kevin, by any chance will there be any more SASS tutorials in the future? I believe stuff like this would be taken advantage of in scss and I barely see any tutorials for it.

[@chanduallada2417]

Such a fantastic explanation 👏👌

[@und0]

Hey Kevin, great video but perhaps you should call "custom properties" "css variables" instead? "custom properties" is a correct term however I think most people know simply as "css variables". Keep it up!

[@majklzumberi1761]

Ot question, how do i handle the 100vh in mobile browsers that have the "chin" (search bar, URL)?

[@HeyNoah]

This is awesome!

[@techwake360]

that was awesome, Thank you so much

[@ShaunLevett]

Just a note. Isolation:isolate did some really buggy stuff in Safari when I used it. Had to remove it. Was causing bizarre layout issues on the page.

[@KevinPowell]

Oh, good to know. You can just throw a z-index and position: relative on there instead until they get it sorted out :)

[@tcgvsocg1458]

Yes i am new here and its really cool

[@cafe-tomate]

Hi Kevin, I've checked the MDN specification webpage and it says IE does not support the var thing.

[@cafe-tomate]

According to the MDN specification as well, scale or scale3d animations should be avoided (or it should be a way to unable them) for the people suffering from headaches

[@muhammadhaziqbinmusa4022]

hi kevin, i love to your videos. I've learn so much things from there. I've some questions. How can i create a responsive background image. If you dont mind, could make a video about that? Thank you Kevin❤️

[@mh_kohansal]

very nice trick. thank's man

[@raghibhussain1375]

Coolest CSS tutorial 👍👍👍

[@alexrafter]

Very nice!

[@TwanvB]

Came looking for frontend goodies, but found gold!

[@wumbl3]

I've been doing this for months :D

[@aprimic]

if you're gonna make the scale y and x the same, why not just use one param?

[@chimchim2_]

I FUCKING love this!

[@NathanHedglin]

Wow how didn’t I know about this? Love the content Kevin! Sadly we still support IE at work 😭 but for everything else!

[@AdamFiregate]

Hi Nathan, which project and environment needs still IE?

[@dandandan01]

@@AdamFiregate I still need to support IE - I work in insurance direct to brokers

[@INT4RGH]

Why does ppl do and not just ?

[@MostlySoftware]

because isn't a valid html tag. while it is technically possible to do it, and there are some workarounds, it's generally considered bad practice to make up your own tags. It can mess with the way google, browsers, and screen readers see the website.

[@PrinjuVaidyan]

Thanks Kevin

[@martinb.1607]

is there any point of SCSS then?

[@ЯМолодец-ъ6ш]

Great lesson) But is there a way to control scope for nested blocks? I mean how to unset a var value back to default for inner elements? I tried this trick to make custom columns system. Sometimes I have complicated grig and I need to put columns into column. And if I changed a var for outer column (to not default), i need override this value for inner columns. But it means that default value will never used.

[@KevinPowell]

You could have a 'default-cols' class or something for now. They are working on scope for CSS, which would do exactly what you want, but for now we don't have that option.

[@ЯМолодец-ъ6ш]

@@KevinPowell Thanks for your answer, I will try) Currently I use next trick: .col-1 > *,.col-2 >*,.col-3 > * {--column: initial;} to reset value. It works fine, but i'm not sure to use cascade is a good idea.

[@forrest_lump]

Isn't it declaring a variable instead of a custom property? I think that --btn-clr is not a property although it's written at the place where normally a property has to be - property:value;. I'm a bit confused when you name it a custom property. IMO it's declaring a variable in the scope of an element (or selector).

[@Anfauglir999]

This was very usefull. thx

[@twrkhanasparukh]

pretty slick

[@zachjensz]

Go make buttons! Stop reading the comments

[@danisob3633]

don't mind me. just studying youtube reply button and input box

[@jamshediqbal7936]

What does isolation property do?

[@siddiqahmed3274]

Creates a new stacking context so that it's child should never escape the element. I hope it makes sense. If you have used before and after and used negative z-index to push them back, i an sure you had probably ran into an issue that they just disappeared (when you only wanted it to go below content). Isolation isolate won't let then disappear.... I hope i an clear enough or i hope someone else might make it more clear to you

[@BrunoMussoi]

Kevin, a fun challenge for you. Not hard, just a lot of work I guess. Replicate your video intro in html with css animations

[@mahmoudalhussain9291]

Hi Kevin, thanks for sharing ur knowledge, is there any extension or an way to detect unused CSS in a website, when i make a performance test to my website using google lighthouse i get this message (remove unused css) and i don't know how to detect it any clue ? Thanks in advance

[@KevinPowell]

There are a bunch of build tools that can do it. I don't know of any extensions, but I also haven't looked. Purge CSS is a popular tool for this, and if you Google removing unused CSS you'll find others too :)

[@mahmoudalhussain9291]

@@KevinPowell thank u for ur reply Purge CSS is the tool that i needed.

[@leojclarke]

I read this as "locally scooped" at least 5 times... lol

[@ciungalunga]

why use SCSS at all if you use css custom properties ?

[@JustPerfectDesigns]

Awesome stuff 👍

[@varunjathin]

Can we use this along with the SCSS $var???

[@KevinPowell]

You *could* do similar-ish things with SCSS variables, but they aren't quite the same, so you might run into some issues. I haven't tried something like this, but I *think* it would work... You can also use custom properties with SCSS as well 😊

[@danisob3633]

cool! thanks

[@alialavizadeh2775]

cool

[@TouchMyTripByAjesh]

Nice 👍

[@melekRebai]

Very nice vIdeo

[@ArielBerloto]

Awesome!

[@KevinPowell]

Thanks!

[@chezchezchezchez]

Does this work on mobile?

[@KevinPowell]

Sure does 😊. Only issue is if you still need to support IE, but *most* people don't need to worry about that anymore. I realize some do, but for almost all of us, it's really not a concern anymore.

[@metallicw2643]

I LIKE THEN WATCH

[@shoaibrehman1348]

love sir from pakistan....

[@S_Singh1303]

First Like😌

[@TerminatorFiles]

Could be even shorter, if you actually used the powers of Sass, like nesting. We see you use the scss format, but still write normal CSS. I suspect you do this for the less experienced viewers... but its still somewhat annoying. Maybe do a lesson about that.