「動けばよい」から「保守しやすい」へ！CSSコーディングの考え方
1. はじめに
こんにちは。エンジニアの片岡です。
皆さんは学生の頃のプログラミングと会社に入ってからのプログラミングに差を感じたことはありますか？
学生の頃は大きくても5人ぐらいのグループで1年ぐらいかけて開発を行うぐらいだったかと思います。
会社に入ると100人以上がかかわり何年にもわたって保守していくということになります。
今自分が書いたコードも10年後の後輩が保守しているかもしれません。
このように、「とりあえず動いていて身内さえわかっていればよい」開発から「誰でも保守しやすい」開発に切り替える必要があります。今回はW2でも導入している片岡が作成したフロントエンドの研修よりいくつか抜粋し、保守を意識したコーディングについてみていこうと思います。
2. 問題1
規模が大きいサイトになると、CSSファイルを複数に分割したりします。
サイト全体で読み込みたい common.css と、このページだけ特殊なデザインにするための samplepage.css などなど。
以下のようにCSSの読み込みを行うかと思いますが、実は問題があります。
どこでしょうか？
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Sample Page</title>
<link rel="stylesheet" href="samplepage.css">
<link rel="stylesheet" href="common.css">
</head>
<body>
</body>
</html>
3. 問題1の回答
正解は CSSファイルの読み込み順 です。
例えば以下のようなCSSが書かれていた場合、CSSは優先度が同じなら後に書かれている方が適用されるという特性がありますので文字色は黒になってしまいます。
/* samplepage.css */
/* このページだけは緑色で表示 */
h2 { color: #5b8c69; }/* common.css */
/* 基本的には黒色で表示 */
h2 { color: #333; margin-bottom: 10px; }読み込み順が逆になると color の部分だけが samplepage.css の内容で上書きされるので、
h2 { color: #5b8c69; margin-bottom: 10px; }
という内容で意図したとおりに適用されますね。ここで気を付けなくてはいけないのは、問題1の状態で
「なんか優先度で負けてるな… せや !important つけよ！」
とはなってはいけないということです。
!important はその時は確かにうまくいっているように見えるかもしれませんが、今後の保守で必ず負債になってきます。
もし気軽に !important を使ってたという経験がある場合は注意しましょう。
4. 問題2
CSSの読み込み順は直したのにCSS緑色にならない箇所がある…
どうやって文字を緑色にするか？ぜひ考えてみてください。
/* common.css */
/* 基本的には黒色で表示 */
.contents h3 { color: #333; margin-bottom: 5px; }/* samplepage.css */
/* このページだけは緑色で表示 */
h3 { color: #5b8c69; }
5. 問題2の回答
読み込み順も問題ないんだしこれはもう !important に頼るしか…
…なんてことはありません。
問題1でも記載の通り「CSSは優先度が同じなら後に書かれている方が適用される」ので、適用されていないということは優先度が足りていないということです。
言い換えれば優先度を上げればいいだけなので、何も優先度を最強(!important)にする必要はないということです。
正解は以下の通りです。
/* common.css */
/* 基本的には黒色で表示 */
.contents h3 { color: #333; margin-bottom: 5px; }/* samplepage.css */
/* このページだけは緑色で表示 */
.contents h3 { color: #5b8c69; }
多くの場合、セレクタがより詳細に記載されているほど優先度は高くなります。（若干ニュアンスの違いあり）
つまり、セレクタの部分を合わせてやれば、後から読み込んでいるCSSが適用されるということです。より正確な優先度の計算を調べてみると、新しい発見があるかもしれません。
参考：https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666
6. さいごに
いかがだったでしょうか？
今回は保守性の高いCSSを書く際の考え方について紹介しました。
CSS以外にも言えることで、間違っていて誰かに指摘をもらったり、よりよい方法が後から見つかっても、それは今後直していけばよいのです。
「今なんかわからんからとりあえず動いているからよい」ではなく、「こういう意図でこのコードを書いた」といえるようなコーディングを心がけていきましょう。