品質の高いcssを書くポイント

この記事はこんな方向け
・新人が書いたコードにどう指摘してあげたらいいかわからない方
・コーディングのレベルアップをしたい方

議題に上がりにくいcssの書き方

ものすごく複雑なcssでも、表示が問題なければほぼ指摘されません。
ましてや知識がない人、クライアントは指摘しないでしょう。
コードレビューをしたくても、大抵時間がなくそのままという案件も多いので難しいところです。

次に触る人のために

引き継いだコードを見て何かしら「わぁ…＞＜」と思ったことはないですか？結構辛いですよね。
次に触る人のために、保守性・拡張性の高いcssを書けるようにしましょう。
基本ポイントを３つに絞りましたので是非覚えてください！

品質の高いcssを書くポイント

❶ HTML要素に依存しないこと
❷ idにスタイルをつけないこと
❸ 同じデザインなら同一のclassをつける

※その人の癖や教えもあるので、これがいいんだ！というのがあればぜひ教えてください🙏

❶HTML要素に依存しないこと

HTML要素に依存しないようにしましょう。
h2タグにスタイルをつけた場合、別ページではh3なんだけどh2に見せ方にしたい…となると上書き用スタイルを書くことになります。
classにスタイルを定義するようにしましょう。

/*NG*/
h2 {
  font-size: 3rem;
  font-weight: 700;
}

/*OK*/
.pageTitle {
  font-size: 3rem;
  font-weight: 700;
}

❷idにスタイルをつけないこと

idにスタイルをつけないようにしましょう。
idは1ページに1つ、同じidは使用できません。
id要素から継承を受けている要素を同ページの違う箇所で使いたい、となると、別のidをcssに足すことになります。
classを付け替えるだけで済むように作ると楽です。

また、idはクラスより優先されるので、!importantで打ち消し祭りにならないようにしましょう。

動的プログラムや外部スクリプトの仕様idにつけないと効かない！というのであればOK。
なるべくclass指定をしてね、ということです。

/*NG*/
#content {
  width: 80%;
  max-width: 1200px;
  padding: 0 2rem
}

/*OK*/
.content {
  width: 80%;
  max-width: 1200px;
  padding: 0 2rem
}

❸同じデザインなら同一のclassをつける

見た目がほぼ一緒のデザインなら同一のclassをつけましょう。
別classにして同じスタイルを書いているパターンを見ますが、肥大化しますし、どちらか修正になったらどちらも対応しなくてはいけません。
片方が変更になったら、その時足せばいいです。

例：商品一覧、ブログ一覧ともに同じようなカードデザイン

<!--NG-->
<div class="productItem">
</div>

<div class="BlogItem">
</div>

.productItem {
  padding: 1rem;
  background-color: #fff;
  border-radius: 1rem;
}
.BlogItem {
  padding: 1rem;
  background-color: #fff;
  border-radius: 1rem;
}


<!--OK-->
<div class="cardItem productItem">
</div>

<div class="cardItem BlogItem">
</div>

.cardItem {
  padding: 1rem;
  background-color: #fff;
  border-radius: 1rem;
}

上達するには、考えてとにかく書く

キレイなスタイルの書き方、設計を考えられるようになるにはとにかく経験だと思います。
コーディング時は、大抵スケジュールの皺寄せがきてじっくり考える時間が足りません。書き切った後で見直して反省することも、先輩からのコードレビューを受けたり改善することもほぼないです。

なので、せめてどう書けば破綻せず楽で、自分も他人もわかりやすいかを意識しながら書いてください。意識するだけでも成長具合が違います。

コーディングができてかつキレイなコードを書ける。
見てる人は見て評価されるので今から意識づけましょう。