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"> 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);
}