はじめに
皆さんこんにちは。
タイトルで煽ってますが皆さんに不快な思いをしてほしいわけではありません。
cssを書き始めた or cssである程度レイアウトは作れる人にもう一段階レベルアップして欲しい
という思いで今回記事を書かせていただきました。
今回のテーマは共通化です。
背景
cssは誰でも簡単に書くことができる言語です。
しかし何も考えずに書いていくとメンテナンス性（後々の修正のしやすさ）が著しく損なわれます。
実際、僕は自社サービスのフロントを1年半以上作り続けているのですが、過去に書いたcssがひどすぎて修正に時間がかかってしまったことが何回もあります。
限りある人の時間を有効に活用するためにメンテナンスしやすいコードを書きましょう！
ここでは「共通化できないcss大好きなAさん」と「共通化大好きBさん」のお話をします。
共通化できないcss大好きなAさんの場合
ディレクター「今回の案件は、画面の四隅に100px * 100pxのボックスを1個ずつ、計4つ配置する案件だよ！お願いね！」
Aさん「わかりました！」
Aさん「こんなの簡単だぜ〜〜〜！とりあえずボックスを4つ書くでしょ〜？それで1つ1つにclassをつける！」
<div class="wrapper">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
</div>
Aさん「htmlは完璧だ！」
Aさん「あとはcssを書くだけ！もう終わっちゃうよ！」
.box-1{
position:fixed;
top:0;
left:0;
width:100px;
height:100px;
}
.box-2{
position:fixed;
top:0;
right:0;
width:100px;
height:100px;
}
.box-3{
position:fixed;
bottom:0;
right:0;
width:100px;
height:100px;
}
.box-4{
position:fixed;
bottom:0;
left:0;
width:100px;
height:100px;
}
Aさん「完璧すぎる。。。」
Aさん「できました！」
ディレクター「おー早いねー！さすがA！あ、widthとheightを250pxにしてもらってもいい？」
Aさん「はい！」
カチャカチャ...
（box-1のwidth, height書き換えーの、box-2のwidth, height書き換えーの, ... , box-4のwidth, height書き換えの）
Aさん「できました！」
ディレクター「ありがとう！あ、ごめん！全部にborderを1pxつけてほしい！」
Aさん「は、はい」
ぽちぽち...
（box-1のborder書きーの、box-2のborder書きーの, ... , box-4のborder書きーの、めんどくさいなー）
Aさん「ふぅ、、、」
Aさん「できました！」
ディレクター「おーいいね！あ、申し訳ないんだけどやっぱりさ、widthとheightを300pxのやつも見てみたいなー！」
Aさん「は、はい（またかよ。。。）」
ぽち...ぽち...
（box-1のwidth, height書き換えーの、box-2のwidth, height書き換えーの, ... , box-4のwidth, height書き換えーの...ぐぬぬ...）
Aさん「できたー」
ディレクター「あ、ごめんやっぱwidthさっきのに戻していて！」
Aさん「ひぃいいいいいいいいい」
・
・
・
バタンッ。。。
・
・
・
おお Aよ！ しんでしまうとは なさけない…。
そなたに もういちど きかいを あたえy...
みたいなことになるわけです！
いやです！死にたくないです！
今回の例では
「width,heightを100pxで作ってね」（初期の要件）
↓
「width,heightを250pxに変更してね」（修正1回目）
↓
「borderを1pxつけてね」（修正2回目）
↓
「width, heightを300pxに変更してね」（修正3回目）
で、修正したcssのクラスの数は12回です。
4（box-1, box-2 ... box-4） * 3（修正3回） = 12回
たった3回の修正なのに12個ものclassを修正してます。
もし、cssを共通化して書いた場合どうなるのでしょう。
共通化大好きBさんの場合
ディレクター「今回の案件は、画面の四隅に100px * 100pxのボックスを1個ずつ、計4つ配置する案件だよ！お願いね！」
Bさん「はい！承知いたしました！」
Bさん思考回路
全部100px * 100pxのBOXで、固定位置に配置するんだよな！
つまり全部にposition:fixed;か
widthとheightとfixのcssは共通化できるな。
で、1つ１つの位置が違うからそこは共通化しないでおこう！
Bさん「共通のcssを含めた.boxに各配置の情報をもった.box-[番号]を追加しよう！htmlはこんな感じかな！」
<div class="wrapper">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
</div>
Bさん「cssはこんな感じですっきり書けたぞ！」
.box{
position:fixed;
width:100px;
height:100px;
/*全部のボックスで使う共通のcss*/
}
.box-1{top:0; left:0;}/* 場所を決めるcss */
.box-2{top:0; right:0;}/* 場所を決めるcss */
.box-3{bottom:0; right:0;}/* 場所を決めるcss */
.box-4{bottom:0; left:0;}/* 場所を決めるcss */
Bさん「できました！」
ディレクター「おー早いねー！いいじゃん！あ、widthとheightを250pxにしてもらってもいい？」
Bさん「はい！」
カチャカチャ...
（boxのwidth, height書き換えて終わり！）
Bさん「できました！」
ディレクター「はや！あ、全部にborderを1pxつけてほしいなーー！」
Bさん「はい！」
カチャカチャ...
（boxのborder書き換えて終わり！）
Bさん「できました！」
ディレクター「え、もう？？電光石火だねキミ！あ、申し訳ないんだけどやっぱりさ、widthとheightを300pxのやつも見てみたいなー！」
Bさん「はい！」
カチャカチャ...
（boxのwidth, height書き換えて終わりだ、楽ちん楽ちん）
こうして度重なる仕様変更にも対応できたBさんは幸せに暮らしましたとさ。。。
・
・
・
そして伝説へ。。。
はい、みんなハッピーです！
今回修正したcssのクラスの数は3回でした！
1（boxのみ） * 3（修正3回） = 3回
先程よりもずいぶん少なくなりましたね！
結論
今回の例は極端な例かもしれませんが、共通化はすごく大事です！
コードも見やすくなって修正も簡単になります！
共通化しないでcssを書いていくと修正のたびに修正箇所が増えていきます。
そうすると本来時間をかけたいところに時間をさくことができなくなってしまい、結果的にプロダクト全体のグローススピードも遅くなってしまいます！
そうなることは非常にもったいないですよね！
共通化を意識して、素敵なcssライフを送って下さい！
何かご意見等ありましたらよろしくお願い致します！
ありがとうございました！