はじめに

この記事は「CSS設計完全ガイド～詳細解説＋実践的モジュール集」を読んだwebフロントエンジニア歴2年ほどの人間が本書の要約をしつつ、「CSS設計とその勉強は必要なのかどうか？」について考える記事です。

僕はこの本を読むまで正直CSS設計はいらないのではないかと思っていました。

理由は以下の通りです。

• Webのフロントエンド自体のコードの寿命が短く、スタイル部分という特に変化が激しい部分に設計を持ち込んでもコスパが悪いのではないか？
• Vue.jsのScoped CSSや、CSS Modulesなどコンポーネント内にCSSのスコープを閉じる手法があり、設計手法がなくてもそこまで困らないのではないか？
• 最近話題に上がるNo CodeによってCSSは人間が書くことはなくなってしまうのではないか？

この本を読んで、上記の考え方がどう変わったのかについては最後の感想の段落に書きます。

この記事はこんな人に向けた記事です

• 「CSS設計完全ガイド～詳細解説＋実践的モジュール集」に興味を持っているがまだ読んでいない人
• CSS設計ってそもそもなんなの？という疑問を持っている人
• 僕のようにCSS設計自体は知っているが、詳しい方法を知らない。もしくは必要性をあまり感じていないという人

この記事をかいている人のスペック

• webフロントエンジニア歴2年くらい
• Vue.jsをよく使う
• CSS設計の存在は知っているがBEMくらいしか触ったことがない

CSS設計完全ガイドってどんな本なの？

ものすごくざっくりと流れをまとめると

• CSSって簡単だけど運用するフェーズになるとかなりめんどくさいよね
• そのためにCSS設計っていうものが生まれたよ
• CSS設計には共通するポイントがあるよ
• 実際にそのポイントを踏まえて有名ないくつかの方法論を上げて設計手法を解説するよ

という本だと僕は感じました。

あとは実際にその設計手法を用いてCSSをモジュールに分割していく実践的な章（４〜７章）や、CSS設計を助けるためのツールについても解説してくれています。

以下にそれぞれの箇所を勝手にコメント入れながら解説していきます。

CSSって簡単だけど運用するフェーズになるとかなりめんどくさいよね

本書より引用

CSSはとても貧弱です。これはCSSの文法がシンプルで、少し学べば誰でも扱えるようになる、群を抜いた簡単さの弊害でもあります。

半田 惇志. CSS設計完全ガイド　～詳細解説＋実践的モジュール集 (Japanese Edition) (Kindle の位置No.274-275). Kindle 版.

例えば、LPひとつコーディングするにしてもなんの規則もなしになんとなく書き始めてしまうと、

• 改修がめんどうになる
• 重複する記述が増えコードの肥大化
• どこになんのスタイルが記述されているかわからなくなる

などなど…

めちゃくちゃめんどくさい！！！！！

また、

本書のなかに「CSSは全てがグローバルスコープ」という章がある通り、

CSSを規則なしに複数ページ書くとなると…ゾッとします。追加したCSSがどんな影響を周りに与えるのか、すでに存在しているCSSを改修するとどんな影響があるのかがすべてブラックボックス化してしまいます。

これを避ける簡単な方法としてはCSSのクラスをネストすることで影響範囲をページ内に絞ることなどが考えられますが、これも規則なしによく考えずにやってしまうと、不必要なコードの肥大化、共通箇所を変更するのに何行もコードを変更しなくてはならないなどなど

地獄の様相を呈してきます。

ことwebフロントエンドは他のサーバーサイドなどに比べて変更頻度が圧倒的に高いため保守性が下がることはかなりのデメリットです。文字サイズを変えたい、装飾を変えたい、色を変えたいといった簡単な変更でも数百行変更しなくてはならないなんてことは、規則がないとザラに起きてしまいます。

もうCSS無理じゃん…

そのためにCSS設計というものが生まれたよ

じゃあ、CSSを書いている人たちがみんな地獄の中で必死にコードを書いたり改修したりしているかというとそんなことはありません。

すでに賢い先人たちがCSSをより使いやすく変更しやすいようにCSS設計を考えてくれているのです。

以下本書より引用

2011年頃にNicolleSullivan氏がOOCSSを提唱し始めたのをきっかけに、その後BEMやSMACSS、SUITCSS、MCSS、SystematicCSSなどのCSS設計手法が世界各国で開発され、広く使用されるようになりました。日本においてもCSS設計は開発されており、谷拓樹氏によるFLOCSS、筆者によるPRECSSなどがあります。

