Decorative Text Within HTML

Back in 2020, Andy Bell introduced me to the idea of grouping attribute values. You've probably seen something like this before: HTML < article class ="card-section-background1-colorRed" > A single class over-encumbered by all sorts of things. The more modular way to write this would be: HTML < article class ="card section box bg-base color-primary" > That's pretty good! Each one of those classes can have its own bit of CSS and everyone is happy. But… sometimes it is hard to spot the gaps. Is that a - or a spec of dirt on your screen? Is there a way to make it more visually obvious what the groupings are? Andy proposed this: HTML < article class ="[ card ] [ section box ] [ bg-base color-primary ]" > Or, if you don't like brackets, this: HTML < article class ="card | section box | bg-base color-primary" > The nice thing about attributes values is that they can contain any character. The spec says: An attribute value is a string ... Read full article.