!@ (not at) responsive suffix

@ suffix: Apply styles at a breakpoint

An everyday technique in responsive web development is using modifier suffixes, marked by a naming convention, to indicate styling changes that occur at a breakpoint. Many naming conventions use their standard modifier symbol for these responsive suffixes. After all, a modifier is a modifier.

Using a typical BEM double-hyphen modifier convention, an example would be the class vr--medium. If --medium is a responsive modifier, and vr means bottom margin, the class indicates adding a bottom margin at the medium breakpoint. Unfortunately, the class could just as easily refer to a medium-sized margin, with nothing responsive about it. There is significant potential for confusion between similar or chained modifiers.

As a solution, consider using the @ symbol for responsive suffixes, an approach described by Harry Roberts in his introduction to BEMIT. Although the @ character requires escaping in CSS, it’s still completely readable — especially to a developer used to working with it. In HTML, it can be written without special consideration.

It’s easy to shoehorn class suffixes for media queries as modifiers in a BEM naming convention, but uniquely identifying them with the @ symbol removes ambiguity and communicates intent.

Here’s an example of pushing an element one stop initially, and two stops once the md breakpoint is reached:

<div class="push push--1 push--2@md"></div>
.push {
  position: relative;
}
 
.push--1 {
  left: $PUSH;
}
 
.push--2 {
  left: $PUSH * 2;
}
 
@media (min-width: $BREAKPOINT_MD) {
  .push--1\@md {
    margin-left: $PUSH;
  }
 
  .push--2\@md {
    margin-left: $PUSH * 2;
  }
}

!@ suffix: Remove styles at a breakpoint

After using the @ suffix for some time, I began to realize a common pattern with which many front-end developers seem to struggle: removing a style at a breakpoint. It’s not a pattern that appears frequently enough for most CSS standards to give it special consideration, particularly in a mobile-first development workflow.

As an extension of the @ convention, consider using !@ to invert the suffix’s meaning.

Following is an example of adding vertical margins between columns in a grid, only while they’re collapsed. Because different columns might uncollapse at certain breakpoints, the breakpoint at which to stop applying space between columns is specified with !@.

<div class="grid grid--space grid--space!@md"></div>
.grid--space > .grid__column + .grid__column {
  margin-top: $SPACE;
}
 
@media (min-width: $BREAKPOINT_MD) {
  .grid--space\!\@md > .grid__column + .grid__column {
    margin-top: 0;
  }
}

When not to use !@

!@ is helpful when communicating intent behind negating a style. I don’t recommend it for utility classes where a default or zeroing modifier behind an @ suffix might be more generally useful.

Related articles

Exploring responsive grid systems for complex but structured layouts.

2018
CSS UI patterns
HTML + CSS

Using the flag or media pattern for locking up graphics and text for comments, alerts, and more.

2018
CSS UI patterns
HTML + CSS

A hidden element within a link can stretch the link’s focus outline to the edge of the viewport — and beyond.

2017
Firefox
HTML + CSS