Turning off inheritance on custom props is more useful than I'd thought

I didn't really get why you'd want to turn off inheritance of custom properties at first, but now I get it!

🔗 Links

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

[nustaniel]

My main love for properties is the possibility to animate things we normally couldn't. While percentage is a syntax already, sometimes it can be nice to use the number syntax and values between in example 0 and 1, and then use calc(var(--property) * 100%) or something along those lines. With a transition set to the --property, animating linear-gradients and the likes just works. Properties are one of my favorite things now that Firefox unglued their butts and added support (just recently). Now we just got to wait for calc-size() and for Firefox to spend 3 additional years to implement it.

[MattDunlapCO]

I can anticipate the argument that changing inheritance breaks expectations because so much of what we use custom props for relies on inheritance.

[tommysmith]

I didn't understand a word of that - I guess I'm going to need to check out custom properties and then come back to this video!

[justindouglas]

We really should take about this more i came across this not long ago and didn't even know it existed. More video's about this. Also maybe it be fun to do a wordpress like video where you build a theme and style it😂.

[caleb-pq]

kevin, do you use some frameworks to? like react?

[MattDunlapCO]

Building components, we often use custom props as arguments to modify behavior. It's worth noting that this requires that the prop is set on the element being styled, which means you can't set non-inherited props on the component root as we usually do.

[amdjed_mijoukh]

I tried reproducing the same thing ( grid auto adjustment based on their attr and it did not work for me, if anyone can help me) the inner container adjust to 3 grid but the bigger container stays at 1 column with the inner one below it and the inheritence didn't occur.

[advanced-developers]

Hello Kevin, how can I copy the CSS animations, JavaScript or jquery animations from any website, is there any chrome extension or tool?. Thanks

[DocGenius]

I'm surprised you didn't ran into this issue before with your .flow class. I use the same and several times I had to manually reset --flow-space to its initial value of 1em (and find a selector for this) because I changed it for a specific element. Now this problem is gone.

[zutezzpixelproduktion]

Things mentioned in this 3min video deserve a 30min video each. 😂

[Alex_Eicher]

Is your shirt the target computer of Star Wars?