どうも7noteです。cssの共通化は永遠のテーマです。

cssを記述する際、似たようなcssを何度も書いてませんか？

共通化でcssを短く書く様々な方法

セレクタで一括指定


/* 隣接セレクタ */
li + li {
  margin: 10px 0 0; /* liの次のli*/
}

/* 間接セレクタ */
p ~ p {
  margin: 10px 0 0; /* 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)です。

共通のクラスを作成

/*よくない例*/
.class1 span { color: #F00;}
.class2 span { color: #F00;}
.class3 span { color: #F00;}

/*良い例*/
.red { color: #F00;} /*共通のredというクラスを作る*/

何度も出てくるような場合は、spanにredというクラスを付けるなどすると、コンパクトになります。

ショートハンドで書く

/*よくない例*/
.class1 { 
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 20px;
}

/*良い例*/
.class1 {
  margin: 10px 20px 30px;
}

ショートハンドで書けるものはショートハンドで書く。