Today I came across Harry Roberts’ article in which he describes how he extends the BEM naming convention to provide useful usage and state information for components.

I was particularly intrigued by his suggestion to use breakpoint suffixes, mainly because that was just what I needed today. Harry suggests the following syntax:

<div class="u-hidden@[breakpoint]">…</div>

Here’s how I used this approach today: a utility class to hide something on small screens:

<div class="u-hide@small">…</div>

My CSS looked something like this:

.u-hide\@small {
  display: none;
}

@media(min-width: 36em) {
  .u-hide\@small {
    display: block;
  }
}

Of course, that’s a very simple example but I’m sure I’ll have a use for this technique in various other situations. At least that’s what I learnt today.