【CSS】レスポンシブデザインのメディアクエリはどう設計するのが最適か？

レスポンシブデザインのサイトをマークアップする場合に、メディアクエリを記述します。

一般的にはベースのCSSを書いて、その後に@media でデバイス別のスタイルを上書きすることが多いと思います。

// ベースCSS
.entry-header {
  margin-bottom: 25px;
}
.entry-title {
  min-height: 76px;
  padding: 7px 92px 40px;
  background: url("../img/bg_heading.svg") no-repeat left bottom;
  background-size: 100% auto;
  font-size: 2.5rem;
  font-weight: bold;
}

// ベースCSSを上書きするためのデバイス個別のメディアクエリCSS （スマホ向け）
@media (max-width: 767px) {
  .entry-header {
    margin-bottom: 20px;
  }
  .entry-title {
    min-height: auto;
    padding: 0 10.53333% 5.33333% 11.86667%;
    background-image: url("../img/bg_heading_sm.svg");
    font-size: 1.7rem;
  }
}

上書きせずにデバイス共通のスタイルだけ抜き出してベースにすることもできますが、何ぶん管理がめちゃくちゃ大変になります。

// 差分管理が大変になり、設計として良くないパターン

// ベースCSS
.entry-title {
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-weight: bold;
}

// PC
@media (min-width: 768px) {
  .entry-header {
    margin-bottom: 25px;
  }
  .entry-title {
    min-height: 76px;
    padding: 7px 92px 40px;
    background-image: url("../img/bg_heading.svg");
    font-size: 2.5rem;
  }
}

// SP
@media (max-width: 767px) {
  .entry-header {
    margin-bottom: 20px;
  }
  .entry-title {
    min-height: auto;
    padding: 0 10.53333% 5.33333% 11.86667%;
    background-image: url("../img/bg_heading_sm.svg");
    font-size: 1.7rem;
  }
}

そのためベースCSSはどちらかのデバイスを元にしたほうが管理の面では優れています。

ではそのベースになるデバイスはどう選定していますか？

ベースになりうるデバイスはPCとスマホの2択です。
ベースは「上か下か」で、間違ってもタブレット端末向けをベースにすることはないはずです。

もう一度最初の例を見てみましょう。

// ベースCSS
.entry-header {
  margin-bottom: 25px;
}
.entry-title {
  min-height: 76px;
  padding: 7px 92px 40px;
  background: url("../img/bg_heading.svg") no-repeat left bottom;
  background-size: 100% auto;
  font-size: 2.5rem;
  font-weight: bold;
}

// ベースCSSを上書きするためのデバイス個別のメディアクエリCSS （スマホ向け）
@media (max-width: 767px) {
  .entry-header {
    margin-bottom: 20px;
  }
  .entry-title {
    min-height: auto;
    padding: 0 10.53333% 5.33333% 11.86667%;
    background-image: url("../img/bg_heading_sm.svg");
    font-size: 1.7rem;
  }
}

これはベースCSSをPC向けに記述して、メディアクエリでスマホ向けのスタイルで上書きしています。

おそらくこのように書いていく方がほとんどではないでしょうか。
PCスタイルを元にスマホの見た目にするのは見た目にもわかりやすいですよね。

しかしこれだとサイトを構築するときは良いのですが、運用フローになった際にコードを追うのが大変になるデメリットがあります。

なぜならベースを打ち消すコードが多くなるためです。

例えばボタンのホバー用CSSを見てみましょう。

.btn {
  text-decoration: underline;
}
.btn:hover {
  text-decoration: none;
  opacity: .7;
}

// ベースCSSを上書きするためのデバイス個別のメディアクエリCSS （スマホ向け） 
@media (max-width: 767px) {
  /* スマホでは:hoverでボタンクリック（タップ）が遮られることがある */
  .btn:hover {
    opacity: 1;
  }
}

スマホは :hover 擬似クラスでスタイルを変更する際に描画周りのスタイルを変更すると、デフォルト動作が一度だけキャンセルされることがあります。
そのため場合に応じてhoverをリセットする必要があるのです。

その前に、そもそもスマホには :hover の指定は不要です。

そこでオススメなのが、その逆。スマホをベースCSSにするモバイルファースト設計です。

.btn {
  text-decoration: underline;
}

// ベースCSSを上書きするためのデバイス個別のメディアクエリCSS （PC向け） 
@media (min-width: 768px) {
  .btn:hover {
    text-decoration: none;
    opacity: .7;
  }
}

ベースにスマホ用のスタイルを当てて、メディアクエリでPC用スタイルを上書きします。

まずコード量を比べてみてください。
:hover の打ち消し部分がまるごと無いので、コード量が少なくなりコードの見通しが良くなります。

スマホのデザインはパーツ単位で見ると、PCとあまり違いがない場合がほとんどです。
その中でも大きく違いがあるのが、レイアウトの違いや文字の大きさなどのサイズ感の違い。

スマホの方がレイアウトがシンプルなことが多いので、スマホでベースを整えたほうがパーツ単体を作ることに集中できます。
そのため、全体のコード量が減り効率的なコードを書くことができます。

最近人気のECSS（Enduring CSS）というCSS設計手法でもモバイルファーストが推奨されていますし、堅牢なCSSを書くには重要な考え方だとぼくも実際に感じています。

もしCSSの管理が難しいと感じている方は一度試してみてもらえるとその利点にすぐ気づくはずです。