CSS設計チェックリストー公開前に確認すべき20項目【保存版】

Posted on by

CSSを書いていてこんな経験ありませんか？

  • ちょっと修正したらレイアウトが崩れた
  • どこにスタイルがあるか分からない
  • 同じコードが何度も出てくる
  • 他人のCSSが読めない

これは多くの場合、CSS設計が整理されていないことが原因です。

そこでこの記事では、実務で使える

CSS設計チェックリスト

を紹介します。

公開前にこのチェックをするだけで

  • バグが減る
  • コードが整理される
  • 保守性が上がる

状態になります。

CSS設計チェックリストとは？

CSS設計チェックリストとは

「壊れにくいCSSかどうか」を確認するための基準です。

プロの現場では、

  • コーディングレビュー
  • リリース前チェック

で必ず行われています。

① セレクタは浅いか？

NG

.header ul li a span {
}

OK

.nav-link {
}

深いセレクタは崩れやすい

② classベースで書いているか？

NG

div p span {
}

OK

.card-text {
}

HTML構造に依存しない

③ 命名ルールは統一されているか？

NG

card-title
card_title
cardTitle

一貫性がない

OK

card-title

kebab-caseで統一

④ BEMなどのルールを使っているか？

.card__title
.card--featured

構造が分かる

⑤ 見た目で命名していないか？

NG

.red
.big

OK

.alert
.title

デザイン変更に強い

⑥ 同じCSSを何度も書いていないか？

共通化できる

.button {
}

⑦ Utilityの使いすぎていないか？

NG

class="mt-10 pt-20 flex text-center"

読みにくくなる

⑧ !importantを使っていないか？

最終手段

⑨ IDセレクタを使っていないか？

NG

#header

再利用不可

⑩ コンポーネント単位で設計されているか？

card
button
nav
modal

部品で考える

⑪ CSSは分割されているか？

NG

style.css（1ファイル）

OK

layout/
component/
utility/

⑫ レイアウトとコンポーネントが分離されているか？

混ぜない

⑬ 状態が分離されているか？

.is-active
.is-open

見た目と状態を分ける

⑭ セマンティックHTMLと連携しているか？

HTML構造が正しいか

⑮ CSSの依存関係が整理されているか？

ITCSS的に整理

⑯ グローバルCSSが多すぎないか？

影響範囲を限定

⑰ 再利用できる設計になっているか？

コピペ禁止

⑱ コメントが適切か？

/* header */

⑲ ファイル構成が分かりやすいか？

誰でも理解できる

⑳ CSSが肥大化していないか？

定期的に整理

実務チェックテンプレ（コピペOK）

□ セレクタは浅いか
□ classベースか
□ 命名は統一されているか
□ BEMを使っているか
□ 見た目命名していないか
□ 再利用できるか
□ Utility多用していないか
□ !important使っていないか
□ ID使っていないか
□ コンポーネント設計か
□ CSS分割されているか
□ 状態が分離されているか
□ HTMLと整合しているか
□ 依存関係整理されているか
□ グローバル少ないか
□ コメント適切か
□ ファイル構成OKか
□ 肥大化していないか

このチェックリストの効果

これを使うと

  • CSSが整理される
  • バグが減る
  • 修正しやすい
  • チーム開発が楽
  • コードが綺麗になる

まとめ

CSS設計で一番重要なのは

書く前にチェックすること

です。

今回のチェックリストを使えば

  • 崩れにくいCSS
  • 読みやすいコード
  • 保守しやすい設計

が実現できます。

最後に

CSSが上手い人は

設計とチェックをしている人です。

ぜひこのチェックリストを
「保存」して使ってみてください