CSS Guidelinesを読んで参考にしたい習慣
以前社内のランチMTGで発表しましたが、まとめてブログでも掲載したいと思います。
CSS Guidelinesとは
CSS GuidelinesはイギリスのフロントエンジニアHarry Roberts氏が発表したCSSのドキュメントです。
Harry Roberts氏がこう述べました。
CSSはきれいな言語ではない。
習得するのは簡単だが、ある程度の規模のプロジェクトですぐに問題が生じます。
多くの開発者が関わる場合、保守性、透明性、可読性、拡張性を保つために統一された方法を用いることが重要。CSS Guidelinesはこれらを実現するための手法を文書化したものです。
参考にしたい習慣
目次を作る
セクションの内容と機能の簡単な要約を書く。何がどこで、なぜ使用されているかについて、プロジェクト全体のビューを提示する。
目次を最新の状態に保つのは大変ですが、継続する価値は十分にあります。
例えば、開発/保守中のプロジェクトに参画するときCSSを解読する時間が必要ですが、
下記のような目次がCSSにあると早く全体像を掴めます。
/** * CONTENTS * * SETTINGS * Global...............Globally-available variables and config. * * BASE * Headings.............H1–H6 styles. * * COMPONENTS * Page-head............The main page header. * Page-foot............The main page footer. * Buttons..............Button elements. */
コメントはもっと書くべき
他の開発者にもわかるようにコメントをできるだけ書きましょう。（デプロイする前に削除する前提）
また下記を考慮して書くと分かりやすいです。
- 一部のCSSが別の場所のCSSに依存するか
- 一部のstyleを変更すると、他の場所にどのような影響があるか
- 意図的にCSSを使用する場所
- コメントが長くなる場合1行80文字で改行する
下記の例は詳しくpage-headの二種類の使用シーンを書いてあります。
実プロジェクトなかなか難しいですが、意図しないところを修正しまうミスを防げると思います。
/** * The site’s main page-head can have two different states: * * 1) Regular page-head with no backgrounds or extra treatments; it just * contains the logo and nav. * 2) A masthead that has a fluid-height (becoming fixed after a certain point) * which has a large background image, and some supporting text. … */
HTMLでclassをグループ化
下記のように複数のクラスが関連する場合あは[ ]でグループ化すると多くのメリットがあるそうです。
<div class="box box--lg btn btn–black block"></div>
↓
<div class="[ box box--lg ] [ btn btn--black ] block"></div>
Harry Roberts氏もまだ試している段階だそうですが、
メリットとして①関連のclassが明確 ②デバッグが簡単
デメリットは①ファイルサイズが大きくなる ②共有コストが必要
この書き方は初めて知りました！
維持するのは大変そうですが、やってみたいです。
セレクターを短くする
ブラウザーがCSSセレクターを右から左に読み取るため、
セレクターは短いほど、読み込みスピードが速くなります。
なので、
body.home div.header ul.site-nav li { }
より最後のliにclassをつけて
.nav-item { }
の方が効率いいです。
この書き方には場所の依存関係をなくすメリットもあるので、次のポイントで紹介します。
要素セレクターをなるべく使わない
要素セレクターは非常に多くの要素に適用するリスクがあります。
元に戻すために、より多くの CSS を作成する必要が生じます。
例えば
header ul { color: red; }
headerのul内の要素の文字色を赤くしています。
ある時の改修でul要素を増やすことになって、文字色はデフォルトの黒に指定された。
そうすると新しいul要素にclassをつけて文字色を黒に戻す必要があります。
header ul { color: red; }
header ul.hoge { color: black; }
余計な記述になるので、最初から明確なclassを作ると上書きする必要がなって管理しやすくなります。
.site-nav { color: red; }
.sub-nav { 他のプロパティ }
!importantで上書きしない
時間が経って、作業者が多くなるとcssの優先度がわからなくなって、修正が効かないことがあります。
!importantで直したら手っ取り早いですが、その次の修正が発生するとき大きな代償を伴う場合もあります。
CSSを見なおして、セレクターを整理することで（セレクターは短くしたり、IDの使用を避けるなど）ほとんどの問題は解決します。
しかし使ってはいけないという話ではないので、!importantをつけたスタイルが優先されることを常に認識して、積極的に使用するなら付けても問題ないです。
例えば単一のスタイルを定義するユーティリティークラスなら時間の短縮になる時もあります。
.error { color: red !important; }
.hidden { display: none !important; }
CSS Guidelinesではまだたくさんの内容がありますが、
今回は6点を取り上げて紹介しました。
今後もさらにわかりやすいcssを作りたいと思います！
