Delimiting multiple CSS classes

While investigating Charts.css, I learned that you can throw unrecognized special characters like square brackets or pipes into CSS class references and its just fine. So you can use them to separate longer lists of classes. For more information, see Cube CSS: grouping by Andy Bell (Piccalilli).

So, you can write:

<article 
class="[ card ] [ section box ] [ bg-base color-primary ]">
</article>

or

<article class="card | section box | bg-base color-primary">
…
</article>

and it works just fine, while being more legible. Charts.css uses it to group related classes:

<table 
class="charts-css 
[ line ] 
[ multiple ] 
[ show-heading ] 
[ show-labels labels-align-start ] 
[ hide-data reverse-data data-spacing-5 ] 
[ show-primary-axis show-data-axes ] ">
  …
</table>