CSS Custom Props Good Practice

First off, I recently found out that local custom properties in CSS can be inherited by child elements, and I’m honestly blown away 🤯.

Second, I have a CodePen with a snippet that illustrates my question. Is it considered best practice to set custom properties on elements and then modify their values with inline styles? Everywhere I look, people advise against inline styles, so now I’m unsure if this case is an exception or if there’s a better approach.

I set --_hue: 10 local custom props inside .card element, then i changed the colors of the two others elements with inline-styles

https://codepen.io/bavosadev/pen/vYoQPvy

please ignore all random values, i just wanted to play with calc() a little
Was this page helpful?