半田 惇志. CSS設計完全ガイド　～詳細解説＋実践的モジュール集 (Japanese Edition) (Kindle の位置No.396-398). Kindle 版.

とまあたくさんの設計手法があってそのおかげで地獄から助けられているわけです。

で、どの設計手法が一番いいの？と思われる方もいるかもしれませんが、

Web開発には小規模なものから大規模なもの、単なるコーポレートサイトからECサイト、Webアプリケーションまであり、CSS設計においても規模や開発するWebサイトの性質によって、それぞれ最適なものが異なってくるからです。

半田 惇志. CSS設計完全ガイド　～詳細解説＋実践的モジュール集 (Japanese Edition) (Kindle の位置No.400-402). Kindle 版.

と本書にもあるように、一概にどれが良いということは言えません。また、実際のプロジェクトでは上記に加えてチームのレベルにも影響されるのではと思います。堅牢さと初期学習コストの高さはどうしてもトレードオフになってしまう印象があります。

つまり、CSS地獄から逃れるためにはCSS設計手法をできるだけ知っておいた方が良いということになります。

CSS地獄も嫌だけど

たくさんある設計手法いろいろ勉強するのいやだな〜〜〜〜〜〜〜

でももし、それらの設計手法で共通する抑えておくべきポイントがあるとしたらめちゃくちゃ知りたくないですか？

よいCSS設計が目指すべき4つのゴールと、それを実現するための8つのポイントがあるとしたらめちゃくちゃ知りたくないですか？？？？

（※なお本書では主要なCSS設計手法について、わかりやすく実際のコードを交えながら解説してくれています。）

よいCSS設計には共通するポイントがあるよ

まず本書ではよいCSSとはなにか？について定義しています。

以下引用

「よいCSSとは何か」を考えてみます。その際に役立つ指針が「よいCSS設計が目指す4つのゴール」であり、これはGoogleのエンジニアであるPhilipWalton氏のブログ※で提唱されている考え方です。※CSSArchitecture：https://philipwalton.com/articles/cssarchitecture/

半田 惇志. CSS設計完全ガイド　～詳細解説＋実践的モジュール集 (Japanese Edition) (Kindle の位置No.626-630). Kindle 版.

本書であげられている4つのゴールは

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

の4点です。軽く説明を入れますが、詳しくは本書をご覧ください。

予測できる

「予測できる」とは即ち、「スタイリングが期待通りに振る舞うかどうか」「スタイリングの影響範囲が予測できるか」を意味しています。新しいスタイリングを追加する、または既存のスタイリングを更新しても、自分の意図しない箇所に影響を与えないよう設計されているべきです。

半田 惇志. CSS設計完全ガイド　～詳細解説＋実践的モジュール集 (Japanese Edition) (Kindle の位置No.633-635). Kindle 版.

CSSを適当に書いていると、改修したときになぜか関係ないところが壊れたなんてことはあるあるですよね…

再利用できる

コードをいちいち書き直したり上書きする手間がない状態が「再利用できる」状態です。そのために、スタイリングはきちんと抽象化されており、また適切に分離されている必要があります

半田 惇志. CSS設計完全ガイド　～詳細解説＋実践的モジュール集 (Japanese Edition) (Kindle の位置No.638-639). Kindle 版

再利用できない設計にしてしまって、コードの上書きにつぐ上書きによってできた秘伝のタレはCSSあるあるなんじゃないでしょうか…

保守できる

新しいモジュールや機能を追加・更新、あるいは配置換えしたとき、既存のCSSをリファクタリングする必要がない状態が「保守できる」状態

半田 惇志. CSS設計完全ガイド　～詳細解説＋実践的モジュール集 (Japanese Edition) (Kindle の位置No.642-643). Kindle 版

改修によって「なにもしてないけどこわれた」状態のレイアウトを直すために何行もコードを書いた経験が僕にはあります。

拡張できる

「拡張できる」CSSとは、CSSに携わる人が1人であっても複数からなるチームであっても、問題なく管理できる状態を指します。そのためにはCSS設計の規則はわかりやすく、学習コストが極端に高くない状態である必要があります。

半田 惇志. CSS設計完全ガイド　～詳細解説＋実践的モジュール集 (Japanese Edition) (Kindle の位置No.644-646). Kindle 版.

オレオレルールによって設計されていて後から入った人がなにもわからないなんて嫌だ…

じゃあこれらのゴールを達成するにはどうしたらいいのでしょう…？

よいCSS設計を実現するための8つのポイント

上記の4つのゴールを実現するために本書では8つのルールがあげられています。

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

詳しくは割愛しますが、

