Naming Media Queries

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?

Naming Media Queries is a post from CSS-Tricks

via CSS-Tricks http://css-tricks.com/naming-media-queries/