CSS／レスポンシブの効率的なコーディングの仕方を教えてください。

Question

レスポンシブデザインをコーディングするときは、一つcss内にmediaを記述し、サイズ別にコードを記述しています。
基本的には、下記のように異なる箇所だけ、上書きしていくスタイルで書いています。

.hoge {
	color:red;
}

@media(min-width : 768px) {
.hoge {
	color:blue;
	margin-bottom: 10px;
}
}

@media(min-width : 1024px) {
.hoge {
	color: yellow;
	margin-bottom: 20px;
}
}

この方法だと、長くなると今選んでるのはどのサイズのコードなのかわからなくなるときがあります。
また、上書きするスタイルだと、同じスタイルを記述してしまうときがあります。
注意すれば問題ない話ではありますが、もう少し効率的な環境や記述の仕方はないかと模索しております。

現在は、下記のようにページ単位でmediaを記述していますが、ヘッダーやサイドなどもう少し細かい単位で書けばわかりやすくなるかなとも考えています。

/* Aページ */

.hoge {
	color:red;
}

@media(min-width : 768px) {
.hoge {
	color:blue;
	margin-bottom: 10px;
}
}

@media(min-width : 1024px) {
.hoge {
	color: yellow;
	margin-bottom: 20px;
}
}

/* Bページ */

.unko {
	margin-bottom:5px;
}

@media(min-width : 768px) {
.unko {
	margin-bottom: 10px;
}
}

@media(min-width : 1024px) {
.unko {
	margin-bottom: 20px;
}
}

皆さんはレスポンシブのときは、どのように効率的にコーディングしているのでしょうか？
アドバイス等いただけると嬉しいですm(__)m

ちなみにエディタはAtomを使っています。
記述の仕方以外にも、おすすめのパッケージなどあれば、教えてください。
よろしくお願いいたします。

Answer 1

個人的には#header、#footerなどのコンポーネント／パーツ単位で@mediaを記述しています。
1枚のCSSに複数の@mediaが繰り返し記載されることになるのでその点は無駄なのかもしれませんが、
ベースの記述と@mediaの差分記述を近いところに書いておかないと管理が大変なので。。。

@mediaで差分修正する箇所が少なければ1箇所にまとめて@mediaを書けば良いのでしょうが、
実際の案件ではそんなシンプルなものはほとんど無いので、今は毎回そのような形で書いています。

どうしても分散記述した@mediaを1箇所にまとめたければ、
sass+gulp環境などでプラグインを使って自動化すれば良いかと思います。
Gulpだとgulp-combine-media-queries、
Gruntだとgrunt-combine-media-queriesあたりのプラグインでその辺は自動化できるようです。

Comments

[退会済みユーザー]

回答ありがとうございます。
なるほど、パーツごとに記述する方が管理しやすいんですね。
やはり差分記述が遠いとわかりにくいですよね;;
個人的には、Atomのパッケージで同一のID・クラス名を@media別にソート・ハイライト表示してくれるような機能があれば、大変便利なんですけどね・・・
他力本願もよくないので、パッケージの作り方を一から調べてみます^^;
プラグインを使うと自動でまとめられるのも始めて知りました。
GulpやGruntは使用したことないですが、まとめるときがあれば、調べてみたいと思います。
参考になりました。ありがとうございました。m(__)m