Zenn
✏️

CSS

2020/09/20に公開
CSS
CSS 3
tech

CSSチェックリスト

この記事は、CSS設計、品質を少しでもより良い方向に持っていくためのチェックリストです。良いCSSとは、コードが破綻していないか。また、予測しやすく、再利用しやすく、保持しやすく、拡張しやすくなっているかを目的とします。

0、CSSを記述しない。

望んでいるデザインは、CSSフレームワークで対応可能か検討してください。CSSフレームワークは、無駄なコードを記述せず、レスポンシブデザインにも対応しています。有名なCSSフレームワークは、Bootstarpがあります。Bootstarpは、黒いアラートを表示したい場合は以下のように記述します。CSSは書く必要がありません。

<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

1、コンポーネント設計を取り入れるか検討する。

有名なCSSコンポーネントは、BEM、 OOCSS、SMACSSがあります。各決まったルールでCSSを記述すると必然的にメンテナンス性、再利用性を高めることできます。

2、HTML構造に依存していないか。

以下のコードは、boxタグ内にあるh2タグに対してスタイルを当てています。
しかし、divタグの変更や、h2がh3,h4などに変更される可能性もあります。

.box h2{ /* スタイルプロパティ */ }  /* NG */

HTMLに直接class名をマークアップすることで解決することができます。
class属性を利用して、HTML構造への依存は避けましょう。

<div class="box">
	<h2 class="box-title"></h2>
</div>

.box-title{  /* スタイルプロパティ */ }

3、打ち消しを避ける。

すでに当てられているboxクラスのスタイルを(no-borderクラスで)上書きして打ち消す方法は使用しない。

<div class="box no-border"></div>

.box { 
	padding: 10px; 
	margin: 10px;
	border: 1px solid #000;
} 
.no-border{ border: none; }

打ち消すのではなく、足しあわせるようにするとプロパティ数を減らすことができます。メンテナンス性が上がります。

<div class="box in-border"></div>

.box { 
	padding: 10px; 
	margin: 10px;
} 
.in-border{ 
	border: 1px solid #000;
}

4、なるべく要素タグに直接指定しない。

要素タグに直接スタイルを当てるとCSS設計破綻への一歩です。class属性を活用して別の箇所への影響を出ないようにしてください。

ul { /* スタイルプロパティ */ }  /* NG */
ul li p{ /* スタイルプロパティ */ }  /* NG */

5、抽象的なクラス名は避ける。

error(エラー)とwarning(警告)というクラス名は、抽象的すぎます。他の箇所で、別のデベロッパーが同じクラス名を記述する危険性が出てきます。

.error{ /* スタイルプロパティ */ }  
.warning{ /* スタイルプロパティ */ }

もし、お問い合わせの投稿フォームのエラーアラートの場合は、詳しくクラス名を記述しましょう。

.alert-form-error{ /* スタイルプロパティ */ }

6、要素タグを記述しない。

要素タグ(ulタグ)を記述すると、CSSセレクタの詳細度が高くなります。また要素タグが変更された場合はスタイルが当たらなくなってしまいます。

ul.box { /* スタイルプロパティ */ }

要素タグ(ulタグ)を記述しないことで、boxクラスを利用すれば同じスタイルを当てられます。再利用性も上がります。もし、要素タグを記述する必要がある場合は、コメントで他のデベロッパーに伝えましょう。

/* ul */ .box { /* スタイルプロパティ */ }

7、インライン記述をしない。

インライン記述は、詳細度が高く、HTMLに直接記述するため管理上よくありません。CSSファイルに一元管理する方が好ましいと言えるでしょう。

<div class="box" style="color: red"></div> <!-- NG -->

8、idセレクタを使う場面。

HTML上にidセレクタを利用するのは問題ないです。ページ内遷移リンクやJavaScrpt,JQueryでセレクタを取得する時には便利です。

<div id="top"></div>
<a href="#top"></a>

const top = document.getElementById('top');

しかし、CSSでの使用は避けましょう。idは詳細度が高いため意図しない上書きがされる可能性があります。idセレクタはドキュメント(ページ)上に同じ名前を使用することはできません。そのため、CSSにidセレクタを記述すると再利用性を下げてしまいます。idセレクタは、なるべく省略するべきです。

#navigation > .wrap > .list { /* スタイルプロパティ */ } /* NG */
#navigation > .wrap > .list > .item { /* スタイルプロパティ */ } /* NG */

.wrap > .list { /* スタイルプロパティ */ } /* OK */
.wrap > .list > .item { /* スタイルプロパティ */ } /* OK */

9、!importantを多様し始めたら休憩を。

!importantは、特別な理由がない限り使用するのは避けましょう。使用して管理できていれば良いが多様し始めたらCSS設計破滅への一歩です。休憩して見直しましょう。
!importantの使用を推奨されている場合もあります。例えば、JSでタブの現在地の背景色を変更する時には必然的にそのスタイルへ変更します。個人的にはその場合も推奨しません。

.tab-active{ background-color: blue; !important }

その他

個人的には、あまり重要度が高くないチェック項目を書いておきます。みなさんが要不か判断して取り入れてみてください。

  • プロパティの値に、絶対値を使用しない。(line-heightなど)
  • CSS プロパティはアルファベット順にする。
  • 16進トリプレット表記は可能なら3桁表記にする。(例: #ffffff -> #fff)
  • アイコン類は、CSSスプライトにまとめる。

参考

Discussion