Using CSS custom properties like this is a waste

Custom properties are amazing, but a lot of people don’t take advantage of how awesome they are. They set them up in the :root and that’s it, but they can be so much more useful than that! So, in this video I explore how we take them up a notch and make our code a lot more efficient in the process.

🔗 Links

Disclaimer: Some of the links above might be affiliate links, which means that I'll receive a commission in case you like and decide to purchase the product or service. This comes at no extra cost for you, and helps support my channel 😊

⌚ Timestamps
00:00 - Introduction
01:45 - Setting up locally scoped custom properties
07:30 - Why this is so useful
11:00 - iCodeThis
11:40 - Changing one value instead of redeclaring property
14:10 - Creating new variations is so easy

#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!

[ChrisShawUK]

I don't quite get the benefit of using the private version. If --shadow is the design token for shadows in the project, then why not just use that and redefine in local scopes like you have?

[egorkloos]

Very good demo on how to utilise this.
I’ve been doing this for a while and a big win is coming back over time and making changes. So much easier to understand.
I end up with three groups per component. ( 
- Private custom props with corosponding registered properties
- Rules with the private props
- modifier that set the registered properties.

[lewis]

I always love your videos and pretty much always agree with your opinions. But in this instance I think this method is more confusing.

[WraShadow]

I do like your way of applying custom variables and that is what I often use myself. However there are cases where just having the directives is much better. One such case is the backoffice my clients use, that is because they like to customize absolutely everything and just applying a class with the color, or background, or hover effects and etc becomes less cumbersome and lighter than declaring all possible options.

[CHRISJACKEM]

This is introducing spaghetti into your styles, thanks for the idea though.
Also, you would have to explain with comments for others working with your code, I can see this turning into a mess quickly

[tspander]

What's the benefit of the private variable over just declaring --shadow: red; and then overwriting it in the other classes?

[alex_chugaev]

I use this approach in conjunction with angular component’s bindings. Works like magic.

[elixpo]

First of all -- amazing video..
...Please do include 00:00 timestamp in the timestamp pannel in your description or else they won't show up in the video
...and truly it was an awesome detail for me, it would be amazing to explore css this way.. time to include these in projects xD... thanks man! ❤️

[daveb]

It's ok to define a color pallete with variables, but I definitely recommend defining a semantic palette on top of that for components to use. The semantic palette can be assigned at runtime for different color schemes (high contrast, dark mode, etc), and components don't need to know anything about the actual colors.

[chrsbll]

I'm confused as to why you wouldn't use the same approach for box-shadow. Surely you could declare the following:
.plan {
box-shadow:
...
-1rem -1rem 0 0 var(--shadow);
}
and then add each custom property to the modified selectors as with the others? Then you wouldn't have to redeclare each box-shadow rule every time.

[mityukov]

I like those *--modifier selectors containing only the variables redeclaration, but I'm still not sure why do we need them "pseude-private" properties. Would it work the same without underscored versions?

[nekomew]

This is an interesting approach, having _ as private properties is such a neat trick. Will try to incorporate into my future projects. Am already struggling with multiple css variables naming as I have so many. Like --js-varname are JS controlled variables and --d-varname are derived variables that often are a calc(), clamp() of a number of other variables so on and forth.

[MaskedMuchacho]

I'm personally not a fan. I like inheritance, however I think its less readable. You'd read --shadow: 'color', but shadow of what? You'd have to scroll in your css file or basically debug inside dev tools to know where and how it is used.

[JeremyChone]

Very nice technique. I will definitely adopt this one. By the way, what is the "--" and "__" convention?

[melodium]

How to have a deep and attractive voice like you using HTML & CSS?

[franklinsecretario]

This person deserve all the frontend development subscribe button!!!.. I've just recently found YT channel and i found it very helpful!! discovering new things and learning some tips and trick from you amazing! Thank you for sharing all your knowledge to us

[hearstboy]

My goodness, CSS sure has improved a lot in the past 10 years or so since I last really dabbled in it!

[mohamedmagdy]

I have learned this technique from your css demstified course and I really like it and I love the fact that you are making it on YouTube also and to see how you also evolved in thinking from that point
You are really awesome kevin

[adeptiworks]

I prefer to prefix pseudo-private properties with a block name instead of an underscore, so it would be --plan-shadow: var(--shadow), and so on

[rossclutterbuck]

Not sure the pseudo-locally scoped custom property really adds anything here if you're ultimately just using classes to set their values anyway.

.text-red {
--my-text-colour: red;
}

.text-green {
--my-text-colour: green;
}

p {
color: var(--my-text-colour);
}

Is this just what you're doing anyway? Why mess with the additional properties local to p?