Kevin Powell - Community•2mo ago

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

2 Replies

clevermissfox•2mo ago

Usually I’ll only use inline styles for this if it needs to be dynamically updated on a bunch of items from JavaScript, for example a JavaScript loop if not using SCSS. Eg looping through and setting a hue or degree for positioning or a view-transition name etc. For your example , I would just define the different —_hue in css

:nth-child(2 of .card) {
—_hue:50;
}

:nth-child(3 of .card) {
—_hue: 155;
}

:nth-child(2 of .card) {
—_hue:50;
}

:nth-child(3 of .card) {
—_hue: 155;
}

vinicius!OP•2mo ago

yea that actually makes more sense than using inline-styles to apply dynamic styles thanks @clevermissfox

Gaming

Programming

CSS Custom Props Good Practice