The Unexpected Possibilities with Locally Scoped Properties

Custom properties are a game changer to how we write CSS. When we declare them globally on the :root it's one thing, but I find the real power comes up when we start using locally scoped custom properties.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:59 - Locally scoped custom properties with fallbacks
04:53 - Stepping things up and exploring them more

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[talhaibnemahmud]

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

[ednh]

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! 👍🏼👍🏼👍🏼

[toddribnek]

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.

[Neth]

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!

[ViorelMocanu]

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

[gregoryolenovich]

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.

[dave]

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

[jsuddsjr]

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

[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

[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?

[kieransweeden]

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

[sarahwbs]

Awesome video, so many great little tidbits included 👏

[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.

[FuzailShaikh]

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

[ThomKnepper]

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

[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.

[mrSargi]

Gonna refactor my css tomorrow after watching this

[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.