CUBE CSS

# Grouping

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 class attribute.

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:

  1. The elements’s primary block class
  2. Any subsequent block classes
  3. Standard utility classes
  4. 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.

← Examples →