HTML Classes: Separation of Concerns

Recall the button

<button class="btn-large js-hello">Greet</button>

You can see two classes in there, btn-large and js-hello. The first class is used solely for styling, and the second class is used solely for referencing in JavaScript.

It is always preferred to separate classes for styling and functionality. When multiple people work on the same codebase, this separation pays off. This way, a person responsible for styling can add, delete, or rename any styling classes without affecting functionality. JavaScript developers can do the same thing with the js- prefixed classes.

js- prefixed classes should be used for functionality, while regular classes should be used for styling.