[sangnoir]

What if want to use the primary color as the background-color to a nav element and as the border-color to inputs and textareas as well? If the designer changes to a different shade, do you do a global search-and-replace?

The way I see it, CSS preprocessors allow for code reuse via composition - vanilla CSS restricts you to inheritance.

[tonyhb]

Css is quite frankly bullshit (ie. fickle), but I'm proud of it.

The actual art of making visuals usable within a screen is pretty hard to make a language out of. With postcss and react css modules there are advancements. And still, it's one of the things that I have to put the least amount of effort in for the most amount of gain.

[BinaryIdiot]

> What if want to use the primary color as the background-color to a nav element and as the border-color to inputs and textareas as well? If the designer changes to a different shade, do you do a global search-and-replace?

I already explained this? You set it at the top level. Have a set of top level HTML elements / classes that set all of these defaults. Then everything inherits from those. Only one place to change them.

[sangnoir]

> I already explained this? You set it at the top level

Not quite: 'color', 'background-color' and 'border-color' are 3 separate properties that can't be be inherited from one place using vanilla CSS

[BinaryIdiot]

Those are three different ways of coloring something (and very rarely are exactly the same in my experience). Using variables to make those three the same color is an abuse of DRY in my opinion.

[sangnoir]

> Using variables to make those three the same color is an abuse of DRY in my opinion.

I disagree - as a matter of fact, a lot of CSS frameworks have the concept of a "primary color" that is used in the manner I have described. Additionally,following your idea of DRY would render CSS variables pointless in CSS preprocessors as mixins cover that use-case (setting the same property).