On: CSS Utility Classes and “Separation of Concerns” (...

[meerita]

Give me an example of that.

Would you mantain .display--block? how? .color--red?

[jameslk → meerita]

It would be some domain-specific component. Like .product-card. I don't see the examples you've given. Those are so literal, you might as well use inline styles at that point.

[meerita → jameslk]

That's the problem functional CSS solves: class naming doesn't relay on developer intervention, it's just a translation of the utility.

Product-card is not an utility, that's why it's a problem to maintain such classes.

[Izkata → meerita]

Changing the saturation of the red and causing it to look messy alongside surrounding elements/images? Or introducing colorblindness concerns elsewhere in the app?

[meerita → Izkata]

That means two things: you need extra utitilies to have different reds or, you don't mind to adjust the same red that will impact in the rest of the website. As a designer I do this all the time. If my design is complex to the point I would need several reds, then i would use a different value in the class name, like numbers or other options.

Then my workflow for that case would be: create the new color value, compile the CSS, change the class name in those places where I want to use the new red.