可読性の高いMedia Queriesの書き方

こんちは！basara669です。

レスポンシブのサイトを構築する際に、Media Queriesを使って各ブラウザのサイズに合わせたCSSを書いていくと思います。
このMedia Queriesを書く場所で可読性が変わるので紹介します。

書き方

書き方にはいくつかあると思います、例えばスマホとPC用のCSSがあったとして、それをファイルごと分けて管理する方法や1つのCSSに両方書く方法です。

前者の場合、リクエストが増えてしまいますので、スマートフォンを中心で考えた場合適してないかなと思います。
またgruntなどで最終的にファイルを1つにしてしまう場合が増えているので、分割などはせず1つのCSSにしてしまうことを前提として書いたほうが良いと思います。

1つのCSSの場合どういう書き方が良いか

では、1つのCSSにしたとしてどういう書き方がよいでしょうか。
よくレスポンシブ系の本とかだと下記の様な書き方が紹介されています。

/*スマホ*/
@media(max-width:640px){
.header{/*…code…*/}
.main{/*…code…*/}
.sideBar{/*…code…*/}
.footer{/*…code…*/}
}
[/css]

確かにこうすると無駄なく効率的にかけている様に感じますが、メンテナンス面では非常に良くないです。
今は中身のCSSについては何も記述してないので整理されているように見えますが、これがそれぞれ長くなってしまうと一体どこに何を書いていたのかわけわからなくなってしまいます。

自分で運用する場合も、チームで運用する場合にも非常に見づらいかなと思います。

ではどう書くべきか？

下記のように書くと、メンテナンス性も高く可読しやすいCSSがかけます。

別々の場所に書くのではなく、変更した箇所の直下に書くと、非常に可読性が高くなります。
floatがどのようにかかっているかなどがすぐ分かります。

共同作業にも向きますし、ミスも減るのでこの書き方がオススメです。

basara669の感想

レスポンシブのサイト増えましたよね〜。

今日ご紹介した書き方だと、

}
[/css]

を毎回書くことになり、CSSが無駄に増えてしまうことになります。
この辺りどのように対処したらよいかということも今度書こうかと思います。
ではでは