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.