設計手法に詳しくなくても上記8つのポイントを抑えるだけで書くCSSがかなり良いものになると感じました。具体的であり、なぜそうなのかが本書では詳しく書いてありかなり勉強になります。

また、これらのポイントはコンポーネント分割をどのように行うべきかのかなり大きなポイントになりうると感じました。

実際にそのポイントを抑えた設計手法を解説するよ

CSS設計手法についてです！

本書では、OOCSS,SMACSS,BEM,PRECSSについて説明されています。

実際のコードをリファクタリングする形式で解説が進むため、わかりやすいかつ、実践的です。手法ごとの背景や思想なども書いてあるためすんなりと理解できます。

また、前述の8つのポイントのどれと関連性が高いかについても説明してくれているのでより納得感が深まります！

これ以降の章では肝心のどういった粒度でモジュールを分割していくべきかが、パターンごとにBEMとPRECSSを用いて解説されており、手本として都度振り返ろうと思える内容でした。

読んだ感想

我流でCSSを書いていた僕からすると、かなり納得感のある内容でした。

なにより、なんとなくの経験則が、言語化され、なぜそれが良い/悪いのかが明文化されるので、CSSを書く際の指針としてかなり参考になる本でした。

CSS設計って結局必要なの？

はじめに書いたCSS設計に対する疑問がどう変わったのかについてです。

Webのフロントエンド自体のコードの寿命が短く、特に描画のスタイル部分という特に変化が激しい部分に設計を持ち込んでもコスパが悪いのではないか？

これに関しては本書内でも規模の小さなページやサイトであればなくても問題ないという説明が何度か出てきます。ので、変化が少ない一度きりのLPを一人で作る場合は必須ではないと言えなくもないです。

ただ、設計を意識しながら実装することと、場当たりで実装していくことのどちらが楽かで言えば断然設計を用いるほうに軍配があがるのではないかとこの本を読んで思いました。最初は設計を考えるのに時間がかかるかもしれませんが回数をこなすうちに設計にかかる時間が減りコードを早くかけるようになるはずです。

ので、CSS設計はページの規模に関わらず作業の効率化につながるので、考慮して実装すべきと感じました。

Vue.jsのScoped CSSや、CSS ModulesなどCSSのコンポーネント内にCSSのスコープを閉じる手法があり、設計手法がなくてもそこまで困らないのではないか？

CSS設計が生まれた理由の一つである「CSSはグローバルスコープ」を、別のアプローチで解決しているのでCSSに設計はいらないのではないか？という疑問でした。

確かに「CSSはグローバルスコープ」であることは他の方法で解決が可能となっています。

しかし、CSS設計のメリットは他にもあります。

CSS設計ではUIをどう部品化するかという点に着目しているとこの本を読んで感じました。そのため、CSS設計を学ぶことによって、WebのUIの部品化のエッセンスを得ることができます。これは、コンポーネント化することがスタンダードになっている昨今のWebフロントエンドにおいてかなり有用な考え方です。

そのため、Vue.jsのScoped CSSや、CSS Modulesなどを採用していてもCSS設計は勉強すべきと感じました。

最近話題に上がるNo CodeによってCSSは人間が書くことはなくなってしまうのではないか？

おそらく遅かれ早かれそういう時代はくるのではないかと感じています。また、CSSではない全く新たなWebにおけるUIのスタイリング方法が開発されたり、Webがスタンダードではなくなってしまったりした時には流石に必要なくなってしまうとは思います。

ただし、CSSやWebが健在であれば少なくとも、CSS設計の知識が無駄となることはないと思います。

前段でも書いた通り、CSS設計はUIをどう部品化するかという点に着目しているためです。CSS自体を直接触ることがなくなったとしてもコンポーネントをどう分割すべきか知っていることは実装においてかなりのアドバンテージになるはずです。

まあ、これに関しては5年後どうなっているかなんて自分にはわからないので、そこまで未来のことはわかりませんが、少なくとも3~4年は有用なスキルなのではないでしょうか？

この記事のタイトルであるCSS設計って勉強しなきゃいけないの？の僕なりに考えた回答ですが、

・CSS設計は必ずしも必要なわけではないが、根底にある考え自体はWebフロントエンジニアにとって必要な考えなので、Webフロントエンジニア（特にコンポーネント分割などに自信がない人）は勉強するのがおすすめ

です。その際に理論的な部分から実践的な部分までカバーしてくれている「CSS設計完全ガイド～詳細解説＋実践的モジュール集」は入り口として良書であると感じました。

次回は実際にこの考え方を用いてデザインシステムのCSSを設計してみた記事を書く予定です。

乞うご期待…！！