「よいCSS」について考える～CSS設計とPRECSS～【書籍紹介あり】

2021.02.19　Posted by Coding_team

Webプログラミング

【書籍紹介あり】「よいCSS」について考える～CSS設計とPRECSS～ CSSを書く時に意識していることはありますか？

CSSは意外と簡単だという声もありますが、他の人から見ても読みやすいコードなのか、改修する時に追加や変更を行いやすいコードになっているのかなど、自由度が高い分「よいCSS」とはどういったものなのかと悩むことも多い言語だと思います。

そこで、この記事ではCSSを書く上で悩みがちなことと、「よいCSS」を書くための足掛かりになるCSS設計の解説をした『CSS設計完全ガイド』という書籍をご紹介します。

CSSを書く上での悩み

CSSは記述さえ間違わなければ、セレクタをいくつ並べてもどんな名前にしても、スタイル自体は簡単に適用することができますよね。
同時に、「一応書けるけど、これは本当に他人から見ても良いコードなのだろうか」といった疑問が尽きないのもあるあるだと思います。

悩みの種をいくつか挙げてみると、

クラス名の付け方…限定的な名前（「.news_ul」など）を付けると、他で流用する時に使いづらくなってしまう。
また抽象的過ぎると、他で重複する可能性があるので、適切な抽象度が分からない。
親子関係…「.news_ul li .red_txt」など、親子関係を厳密に指定してしまったせいで他で使いまわせなくなってしまい、後で後悔する。
「li:nth-child(n)」のような疑似クラスを、どの程度適用してよいのか分からない。
あまり多用しすぎると改修で要素が増えたときに順番がズレて、ほかの疑似クラスも修正することになってしまう。

といったところでしょうか。

また、他のサイトのコードを参考にしようとしても、人によって結構書き方が違いますよね。
その書き方がベストなのかどうかの判断もなかなか難しいです。

結果、こういった悩みを抱えつつ、自己流でCSSを書くことになります。
ページ数が少なかったり、自分しか運用しないコードであれば、そのように作成しても大きな問題にはならないでしょう。
しかし、大量のページを作成したり、複数人で運用するようになると、複雑になり過ぎず誰が見ても分かるコードを書く必要が出てきます。

CSS設計という考え方

CMSの出現などから1サイトあたりのページ数が増加し、こういった問題は大きくなっていったようです。
そこで、解決策として「CSS設計」手法が開発されました。

CSS設計は一つではなく、OOCSS、BEM、SMACSS、FLOCSSなど、さまざまな設計手法が開発・使用されています。
それぞれに特徴があり、サイトの性質によっても向き不向きがあるので「この手法が一番良い」という風に選ぶことはできませんが、こういった設計手法を取り入れることでコードの可読性や保守性が上がります。
先程挙げたような、「読みにくい」「使い回せない」「修正しにくい」「追加しにくい」といった悩みの解決に繋がります。

とはいっても、難しそう、どれから手を付ければよいか分からない、と思ってしまう人もいると思います。
そこで今回は、『CSS設計完全ガイド』という書籍を紹介します。

『CSS設計完全ガイド』の紹介

CSS設計完全ガイド ~詳細解説+実践的モジュール集
半田惇志 (著)
技術評論社 (2020/2/27)

『CSS設計完全ガイド』では、「BEM」「SMACSS」「OOCSS」などの設計手法の紹介と、
筆者が開発した「PRECSS」の設計手法について掲載されています。
それぞれ、悪いコードをリファクタリングするといった形式で具体的に説明されているので、イメージを掴みやすいです。

この本ではまず、GoogleのエンジニアであるPholip Walton氏がブログで提唱した、

予測できる
再利用できる
保守できる
拡張できる

CSSを「よいCSS」として設計のゴールに設定しています。

そのうえで、「BEM」「SMACSS」「OOCSS」そして「PRECSS」は以下の8つのポイントのうち、
いずれかに該当する規則を持っていると指摘しています。

特性に応じてCSSを分類する
コンテンツとスタイリングが疎結合である
影響範囲がみだりに広すぎない
特定のコンテキストにみだりに依存しない
詳細度がみだりに高くない
クラス名から影響範囲が想像できる
クラス名から見た目・機能・役割が想像できる
拡張しやすい

この本では、リファクタリングしたコードが先程の8つのポイントのどれにあたるものなのかを挙げつつ解説されています。
また、中心となる解説は筆者が開発した「PRECSS」という手法の解説ですが、「PRECSS」は「BEM」「SMACSS」「OOCSS」の影響を強く受けており、良いとこ取りをしたような手法になります。
そのため「PRECSS」を説明する前に、「BEM」「SMACSS」「OOCSS」の設計手法から重要度の高い考え方もピックアップして紹介されています。

「PRECSS」について

「PRECSS(プレックス)」は筆者が開発したprefixed CSS（接頭辞付きCSS）です。
全てのクラス名に役割に応じた2文字の接頭辞（「ly_」など）が付いていることが特徴です。
「SMACSS」でもレイアウトを指すクラスに「l-」が付いており、この辺りの影響を受けているのだと思います。

さらに、CSSを役割に応じて6つのグループに分類して、規則を設けています。

ベース
レイアウト
モジュール
a. ブロックモジュール
b. エレメントモジュール
ヘルパー
ユニーク
プログラム

たとえば、「2.レイアウト」ではヘッダーやメイン、サイド、フッターなど大きなレイアウトを形成する時に使用します。
クラス名は「.ly_header」のような命名で、レイアウトのみを指定するクラスのためwidthやmargin、padding、floatなどしか通常は指定しません。

また「3.モジュール」のブロックモジュールでは、フォントの大きさや背景色など、他の要素に影響を及ぼさない（widthやmarginなどレイアウトに関わらない）スタイルのみを適用します。

このようにレイアウトグループとモジュールグループを切り分けて、別のクラスとして作成することで、「1.特性に応じてCSSを分類する」設計になっています。

『CSS設計完全ガイド』では先程挙げたグループの分類方法や、具体的なコードを解説しています。
また、筆者の半田さんはWEB上でもPRECSSを紹介したページを作成しているので、そちらも参考にしてみてください。
https://precss.io/ja/
なお、『CSS設計完全ガイド』では「何故そう書くのか」に重点が置かれているため説明が豊富で、コードも細かく記載されています。
サイトだけでは分かりにくい点も解説されているので、こちらの書籍も一読すると「PRECSS」についての理解が深まると思います。

「PRECSS」でコードを組んでみて

この本を読んだ後、いきなり全ての規則を理解してCSSを作成する…となるとなかなか難しいので、作りが簡単なページをできる限り「PRECSS」を取り入れて作成してみました。
クラスの付け方や命名規則にも気を配る必要があり、普段の1.5倍程度の時間が掛かりましたが、汎用性の高いクラス名にすることで使用する箇所を限定されることが無くなりました。
また、レイアウトとモジュールを分けて組むことで、幅が違う他のページでモジュールを流用する時も同じクラスを使用することができ、新しいクラスを増やさずに作ることができました。
親子関係も最小限なので自由度が高いのも良いです。

最初は時間が掛かってしまいましたが、慣れればコーディングの時間も減り、運用でも時短が見込めそうです。