A real-world use case for Multiple Classes?

I understand the functionality of multiple classes - how to assign them to an HTML element, and how to target them using CSS.

Can someone please show me an example where this would come in handy?
The rational for using this is unclear to me.

This is actually something I’m using in my personal project in creating an interactive periodic table! Here’s a screenshot below.

Each of the elements use the same .element class to style how they look, as well as the example element and the hover effect of increasing the size. However, elements come in groups (eg. alkali metals, transition metals etc.) and so they need their own colour styling. Therefore each element also has a group class which assigns the background color. I also intend to possibly have a different class depending on the melting/boiling points, which could allow a colour scale based on their state at certain temperatures.
This is just my personal project example, there’s many real world examples out there too for times you might wish to assign multiple classes. Generally, it’s in the cases where elements can be in multiple “groups” that all require the same styling, but those groups don’t always overlap, like a Venn Diagram.


The keyword here is overlap. All of the elements in your periodic table have CSS properties that apply to all of them, and some other CSS properties that are group-specific. So to prevent the need to repeat the properties that apply to all of the elements, you just apply them once to the “general” class.

Thanks Adam, your answer needs to be linked inside the lesson.