はじめに
自社のCSS設計を検討しました。
内容ははじめてのCSS設計の記録【決定編】に載せようと思いますが、そこに至った経緯や取り入れた様々な設計手法の概要をまとめましたので、興味があれば順番に読み進めてください。
今回はCSS設計完全ガイド ~詳細解説+実践的モジュール集を参考にさせて頂きました。とても良書でしたのでぜひ購入して読んでみてください。
CSS設計の8つの指標
CSS設計には目指すべき4つのゴールがあります。
他の言語にも言えることだと思いますが。
・予測できる
・再利用できる
・保守できる
・拡張できる
この「目指すべき4つのゴールが満たされる」＝＝「よいCSSである」、ということになります。
そして、CSS設計の4つのゴールを実現するために8つの指標があり、BEMやSMACSSなどの設計手法では、8つの指標のいずれかに該当します。
下記の表は8つの指標とその指標を採用している設計手法（OOCSS, SMACSS, BEM, PRECSS）、自分たちのチームで採用・意識しているかの現状をまとめたものになります。
| 8つの指標 | 設計手法 | 評価 | チームの現状 |
|---|---|---|---|
| 1.特性に応じてCSSを分類する | SMACSS, PRECSS | × | 意識していない |
| 2.HTMLとスタイリングが疎結合 | SMACSS, BEM |
△ | HTML要素をセレクタに している時がある |
| 3.影響範囲が広すぎない | SMACSS, BEM PRECSS |
△ | 重複が起きそうなclass名 を使用している時がある |
| 4.特定のコンテキストに 依存していない |
ALL | × | 影響範囲を絞るために コンテキストに依存している |
| 5.詳細度がみだりに高くない | BEM | × | かなり詳細度が高い |
| 6.クラス名から 影響範囲が想像できる |
SMACSS, BEM PRECSS |
△ | クラス名に画面名を含めたり しているが全てではない |
| 7.クラス名から 見た目・機能・役割が想像できる |
BEM, PRECSS | △ | 想像できるものもあるが 全てではない |
| 8.拡張しやすい | OOCSS, SMACSS PRECSS |
× | 基本的に自作のスタイルは シングルクラス設計になっている |
△の偶にできているところも、明確なルール決めをしているわけではないので開発者によってバラバラになってしまっています。現状、少なくとも「よいCSS」ではないことがわかります。
そこで、8つの指標を取り入れているCSSの設計手法を導入したいと考えています。
設計手法検討
導入するCSS設計を検討したいと思います。
現在、OOCSS単体で開発することは少なく、他の設計手法に思想が取り入れられているため、SMACSSとBEM、PRECSSの3つの手法で検討したいと思います。
ある程度学習した後に3つの手法を完全にではありませんが組み込んで、トライ&エラーで開発をしてみました。
以下の表は、3つの手法の完全に個人的な主観に基づいた比較なので、ご了承ください。
| SMACSS | BEM | PRECSS | |
|---|---|---|---|
| 厳格性 | △ | ◎ | ◯ |
| 柔軟性 | ◯ | △ | ◎ |
| 学習コスト | ◯ | × | ◯ |
| ドキュメント | ◯ | ◯ | △ |
SMACSS(スマックス)
【特徴】
- 拡張可能でモジュール的なCSS設計（Scalable and Modular Architecture for CSS）のこと
- CSSのコードを役割に応じて5つのカテゴリ分けしている
- 規則を厳格にするために、OOCSSやBEMの一部を取り入れたりすることもある
SMACSSはCSSのコードを役割に応じて、ベース、レイアウト、モジュール、ステート、テーマというカテゴリに分けています。こうすることで管理がとてもしやすいです。
柔軟かつある程度の規約があるので、初めてCSS設計手法を取り入れたとしても簡単に書くことができ、統一感のあるコードになるかと思います。
しかし、特徴の最後にある通り、ある程度規模が大きくなってくると規則を厳格にする必要が生じ、他の設計手法を取り入れる方法が採用されるそうです。実際に自分もSMACSSだけど自由に書けすぎてしまうと思い、SMACSS＋何かで検討したいと思いました。
BEM(ベム)
【特徴】
- Block、Element、Modifierの略
- OOCSSのように基本的にはモジュールベースで実装する
- 他の設計手法に比べて厳格/強力である
- BEMはカバーする範囲がCSSに留まらず、学習コストが比較的高い
BEMはCSSだけでなくファイルの出力方法やファイル構成なども厳格に定められている手法で、学習コストが他の設計手法に比べ高いですがその分強力に働きます。
今までCSS設計を導入したことがない場合、初めてがBEMだともしかしたら難しいかもしれません。ただ、BEMの命名規則は比較的導入しやすいと感じました。厳格であり、一発でスタイルを適用させることができるのでパフォーマンス的にも良いです。
PRECSS(プレックス)
【特徴】
- 接頭辞付きのCSS（prefixed CSS）
- CSSを役割に応じて6つのグループに分類し、それぞれに規則を設けている
- グループごとに2文字の接頭辞をクラス名に付けており、開発要件に合わせて独自のグループを作成することも可能
- 命名規則がどのグループのものかわかりやすく、ある程度柔軟かつ厳格に定義することができる
PRECSSは名前の通り、CSSを役割に応じて6つに分け、それぞれのグループのクラス名に2文字の接頭辞を付けるようにしています。こうすることで、そのクラスがどのようなスタイリングをするか想像しやすくなり、使いまわしたり管理しやすくなります。
また開発要件に合わせ、オリジナルのグループも作成することができるので、柔軟かつある程度のルール化ができるので、導入がしやすいと感じました。
OOCSS、SMACSS、BEMに強く影響を受けており、それぞれのいいトコ取りをしていて、他の設計手法に馴染みがある人も導入のハードルが低いと思います。
結論
「導入しやすいものをそれぞれ取り入れて組み合わせる」
それぞれの設計手法はCSS設計の4つのゴールを満たすために考えられてますので、どれか1つに決めて構築していくでももちろん良いと思いますが、かゆい所に届かなかったり、学習コストが高く他の開発メンバーの導入が難しかったり、という懸念もあります。
なので、それぞれの良い点、導入しやすい点を組み合わせたものを自分たちのCSS設計としたいと思います。
大事なのは、これが完成版ではないということで、定期的な振り返りを行いアップデートを重ねて、より自分たちに適したCSS設計を目指していきましょう。