どうも7noteです。cssの共通化は永遠のテーマです。
cssを記述する際、似たようなcssを何度も書いてませんか？
共通化でcssを短く書く様々な方法
セレクタで一括指定
/* 隣接セレクタ */li+li{margin:10px00;/* liの次のli*/}/* 間接セレクタ */p~p{margin:10px00;/* p以降のp*/}/* アスタリスク（*） */body*{box-sizing:border-box;/* body配下の全要素 */}カンマ(,)つなぎで複数同時指定
section.class1,section.class2,section.class3{margin:20px;/* class1とclass2とclass3に同時に効く */}nth-child,nth-of-typeを使って一括指定
/*よくない例*/li:nth-child(2),li:nth-child(4),li:nth-child(6){width:50px;}/*良い例*/li:nth-child(2n){width:50px;/*2の倍数番目に効く*/}※奇数番目に効かせたい時は(2n-1)です。
共通のクラスを作成
/*よくない例*/.class1span{color:#F00;}.class2span{color:#F00;}.class3span{color:#F00;}/*良い例*/.red{color:#F00;}/*共通のredというクラスを作る*/何度も出てくるような場合は、spanにredというクラスを付けるなどすると、コンパクトになります。
ショートハンドで書く
/*よくない例*/.class1{margin-top:10px;margin-right:20px;margin-bottom:30px;}/*良い例*/.class1{margin:10px20px30px;}ショートハンドで書けるものはショートハンドで書く。
まとめ
cssの書き方は十人十色なので、できるだけ人が読んでも分かりやすい用に書く方が好ましいと言われています。
分かりやすく書くためにはcssを短くコンパクトに適切に書くことは必須。
WEBサイトを作成する時には、common.cssなどの共通のcssを作るのも忘れずに。
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）