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.
- Code language
- html
<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:
- Blocks (or main element class for non-CUBE CSS contexts)
- Compositions (or layouts for non-CUBE CSS contexts)
- Utilities
I like how Terence has explored this further by adding further documentation in class
attributes:
- Code language
- html
<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.
Check it out