Grow your CSS skills. Land your dream job.

Naming Media Queries

Published by 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?

Comments

  1. I know they’re pushing the SCSS syntax now, but I’m working on a project with Django and Coffeescript and it seems more natural to us SASS in that scenario because the syntax is more similar to those other language I mentioned. The reason I bring that up is because I also realized that “@include” is just “+” in the SASS syntax, as you alluded to. As soon as I saw that, it made me wonder why we have to use “@include” with the SCSS syntax, but “+” works with SASS.

    • Pip

      Presumably because SCSS is meant to be compatible with CSS, whereas SASS does not? But as it’s a superset, they /could/ add + as an alternative.

  2. I’m happy you wrote a post about this, because I was going to after seeing how many views my shot on dribbble got the other day. It’s important in any aspect of design and/or development to take away any preconceived notions that could be limiting (i.e. the standard but decreasingly popular media-queries at 320px, 480px, 1024px just because of iDevices).

    To further that notion, I’ve come accustom to throwing out the idea of pixels in general because they have a solid meaning. We should think in regards of proportions and ratios rather than anything concrete in all aspects when we are creating for the web; the process of creating for the web should be pure all the way through. I’ve seen conversations somewhere about converting px to ems with mixins, but in my opinion that’s still thinking like an old grandpa. It doesn’t matter if you convert your units, your still stuck in the mindset of absolute and perfect. I’m young though, so maybe it’s just me!

    Thanks for the retweet by the way. Big fan of shoptalk and css-tricks!

  3. charmander
    charmeleon
    charizard

  4. D Tang

    nokia
    palm
    sonyericsson
    iphone
    droid
    note

  5. Guilherme

    This reminds me of this great post about naming computers. (Don’t mind the design, it was clearly done by a sysadmin.)

    Examples: Norse Gods, Muppets, Pokémon :P

  6. cs

    I took inspiration from something on my desk…

    short
    tall
    grande
    venti

    and my hidpi is called espresso

    It just stuck and been using it for months.

    • Was just about to say the same thing. I use short, tall, grande, venti – and I don’t even like coffee! Did work at Starbucks for a while though, and have a brother who still does.

    • I do this as well, except I used tall as the smallest and trenta as the largest.

  7. picard<br/>
    riker<br/>
    data<br/>
    la-forge<br/>
    worf

  8. Hobbit<br/>
    Dwarf<br/>
    Man<br/>
    Wizard<br/>
    Elf<br/>
    Valar

  9. I call mine Step 1, Step 2, Step 3, etc.

    Depending on the project, I may have as few as two, or as many as six steps.

    I define them as variables in LESS…

    @step3:         ~"only screen and (min-width: 30em) and (max-width: 48em)";
    @step3_or_less: ~"only screen and (max-width: 48em)";
    

    …and employ them thusly:

    .module {
        @media @step5 { … }
        @media @step3, @step4 { … }
        @media @step2_or_less { … }
    }
    

    I prefer “step” to “breakpoint”, because I’m usually referring to a width range, not a particular value.

    I previously used shorthands like @phone and @desktop but they weren’t entirely accurate – and calling them “Step X” seems to eliminate confusion when I’m conversing with my colleagues.

    I guess this makes me the boring one :-P

  10. I’ve always felt naming your breakpoints is quite a verbose thing when 320/444/732 is a much quicker way to do things w/ using Sass. I kind of understand a reason to use them. But unlike changing a $brand-color I don’t think there’d ever be a time to bump up a sites media query by a few EMs or pixels.

    To that end I’ve written my own Sass mixin allowing for $variable breakpoints and the ability to pass a value (in px) that coverts of to EMs.

    It’s in codepen here – http://codepen.io/sturobson/pen/keuyp

  11. John

    Great list! It’s nice to have a bit of fun mixed in with coding.

    Here’s mine:

    Initiate
    Padawan
    Knight
    Master

    DON’T JUDGE ME!

  12. kikito

    From handheld device to big desktop screen:

    gollum
    bilbo
    gimly
    aragorn
    gandalf
    balrog

    Appart from that, eye-of-sauron should match retina devices.

  13. I use the bears, found it neat and intuitive. I’ve extended it to:

    baby-bear
    toddler-bea
    brother-bear
    mama-bear
    auntie-bear
    uncle-bear
    papa-bear

    I’m also using a slightly different mixin, with some optional paramaters like setting “max”/”min”, “width”/”height”:

    @mixin breakpoint($point, $range:'min', $axis:'width') {
    
        @if $axis == 'width' {
    
            @if $point == 'baby-bear' {
                @media (#{$range}-width: 350px) {
                    @content;
                }
            }
    
            @if $point == 'mama-bear' {
                @media (#{$range}-width: 767px) {
                    @content;
                }
            }
    
            @if $point == 'papa-bear' {
                @media (#{$range}-width: 1200px) {
                    @content;
                }
            }
    
        } @else if $axis == 'height' {
    
            @if $point == 'baby-bear' {
                @media (#{$range}-height: 350px) {
                    @content;
                }
            }
    
            @if $point == 'brother-bear' {
                @media (#{$range}-height: 550px) {
                    @content;
                }
            }
    
            @if $point == 'papa-bear' {
                @media (#{$range}-height: 880px) {
                    @content;
                }
            }
    
        }
    }
    
  14. Sam Hasler

    csswizardry-grids uses palm, lap, portable for palm+lap, lap-and-up for everything larger than palm, desk and desk-wide

    ──palm─┤ ├──lap──┤ ├─desk────────────
    ─portable────────┤        ├─desk-wide
             ├──lap-and-up───────────────
    
    • Scott

      This is what I use too. It avoids being over-specific with devices like “mobile” or “cellphone” or “tablet”, but keeps it relevant to how the site will be displayed. I love a bit of humour in my code but constantly having to type things like “papa bear” or “darth vader” into my CSS is incredibly tedious.

  15. Alex Hardy

    Here’s a bit of a geeky one, Transformers size classes :)

    minicon
    scout
    deluxe
    voyager
    ultra
    leader
    supreme

  16. Conor Haining

    Kitten
    Cat
    Leapard
    Panther
    Tiger
    Lion

  17. I used to use

    start-mobile
    start-tablet
    start-desktop

    but now

    sparrow
    pigeon
    raven
    buzzard
    eagle

  18. This works for me….

    $device_widths: (100px, 200px, 300px, 400px, 500px, 600px, 700px, 800px, 900px, 1000px, 1100px, 1200px, 1300px, 1400px);
    
    @mixin device-width($i){
        @media only screen and (max-width: (nth($device_widths, $i))){
            @content;
        }
    }
    

    all that needs to be called is:

    @include device-width(10){
          styles...
    }
    
  19. Of course! We need Jedi Levels;

    Initiate
    Padawan
    Knight
    Master
    Councilor
    Grand Master

    or Sith levels;

    Minion
    Assassin
    Adept
    Acolyte
    Warrior
    Marauder
    Lord
    Dark Lord

    • Matt Bivins

      I’m on your wavelength, Aaron…working on a project now and it’s extremely helpful for me to use:

      ewok
      wookiee
      wampa

      I’m running out of the furred races, though…so I hope I won’t need any more breakpoints before I’m through!

    • Norman144

      Doesnt one have to be a grandmaster to sit on the council?

  20. Devon

    I’m surprised no one has used beer yet:

    AMBER
    BLONDE
    BROWN
    CREAM
    DARK

  21. Obvious…

    Baby shark ♪ do do, do do do do ♪
    Mama shark ♪ do do, do do do do ♪
    Papa shark ♪ do do, do do do do ♪
    Swimmer ♪ do do, do do do do ♪

  22. When I’m not playing with my matryoshka-dolls and attempting to be professional I use this system:

    Media Queries:

    Order from small to big.
    extra-small, small, medium, large, larger, huge, massive.

    If you need to add any more break points I currently suggest using number increaments like the following:

      massive-01
      massive
      huge-02
      huge-01
      huge
      larger
      large-01
      large
      medium
      small
      extra-small
    

    On large sites I find that sometimes you need to find a spot between the media queries you originally set at the start so the number increments is usually good solution.

    @mixin breakpoint($point) {
      @if $point == massive {
        @media (min-width: 120em) { @content; }
      }
     
      @else if $point == huge {
        @media (min-width: 100em) { @content; }
      }
     
      @else if $point == larger {
        @media (min-width: 75em)  { @content; }
      }
     
      @else if $point == large {
        @media (min-width: 60em)  { @content; }
      }
     
      @else if $point == medium {
        @media (min-width: 54em)  { @content; }
      }
     
      @else if $point == small {
        @media (min-width: 30em)  { @content; }
      }
     
      @else if $point == extra-small {
        @media (min-width: 20em)  { @content; }
      } 
    }
    

    For a bit more about it here is link to a gist for this mixin partial.

  23. Brad Metcalf

    My list:

    Chuck Norris

  24. Brad Metcalf

    Opps. Messed up. My list:

    Everything
    Chuck Norris

  25. wigster
    pre[rel="PHP"]{
        @include box-shadow(3px 3px 1px 2px rgba($php, 0.3));
            &:before{
                background: $php;
            }
    }
    pre[rel="jQuery"]{
        @include box-shadow(3px 3px 1px 2px rgba($jQuery, 0.3));
            &:before{
                background: $jQuery;
            }
    }
    pre[rel="css"]{
        @include box-shadow(3px 3px 1px 2px rgba($css, 0.3));
            &:before{
                background: $css;
            }
    }
    pre[rel="sass"]{
        @include box-shadow(3px 3px 1px 2px rgba($sass, 0.3));
            &:before{
                background: $sass;
            }
    }
  26. i use the sizing theme to in some of my pages. thats really helpfull.
    But there are a lot more options i guess. But when u have Shops its a smart way :)

  27. caseybaggz

    Tree
    Branch
    Leaf

  28. Josh

    Beers :: Worst beer = the smallest && Best beer = the largest

    -Natural Ice
    –PBR
    —Blue Moon (Draft of course)
    —-Miller Lite

  29. baby
    mom
    dad

  30. /--------\
    |  o  o  |
    |  {oo}  |
    \  ^^^^  /
       ----
    

    mustache-pig guy

  31. Please forgive me =)


    3=э
    3==э
    3====Э

  32. Santosh

    I am new to scss but i love this tricks a lot… very flexible.

  33. Santosh

    I am new to scss but i love this tricks a lot… very flexible.
    Naming

    Universe
    Galaxy
    Solarsystem
    Earth
    Asia
    :)

  34. Santosh

    Hey chris,
    Meida query repeats and it makes me wired. is there anything am missing.

    @mixin breakpoints($points) {
        @if $points == papabear {
            @media only screen and (max-width:1600px) {
                @content;
            }
        } @else if $points == mamabear {
            @media only screen and (max-width:1200px ) {
                @content;
            }
        } @else {
            @media only screen and (max-width:768px) {
                @content;
            }
        }
    }
    
    .wrapper {
        width:960px;
        margin: 0 auto;
    
        @include breakpoints(babybear){
            width:100%;
        }
    }
    
    
    .span1 {
        width:200px;
        @include breakpoints(mamabear){
            width:150px;
        }
        @include breakpoints(babybear){
            width:100%;
        }
    }
    
    
    

    outputs

    .wrapper { width: 960px; margin: 0 auto; }
    @media only screen and (max-width: 768px) { .wrapper { width: 100%; } }
    
    .span1 { width: 200px; }
    @media only screen and (max-width: 1200px) { .span1 { width: 150px; } }
    @media only screen and (max-width: 768px) { .span1 { width: 100%; } }
    

    You can see there are 2 media query with same breakpoints(768px), but i those classes to be written in same media query without repeating. Hows that possible?

  35. Melanie Archer

    By horse breeds:

    Shetland
    Arabian
    Paint
    Thoroughbred
    Clydesdale
    Shire

  36. Chris Ruppel

    There’s a stable, full-featured Compass extension called Breakpoint that does all of the things discussed in this post. I find it slightly odd that almost every commenter in this thread wants to name breakpoints, but then limit themselves to three or four total (regardless of the “non-device” names used).

    When I use the Breakpoint extension, my typical project ends up having 20-40 different media queries. Why? Because they are all catering to my content instead of some arbitrary line that matches devices (or clumsily toes the line in between “popular” resolutions).

    The end result is a truly fluid layout at any resolution, instead of one that looks good around a few breakpoints but looks kind of funky in between those special numbers. Some examples:

    nav-sm, nav-md, nav-lg
    footer-md, footer-lg, footer-wide
    login-md, login-lg
    main-cta-sm, main-cta-wide

    Yes, you might end up with three or four of these labels having the same value. And that’s ok. Because the second you have to change one, you won’t have to change the others. You’ll end up doing a lot less find-n-replace.

    Did I mention it can convert your PX values to EM automatically? It’s pretty slick.

    Also, I’d be remiss not to mention its no-query fallback feature, which relies on conditional <html> classes to provide pure CSS, oldIE-compatible layouts with zero extra effort.

    Try Breakpoint, read the docs, and change the way you work with media queries!

  37. How about:

    robin
    batman
    superman

  38. Crispen Smith

    I’m still testing on this but I’ve found that removing the logic from the breakpoint mixin seems to lead to cleaner code. My Implementation looks like this:

    @mixin wb($point) {
    @media(min-width: $point) { @content; }
    }

    @mixin hb($point) {
    @media(min-height: $point) { @content; }
    }

    I always work from smallest out when defining an element requiring media-queries so this seems to work very smoothly and requires nothing more than a well named set of variables. I’ve gone with Pawn -> King. This gives a nice variety of increasing orders of scale without tying to a device and means that you can call the mixin in a very similar fashion to your original recommendation:

    .foo {
    @include wb($pawn) {
    color: #FFF; }
    }

    Which provides us with:

    @media (min-width: 320px) {
    .foo {
    color: #FFF; } }

    (Clearly this example is completely useless and shouldn’t ever be looked at as a good idea, but it does demonstrate the basic concept)

  39. Aaron Weber
    Permalink to comment#

    jordan
    pippen
    rodman

  40. Thanks for the tip @chriscoyier. After my last RWD project, I simplified your example a bit because the number of breakpoint scopes got kinda ridiculous.

    // _config.scss
    ...
    
    $baby-bear:      0;
    $mama-bear:      600px;
    $papa-bear:      1000px;
    
    $window-buffer:  15px;    // accounts for window/scrollbar quirk in Chrome 
                              // [http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/]
    
    @mixin bp($break-point) {
      @media (min-width: ($break-point + $window-buffer)) { @content; }
    }
    
    @mixin bp-2x($break-point, $resolution: 2) {
      @media (min-width: ($break-point + $window-buffer)) and (min-resolution: #{$resolution}dppx)  { @content }
    }
    
    
    // main.scss
    ...
    
    .container {
      width: 100%; 
    
      // @mqfix for strange content break on headings at ~850px
      @include bp($mama-bear + 350) {
        width: ($col * 8);
      }
    }
    

    Surely anyone could supplement em/rem values as needed, but this gives me the most flexibility to account for arbitrary content breaks while narrowing the number of variables I have to recall throughout my stylesheets.

    Additionally, documenting specific breakpoints like in my example with // @mqfix ... makes it really easy to find in ST2 and to recall the exact reason for why I’m using that particular break point.

  41. Permalink to comment#

    iPhone
    iPad
    Desktop

    or above example already good
    baby-bear
    mama-bear
    papa-bear

  42. Thanks! This method is quite useful and fun..

    .. aaand I love chess version :)

    pawn
    knight
    queen
    king

  43. Nice idea! This way it is all more fun. :)
    I would add some music to it:

    violin
    viol
    cello
    bass

  44. Bhushan
    Permalink to comment#

    awesome idea dude…

  45. Matt

    Thanks! I needed this.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".