!@ (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.