[nailer]

Regarding the choice of class names: you are using using wrapper elements routinely, outside absolute edge cases like border gradients, you don’t have current CSS skills. As mentioned previously current CSS means you can have a 1:1 match of HTML element to UI element for the vast majority of layouts, no wrappers required.

Current gen frameworks will put the styling inside the component so styling is literally a matter of scrolling down.

  <div class=“login”>

…

  .login {
    padding: 12px 6px;
  }

Yes you need to know the order I’ll give you that. Still less overhead than adding tailwind.

[ducharmdev]

Ideally all components would be small bite-size pieces, where scrolling down wouldn't be a big deal. But in practice I could still see it being tedious, scrolling through a bunch of classes to find the one you care about.

Now if there is a go-to-definition for CSS classes, that would be quite useful. But I appreciate that I don't have to even think about putting a name to my styles with Tailwind.

[nailer]

It’s a login box. There will be a login box, and two inputs, some instructions and a place for errors.

  .login, input.username, input.password, .instructions, .error

If it’s a sea of nested divs, so it’s hard to find the right element (a common pattern among “I just know react” developers), then fix the sea of nested divs.

[antihero]

Ah but then you would have to remember and repeat those exact pixel values every time you pad something and update them in every place if you decide to change it. Or build your own system of variables in CSS, or use some awful CSS in JS solution.

Also means you have to think of a name for every component you want to apply style to which is surprisingly tedious.