HTML Classes: Separation of Concerns

Learn about the various design patterns to use with numerous HTML elements and multiple JavaScript and CSS files.

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.

Get hands-on with 1200+ tech skills courses.