【SCSS】レスポンシブデザインを作成する時のおすすめコーディング方法

レスポンシブデザインのコーディングはPCとSPデザインが混ざる

なにはともあれまずは、どちらが直感的に読めるか、２つのソースコードを20秒ほどで眺めて欲しい
※ 両方とも完成するデザインは同じものになる。

PCのスタイルをSPで上書きするSCSS設計で作るとこの様になる。

.company-pc-cta {
  @include mobile {
    display: none;
  }
}

.company-sp-cta {
  display: none;

  @include mobile {
    display: block;
    width: 100%;
  }
}

PCとSPのスタイルは別で書いた方がスッキリする

.company-pc-cta {
  width: 100%;

  @include mobile {
    display: none;
  }
}

.company-sp-cta {
  width: 100%;

  @include desktop {
    display: none;
  }
}

※ include mobile or desktop でメディアクエリが利用できる状態です

やっていることはシンプル

• PCの時だけ表示する画像
• SPの時だけ表示する画像

その２つをメディアクエリで出し分けているだけ。

レスポンシブデザインのコーディング時は上書きしない方が良い

PCとSP、タブレットなど、複数のデバイスが出るほど
上書きがより複雑になってしまう。

共通の部分のみ通常のセレクタ部分に記述し
デバイスサイズごとに異なるスタイルを当てる場合は
全て分けて書いておいた方が後々保守性が高くなるだろう。

一旦Laravelチームではこの方針でコードを書くことにした。