When you want to change how an element looks on a web page, you can use JavaScript to modify its styles. While you have learned about changing inline styles directly, there is a more flexible and maintainable way: using CSS classes and the classList property. The classList property gives you a set of powerful methods for adding, removing, and toggling CSS classes on any DOM element. These methods include add, remove, and toggle.

Using classList.add("className"), you attach a CSS class to an element, instantly applying all the class's styles. With classList.remove("className"), you take the class off, removing its styles. The classList.toggle("className") method is especially useful. It adds the class if it isn't present, or removes it if it is. This makes it perfect for things like showing or hiding menus, highlighting items, or changing button states.

There are several benefits to using classList over setting inline styles:

• You keep your JavaScript code cleaner and easier to read;
• You separate style definitions (CSS) from behavior (JavaScript), making updates easier;
• You can apply or remove multiple styles at once by toggling classes;
• You can take advantage of CSS transitions and animations, which work best with classes.

By using classList.toggle, the example above lets you add or remove the "highlight" class with each button click. This approach makes your code more modular and leverages the full power of CSS.