css レスポンシブにてコードが別の部分にも適応してしまう。

Question

問題点

レスポンシブをモバイルファーストにした方が良いという記事を読み、その際に下記の画像の規格を見つけてそれに合わせて調整している段階です。
~479px以下の場合は@demiaを付けずに基本CSSを書いていく。そして、それより上の解像度の場合@mediaを付けて対応していくってことなんですが、~479px以下のcssはそのまま書いているため、他の@mediaに書く解像度の方にまでcssが適応されてしまいます。これはどのように解決できるでしょうか？
画像は画像はこちらの記事から抜粋しましたこちらの記事から抜粋しました。

簡潔にまとめますと、479px以下のcssが他の@mediaのcssに影響を与えてしまうのを防ぎたい。
これは、普通のことであり479px以下のcssの影響が出そうなところはサイド@mediaのところで上書きしてますか？それとももっと他の方法がありますか？

上書きする方法で進めてましたが、上書きに限界がきてしまいどうすればいいか質問しに来ました。

回答お願いします。よろしくお願いします。

Comments

[FKM]

~479pxはメディアクエリで制御できないのですか？

[yoshinavi]

＞上書きする方法で進めてましたが、上書きに限界がきてしまい･･･
→　具体的に問題点を提示されたほうが、回答も付きやすいかと思います。

[toto654]

モバイルファーストの~479px以下の場合、メディアクエリを指定しないような記事の記述でしたが、メディアクエリを指定しても変わらないのでしたら指定すれば解決するのですが、どうでしょうか？

Answer 1

モバイルファーストという考え方でcssを書く場合は、大きい画面サイズでの表示を変えたい部分だけ@media ...内に追加して上書きをするのが本来のやり方かと思います。
もし大きい画面サイズを基本とした考えで設計される場合は@media screen and (max-width: ◯◯px){...}というのを大きい数字の方から並べていく書き方になります。
モバイルファーストにこだわるなら発想もそれに伴って切り替える必要がありますね。

Answer 2

@media screen and (max-width:479px) {
/* sp only */
}

スマホ幅のみに適応したいCSSは上記のメディアクエリ内に記述することで解決します。

以下余談です。個人的な意見なので参考程度に。

メディアクエリあまり分けすぎると全体の記述が長くなってしまいます。プロジェクトによってはほどほどにしてもいいかと思います。例えば小型PCと大型PCで別れていますが、レイアウトによっては大いに互換性があることも多いかと。