Naming Media Queries

Chris Coyier //

It would be pretty cool if we could do this someday in CSS. The best idea for it that I've come across is to define it in a <meta> tag in the <head>. That way (perhaps) CSS could use it and JS could use it. Like window.matchMedia(nameOfMyMediaQuery) or @media (nameOfMyMediaQuery) { }. But since we can't, Sass has our back. Now the question is, how do we name them?

In Sass, the @mixin would look something like this:

@mixin breakpoint($point) {
  @if $point == papa-bear {
    @media (max-width: 1600px) { @content; }
  }
  @else if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == baby-bear {
    @media (max-width: 650px)  { @content; }
  }
}

And you'd use it like:

.module {
  width: 25%;
  @include breakpoint(baby-bear) {
    width: 100%;
  }
}

Although in reality I prefer something like "bp" just because it's shorter and you need to type it all the time. Which is why "+" would be so ideal instead of "@include". But I digress. Or you could go Brandon Mathis style:

$name1:  320px;
$name2:  500px;
$name3:  600px;
$name4:  992px;

@mixin at-least($device-width) {
  @media screen and (min-width: $device-width) {
    @content 
  }
}

@mixin until($device-width) {
  @media screen and (max-width: $device-width - 1) {
    @content 
  }
}

The names should avoid actual numbers. The point here is to assign a name with abstracted meaning, so the numbers can change but the names stay the same. I'd avoid device names like "iPad" or whatever too, because that just sets up bad expectations and will date itself quickly.

Better are naming schemes that suggest relationships between the names themselves. Where one is obviously bigger or smaller than another. Of course this is assuming width queries, which are certainly the most common. But of course your media queries could be different or more complex, and the naming scheme should represent that.

Here's some ideas:

baby-bear
mama-bear
papa-bear

straw-house
stick-house
brick-house

private
corporal
sergeant
captain
major
lieutenant
colonel
general

alpha
beta
gamma
delta
epsilon

very-small
small
medium
large
very-large

-
--
---
----
------

>-< [---] <----->

seed
seedling
sprout
plant

pebble
stone
rock
boulder

pawn
knight
queen
king

bishop
archbishop
cardinal
pope

eddard
catelyn
robb
sansa
arya
bran
rickon

knife
dagger
scimitar
claidmore

A
B
C
D
E

From Vince Speelman

lil-bowow
eminem
jay-z
krs-one
rick-ross

From James Nowland

matryoshka-doll
the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-the-one-inside-matryoshka-doll

From Philip Brown

michael
jermaine
jackie
marlon
tito

From Rob Stinogle

gandalf-the-gray
gandalf-the-white

From Darby Brown

stewie
brian
chris
lois
peter
(I leave out Meg)

Got some other ideas?