What do I call it? : Media Query naming conventions in Sass

“Hey you, Sass developers who use variables for media queries! How do you decide what to name the media queries?” It’s a pretty common question in programming languages other than Sass, and one that is always the toughest to decide.

When Chris Van Patten asked in this tweet there were a few replies. Some answers assorted and some similar. If you aren’t aware of Chris Coyier’s post on naming conventions then be sure to check that out before reading further. It’s what I call “the bear approach.” Each breakpoint is a bear of particular hierarchical order in the family structure like “baby-bear”, “mama-bear” and “papa-bear”. While I like this approach I sometimes find the readability difficult because it is unclear whether “baby-bear” is a min- or max- width query, and we might need a few more in-betweens to control certain widgets/elements that don’t fit within these parameters.

Using the Chris Coyier approach we have the following using .scss syntax:

@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; }
  }
}

p {
    @include breakpoint(mama-bear) {
        font-size: 87.5%;
    }
}

This is great, but you might have a logo or a piece of text – or something within a widget – that just doesn’t fit within the above context. Maybe you want to control something with a min- and max- width like so…

@media screen and (min-width: 16em) and (max-width: 27.875em) {…}

Where does something like the above fit into the grand scheme? The bear approach is great for the global stuff like general layout, but sometimes elements need additional tweaking that won’t fit with your general breakpoints. This leads me to an approach like the following…

@mixin breakpoint($point) {
  @if $point == papa-bear-max {
    @media (max-width: 1600px) { @content; }
  }
  @else if $point == papa-bear-min {
    @media (min-width: 769px) { @content; }
  }
  @else if $point == mama-bear-max {
    @media (max-width: 768px) { @content; }
  }
  @else if $point == mama-bear-min {
    @media (min-width: 481px) { @content; }
  }
  @else if $point == baby-bear-max {
    @media (max-width: 480px)  { @content; }
  }
  @else if $point == baby-bear-min {
    @media (min-width: 0)  { @content; }
  }
}

Still a bit hard to read when you go back later and you’re all like “that’s cool and I get that “mama-bear-min” is a minimum middle size, but what the fuck is the number?” Maybe things are obscured too much and naming can be overly-thought out when simplicity might be the key. I battle with this all the time while I’m working on Typeplate because it has some complicated mumbo-jumbo that I always feel can be simplified even further.

I’ve also experienced weird situations with orientation as desktop browsers understand orientation so it seems a bit confusing when your after devices that are non-desktop. Sure we could come up with a fancy variable name, but what do we call it? how do we implement it? We also still have situtations where desktop is the same as what you’d expect a non-desktop device to read. Lets’ say we had the following…

p {
  @media screen and (max-width: 1024px) and (orientation: landscape) {
    @include column-count(2);
  }
}

The above example won’t work because desktop browsers still recognize orientation, but if we use max-device-width we get some relief. Our new example below now includes max-device-width to help combat our situation;

p {
  @media screen and (max-device-width: 1024px) and (orientation: landscape) {
    @include column-count(2);
  }
}

This is great but our styles don’t react to orientation changes initiated by the user and requiring a page refresh each time the orientation shifts! Eek! How do we go about naming this type of scenario? Maybe something like so…

@mixin breakpoint($point) {
  @if $point == papa-bear {
    @media screen and (min-width: 769px) and (max-width: 1600px) { @content; }
  }
  @else if $point == mama-bear {
    @media screen and (min-width: 481px) and (max-width: 768px) { @content; }
  }
  @else if $point == baby-bear {
    @media screen and (min-width: 0) and (max-width: 480px)  { @content; }
  }
  @else if $point == tablet-portrait {
    @media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)  { @content; }
  }
  @else if $point == tablet-landscape {
    @media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)  { @content; }
  }
}

We all like things that are readable; I’m curious what your thoughts are and what naming conventions you use in your own personal projects. I’ve heard of approaches similar to the “bear” method using values like “small”, “x-small”, “medium” but I always feel this is just the same as the bear approach: where there are no in-betweens and it’s hard to decipher the exact number and condition the breakpoint happens.

Links

GrayGhost

Web Development & Design, Technical Writing, Interaction Design, Open Source Maker & Contributor. Helping Create A Better Web. http://grayghostvisuals.com.
  1. I take a similar approach to Chris Coyier, just with x-small, small, medium, large. etc…

    I think no matter what type of convention you use, you’re a bit out to dry at some point. I have been getting in the habit of just using sass comments to keep note of my actual values.

    @include media($x-large) { // 90em / 1180px 
    color: #bada55;
    }

    Its a bit more writing when first adding the queries, but later on it can save some frustration scrolling through the document. its not perfect, but seems to work for me.

    1. I like your use of comments Andy. Seems to be the obvious approach that is not so obvious to me apparently.

  2. Personally, I like the “bear” approach, but I build off it – adding more points like “megabear”, “iosbear”, “superbear”, etcetera. I also make a point of always structuring my media queries in a “min-width” stack (the classic mobile-first method) so that I always know what the media query means.

    The one snag in this is when you NEED to have two or more qualifiers in the query, like orientation or device-pixel-ratio.

    1. But how do you make note of what’s what? How do you know what numbers you have when your ass deep on line 1276?

  3. Here’s how I rollo;

    @mixin breakpoint($point) {
        @if $point == mobile {
            @media (max-width: 500px) { @content; }
        }
        @if $point == largemobile {
            @media (max-width: 625px) { @content; }
        }
        @if $point == phablet {
            @media (max-width: 767px) { @content; }
        }
        @if $point == tablet {
            @media (max-width: 1000px) { @content; }
        }
        @if $point == smallscreen {
            @media (max-width: 1120px) { @content; }
        }
    }

    Note that these are roughly what I do, never use fixed breakpoints, let the content decide! But it doesn’t hurt to have some rough breakpoints!

    1. Totally agree Andy! That’s why I think it’s tough to have just a few breakpoints, but it’s good to have a few for general layout purposes. I like your use of phablet. What about laptops that look like smartphones? Also why not use min-width instead of max-width seeing as many use these contraints as the “mobile first” approach?

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2013/06/12