Improving HTML Legibility When Using Multiple CSS Classes

Note: I wrote this many years ago, so my views might have changed, or some content might be outdated.

One of my main goals when writing code is to make it easy to understand and quick to scan. Sometimes, using multiple CSS classes on an HTML element can make it harder to read.

To improve legibility, I have been experimenting with separating different types of classes with a forward slash. Here’s an example:

<div class="Card">
  <span class="Card-icon / Icon Icon--close"></span>
  ...
</div>

This simple character keeps the code neat and easier to scan at a glance.