@ 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:
!@ 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 !@.
.grid--space > .grid__column + .grid__column
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.
Exploring responsive grid systems for complex but structured layouts.
Using the flag or media pattern for locking up graphics and text for comments, alerts, and more.
A hidden element within a link can stretch the link’s focus outline to the edge of the viewport — and beyond.