You can have multiple classes on an HTML element:
Nothing incorrect or invalid there at all. It has two classes. In CSS, both of these will apply:
.module { }
.p-2 { }
const div = document.querySelector(div);
console.log(div.classList.contains(module)); // true
console.log(div.classList.contains(p-3)); // false
But what about grouping them? All we have here is a space-separated string. Maybe that’s fine. But maybe we can make things more clear!
Years ago, Harry Roberts talked about grouping them. He wrapped groups of classes in square brackets:
The example class names above are totally abstract just to demonstrate the grouping. Imagine they are like primary names and variations as one group, then utility classes as another group:
Those square brackets? Meaningless. Those are there to visually represent the groups to us developers. Technically, they are also classes, so if some sadist wrote .[ {}, it would do stuff in your CSS. But that’s so unlikely that, hopefully, the clarity from the groups outweighs it and is more helpful.
That example above groups the primary name and a variation in one group and some example utility classes in another group.
I’m not necessarily recommending that approach. They are simply groups of classes that you might have.
Here’s the same style of grouping, with different groups:
That example above groups the primary name and a variation in one group and some example utility classes in another group.
I’m not necessarily recommending that approach. They are simply groups of classes that you might have.
Here’s the same style of grouping, with different groups: