5 ms·

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 diffe

• csande17 7y ago
  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 7y ago
    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?lang=en https://mobile.twitter.com/mxstbr/status/1038073603311448064... Only 43% got it correct!
    • jeltz 7y ago
      If you do not know basic stuff like that how can you even write CSS at all? Trial and error?
      • Izkata 7y ago
        From experience with co-workers: Yep, and lots of !important
• meerita 7y ago
  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.