Sorry but this example is just bad <button onclick="this.classList.add('bg-green')"> Click Me </button> First of all people might have difficulties wi

Sorry but this example is just bad <button onclick="this.classList.add('bg-green')"> Click Me </button> First of all people might have difficulties with the color green. So do you add alternatives as well, maybe with media queries, right here inline in HTML? Or do you just use the class *active* as in the discouraged example? And then you could make it even more accessible by providing aria attributes to signify the the active state. Depending on the use case you might not even need the class (you know ... leverage real html attributes). There is a reason why semantics are more important than the concrete style and why they are separated. HTML and CSS first is a great idea but show more care for your users.