Web制作者のためのCSS設計の教科書

先日読んだこちらの記事で勉強したCSSメタ言語であるSASSは、見やすさが向上するけど、保守面としてのコードの質については自動化していないということがわかりました。

そこで理解しやすさというプログラマ視点での参考書を調べたところ、それらしい本書があり読んでみました。

入り口は基礎と悪い例の紹介から

1章と2章の導入部分では、CSS言語の復習としてその位置づけから紹介されていますが、すかさずCSS言語の悪い例として陥りやすい問題点を提言しています。
なんとなく普段からわかりきっていたけど、改めて明文化されているとそのマズさを実感、やっぱりCSSって書きやすくラフな言語だけどハードルが高いんだと思い知らされてしまいます。

ここで紹介されている問題はCSSの自由度の高さから起因していて、これを束縛せず自由度のある状態でクリアするのが難しい、という問題であると言ってますが、確かに納得。
逆を言えば、3章と4章にて紹介されている規則とかテクニックを使うことで、ある程度は問題の起きにくいコードが書けるということになります。

3章は目からうろこ、けど実践は難しい・・・

実は3章を立ち読んでみた時に、紹介されているCSSって設計手法のこれこそ今一番欲しい情報だったと思って一目惚れしました。
とは言え、ここで紹介されている設計手法はあくまでも教科書的アイデアの集積なので、即自身のサイト設計に適用できるというシロモノじゃなく、長期的に実践しながらの検証が伴うものばかりです。
要するに実践が難しい、ハードル高めな内容です…。

そんな難しいトピックだけど、本書では理解しやすいように図と例題を多く取り入れて解説しているところは、設計手法自身の理解を手助ける内容でした！

以下は本書で紹介されているCSS設計手法。
BEMは取り入れたサイトが多くあるらしく一番とっつきやすいものと思われ、MCSSはGitHubで管理されているってことは一番最近のものなのか、この辺を参考にすればよいのかな。

• OOCSS
  CSSでのオブジェクト指向の概念を実践。構造と見た目、コンテナーとコンテンツの分離。
• SMACSS
  OOCSSをベースにしたフロントエンドのガイドライン。Base,Layout,Module,State,Themeというカテゴライズにて分類。
• BEM
  ページの構成要素に対する命名規則を解決するための手法。
• MCSS
  OOCSSとBEMのコンセプトを元に設計された手法。日本語ドキュメント完備という親切な内容で活発さが伺える。
• FLOCSS
  本書著者によるCSS設計手法。上記すべての良い所を取り入れ設計しているとのこと。

SASSも紹介されるがCSS設計手法とのつながりが微妙

5章にCSSプリプロセッサについての話題があり、SASSが紹介されてました。
この章では、SASSを使うメリットを中心とした内容で、以前読んだSASSの書籍から外れる内容はなく、目新しい内容はありませんでした。

むしろこの書籍として見た場合、3章でせっかくCSSのための設計手法を紹介したあとなので、SASSでの表記においてどのように設計手法が絡んでくるのかが気になるところだったのですが、残念ながらSASSだからという応用はありませんでした…。

きちんと3章で紹介された手法を理解したわけじゃないのですが、なんとなくSASSって入れ子構造をなす必要が有るため構造のカテゴライズをするわけでないため、もしかしてCSS設計手法が適用できないんじゃないのかなと思ってしまう。

本書ではSASSにおけるCSS設計手法が触れてない以上、自分で調査しないといけなさそうな感じですね。
もしかしたら別の書籍に紹介されているのかも？

読んでみて思うこと

ということで、この書籍は3章部分で久しぶりのヒットだったと思います。
これはSASSとのつながりを置いてもいい収穫だったと思います。