Decorative Text Within HTML

Summary

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" ></article> 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" ></article> 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 ]" ></article> Or, if you don't like brackets, this: HTML<article class="card | section box | bg-base color-primary" ></article> The nice thing about attributes values is that they can contain any character. The spec says: An attribute value is a string. Except where otherwise specified, attribute values on HTML elements may be any string value, including the empty string, and there is no restriction on what text can be specified in such attribute values. Obviously there are some little gotchas. Quotes may need to be encoded, and some attributes only take specific variables. For the class attribute, however, the spec says they can have: A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more ASCII whitespace, where words consist of any string of one or more characters, none of which are ASCII whitespace. If a string isn't referenced within the CSS, it is simply ignored. So let's get creative! You can space your variables however you like. These are all perfectly valid and (might) be easier for a human to read. Separating out primary and secondary classes: HTML<article class="card section box bg-base color-primary" ></article> Newline classes: HTML<article class="card section box bg-base color-primary" ><...