[dbbk]

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

[9dev]

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]

But we're talking about Styled Components

[9dev]

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]

I'm comparing Styled Components and Tailwind and you're off talking about some other third thing

[chrischen]

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]

> 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.