There could be a lot of stuff going on with your
class attribute with this methodology, so it is recommended that you employ a grouping mechanism for your HTML
Here is an example, using square brackets:
<article class="[ card ] [ section box ] [ bg-base color-primary ]" data-state="reversed" ></article>
# Grouping order
The important thing is that related classes are grouped together, but a recommended order is as follows:
- The elements’s primary block class
- Any subsequent block classes
- Standard utility classes
- Design token utility classes
# It doesn’t have to be square brackets
If you don’t like square brackets, you could use something like pipes instead:
<article class="card | section box | bg-base color-primary" data-state="reversed" ></article>
# Consistency is the aim
Whether you choose square brackets, pipes or even unicorns: the priority is consistency and ease-of-reading.
HTML and CSS will support most choices, so finding a balance between developer experience and team communication is the goal with grouping.