Media Queriesの効率的な書き方

Sassを使う前提です。

ブレイクポイントは変数で管理する

以下の理由で、すべてのブレイクポイントを変数で管理しておくのをおすすめします。

• サイト内で定義されているブレイクポイントが一目でわかる
• 後からブレイクポイントを修正する場合も一か所の修正で反映させることができる

自分は下記のように変数定義しています。

vars.scss

$breakpoint-tablet: 980px;
$breakpoint-mobile: 640px;

メディアクエリは要素ごとに記述する

メディアクエリはまとめて書いたり外部ファイル化することもできますが、要素ごとに記述するほうが効率がいいです。

離れた場所にメディアクエリの記述があると、修正のたびにあっちこっち行ったりきたりして手間がかかります。
また、見通しが悪くなるのでメディアクエリごとのルールの影響が把握しづらく、修正漏れが発生する確率が高くなります。

メディアクエリの記述はmixinで書く

自分は以下のようなmixinを定義して、

mixins.scss

@mixin max-screen($break-point) {
  @media screen and (max-width: $break-point) {
    @content;
  }
}

@mixin min-screen($break-point) {
  @media screen and (min-width: $break-point) {
    @content;
  }
}

@mixin screen($break-point-min, $break-point-max) {
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

こんな感じで使っています。

style.scss

.hoge {
  font-size: 20px;
  @include max-screen($breakpoint-tablet) {
    font-size: 18px;
  }
  @include max-screen($breakpoint-mobile) {
    font-size: 16px;
  }
}

mixinを使うことで、セレクタ（例でいうと.hoge）を複数回書かなくてすみますし、どこまでがひとつのルールセットかがわかりやすくなります。

また、メディアクエリ適用外のルールを修正したらタブレットやモバイルのルールにどのような影響があるかが一目で把握できると思います。

メディアクエリを最終的にまとめる

上記のルールでメディアクエリを書いているとメディアクエリの記述がいたるところに出てくるので、ファイルサイズが大きくなりがちです。
ファイルサイズが気になる場合は、メディアクエリをひとつにまとめるプラグインの使用を検討しましょう。

実際に使用したことがないのでどれがデファクトスタンダードかがわからないのですが、以下のようなプラグインがあるようです。

grunt-combine-media-queries
gulp-combine-media-queries

grunt-combine-mq
gulp-combine-mq

node-css-mqpacker