Decorative text within HTML

This is a really interesting article!

One of the most controversial things I’ve ever done in this industry is introduce groupings in class attributes.

<div class="[ my-element ] [ cluster ] [ bg-primary color-secondary ]">
  …
</div>

It’s a real love it or hate it thing, but historically in my CSS consulting days, it was extremely useful — especially in large teams which were light on CSS specialists.

That’s the trick you see: it’s all about making sure your system doesn’t end up becoming append-only. Grouping classes in attributes really helps with that because not only are related classes grouped — therefore being easier to scan — but they follow a specific order too:

1. Blocks (or main element class for non-CUBE CSS contexts)
2. Compositions (or layouts for non-CUBE CSS contexts)
3. Utilities

I like how Terence has explored this further by adding further documentation in class attributes:

<article
  class="
    'Cards_updated_with_2025_setting'
     card
    //section_box_to_be_deprecated_next_year
     section box
    #Colours_set_in_primary.css
     bg-base color-primary"
></article>

I could see a well documented, agreed approach being very useful indeed.

Advert