4 ms·

Why does the name matter? If it's a Wrapper or a Container or an InnerWrapper or whatever. It's just a 'label'.

• 9dev 3y ago
  Because there is a Stylesheet called main.css with 5000 lines, and somewhere in there is a block like this: .InnerWrapper { padding: 3px 7px; margin-left: -9px; } The design just got a makeover, and you’re tasked with updating all buttons to have a wider spacing. Good luck catching everything, including this class and its usages, without manually reviewing everything that is used like a button, inspecting the HTML, then going over the classes, one by one, without breaking some unintended side effect.
  • dbbk 3y ago
    But we're talking about Styled Components
    • 9dev 3y ago
      No, we're not. I responded to your second statement, starting with "Tailwind, on the other hand", and I'm arguing against some of the unfounded criticisms here.
      • dbbk 3y ago
        I'm comparing Styled Components and Tailwind and you're off talking about some other third thing
• chrischen 3y ago
  When you label something the implicit purpose is that it is now reusable. But an InnerWrapper class defined within a React component should be private and not actually reused, whether you are using global styles or css in JS (because it should be a private implementation detail—otherwise the component consumer has to also figure out the classes to apply).
  • dbbk 3y ago
    > When you label something the implicit purpose is that it is now reusable. What makes you think that? I wouldn't use a wrapper element from a different component in another component. At some point you just have to use common sense.