個人的にベストなメディアクエリ記述方法

SCSSでMixinを活用したSP対応

現在のプロジェクトでは以下の様にSCSSの@mixinと@includeを用いてSP対応をしています。
それぞれの詳しい使用方法はこちらの記事で分かりやすく書かれています。

まずはMixinを記述します
(自分は各Mixinを専用のscssファイルにまとめています)

//mixin.scss

//SP用
@mixin media-sp {
  @media screen and (max-width: 800px) {
    @content;
  }
}

//iphone5用
@mixin media-iphone5 {
  @media screen and (max-width: 320px) {
    @content;
  }
}

あとは@includeで好きなクラスで呼び出して使うだけ！

//hoge.scss

&__title {
   font-size: 2rem;

  @include media-sp {
    font-size: 1.6rem;
  }

  @include media-iphone5 {
    font-size: 1.4rem;
  }
}

めっちゃ分かりやすい！！

基本的にメディアクエリの指定がクラス毎にまとまるので、CSS迷子になりにくくなります。

CSSのみを使っていた頃は@media screen and (max-width: 800px)配下に同じクラスを再び記述していた為、クラス名で検索すると2つヒットしてしまうなどよく迷子になっていました。。。

もっと良い方法があるかもしれませんが、今の所ベストなんじゃないかなぁ…(˙◁˙)