3 ms·
"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-6
by techbubble 6y ago
"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">
- epicureanideal 6y agoI avoid Tailwind-style CSS frameworks. I prefer SCSS and, if needed, mixins. Meaningful class names are much better, IMO.
- runarberg 6y agoThis 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.