ハマログ

株式会社イーツー・インフォの社員ブログ

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を作りたいと思います!

  yt   2023年10月17日


関連記事

VSCodeプラグイン「Live Sass Compiler」のフォーマット設定が効かない時の解決法

とあるプロジェクトではモックを作った時にSass周りの設定をしました。 リリース…

ロゴマークとロゴタイプについて

先週末からなんどもWPにYouTubeの動画埋め込みにチャレンジしているが、 ・…

デバイスごとにフォントを変える方法

某案件で、クライアントの指定でGoogle FontのM PLUS Rounde…


← 前の投稿

次の投稿 →