[techbubble]

"div soup" – I like that.

The present-day CSS frameworks use "class soup."

For example, tailwind (which I like):

  <button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline">

[runarberg]

This sort of class soup brakes the principal of DRY. Much better to use CSS to style.

    button {
      --background: teal;
      --focus-ring:
        2px 2px 5px skyblue,
        -2px -2px 5px skyblue;

      background: var(--background);
      box-shadow: none;
    }

    button:hover {
      --background: wheat;
    }

    button:focus-visible,
    button:focus:not(:focus-visible) {
      outline: none;
    }

    button:focus-visible {
      box-shadow: var(--focus-ring);
    }

Now you will never forget to add that `hover:bg-teal-600` class to your buttons.

[epicureanideal]

I avoid Tailwind-style CSS frameworks. I prefer SCSS and, if needed, mixins. Meaningful class names are much better, IMO.