i really like the approach of ONE class + a bunch of data-attributes. not only is it easier to code this way, but it's a lot easier to read the resulting code!
<div
class="Card"
data-size="big"
data-align="center"
></div>
<style>
.Card { /* ... */ }
.Card[data-size=big] { width: 100%; }
.Card[data-size=medium] { width: 50%; }
.Card[data-size=small] { width: 25%; }
.Card[data-align=left] { text-align: left; }
.Card[data-align=right] { text-align: right; }
.Card[data-align=center] { text-align: center; }
</style>data attributes are woefully underused!
And you can easily access them in JavaScript with the HTMLElement.dataset property. You can just manipulate one of these things instead of toggling a random-ass classname or whatever!
all of this is correct and i'll never forgive them for making me add "data-" to the front of every thing but i guess progress comes at a cost.






