【CSS】classの都度メディアクエリのCSSを記述する書き方は有りですか？

Question

レスポンシブ対応のCSSの書き方についてアドバイスください。

PCビューとスマホビューのCSSを記述する時に、一つのCSSファイル（仮に「test.css」とします）の前半にPCビューをまとめて記述して、後半にスマホビューの記述をする書き方（書き方１）をよく見るのですが、**クラスの都度スマホビューの記述をする書き方（書き方２）**って有りでしょうか？

いま案件でLPのコーディングをしているのですがデザインが複雑で、PCとスマホで見え方がだいぶ違うので書き方１だと作業がしづらく、書き方２の方がPCビューとスマホビューが隣通しで編集ができるので作業がやりやすいです。
（デュアルディスプレイにしたり画面分割もやっていたのですがどうにもやり辛く…）

書き方２だと変でしょうか？
メディアクエリが沢山出てくるのでこの書き方変じゃね？・分かりにくいみたいに見られますでしょか？

【例】
※例なので短いですが実際のCSSは複雑で凄く長いです。
ブレイクポイント：1080px

【書き方１】

.test-wrap{
 width: 1080px;
 font-size: 1.5rem;
 color: #333;
 margin: 0 auto;
}

.test-in{
 padding: 20px;
}

@media screen and (max-width: 1080px){
.test-wrap{
 width: 90%;
}

.test-in{
 padding: 10px;
}
}

【書き方２】

.test-wrap{
 width: 1080px;
 font-size: 1.5rem;
 color: #333;
 margin: 0 auto;
}

@media screen and (max-width: 1080px){
  .test-wrap{
    width: 90%;
  }
}

  .test-in{
    padding: 20px;
}

@media screen and (max-width: 1080px){
  .test-in{
    padding: 10px;
  }
}

Comments

[m.ts10806]

要件どおり動いてるならそれで良いのではと

Answer 1

アリだと思います。
と言いますか、SCSSではそのように書くことは普通にされています。

SassにおけるMedia Queryのベストプラクティス

Comments

[kinako16]

ご回答ありがとうございます！
参考記事もつけてくださりありがとうございました。安心してコーディングできますm(_ _)m