[beizhia]

From my experience, using utility classes like this just means that you'll have a lot of messy overriding to do when your reusable components need to look different in different places.

Personally I think visual consistency is important and you shouldn't make things look different in different places, but it's not always up to me.

[csande17]

At least React's "pass an object to the `style` prop" makes it relatively easy to do that overriding.

With utility classes, your code has no way of knowing that "bg-red" should override "bg-blue". (And frequently it won't, if "bg-blue" happens to come later in the CSS file.) So people end up inner-plaforming their own clunky solutions on top.

[mxstbr]

You would be surprised how many people do not know that the order of classes in the source file, not the class="" attribute, matters.

See my (totally unscientific, yet scary) poll of my audience, which heavily leans towards frontend with a focus on React: https://mobile.twitter.com/mxstbr/status/1038073603311448064...

Only 43% got it correct!

[jeltz]

If you do not know basic stuff like that how can you even write CSS at all? Trial and error?

[Izkata]

From experience with co-workers: Yep, and lots of !important

[meerita]

Let me see this:

.body--homepage .searchbox { color: red }

but, you use .searchbox on other section and you want it green

.body--article .searchbox { color: yellow }

To me this sounds an akward usecase but you can do this with functional classes no problem: just write the class to the point you want to change on whatever place you are instead of relegating these conditionals to the CSS.