Delimiting multiple CSS classes
Published by marco on
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>