メンテナンス性の高いCSSを書く – 読書 – Scalable and modular Architecture for CSS 日本語版

メンテナンス性が高いCSSを書くのって本当に難しいと思う今日この頃。ほぼ初心者に近い自分のCSSスキルを高めるために、本書を手にとって読んでみました。

本書は電子書籍「Scalable and Modular Architecture for CSS」の日本語版です。前々から気になっていた本ではあったのですが、日本語版があるということをつい最近知りました。お値段は15ドル。メンテナンス性の高いCSSを書くためにすごく参考になりましたし、価格もお手頃なのでオススメです。

ちなみに、本書を知ったきっかけはこちらの記事です。本書で紹介されている方法論をRailsアプリの開発で使う時にとても参考になる記事でした。

SMACSS and Rails – A Styleguide for the Asset Pipeline • 55 Minutes Blog

目次

  • イントロダクション
  • CSSルールのカテゴライズ
  • ベースルール
  • レイアウトルール
  • モジュールルール
  • 状態(ステート)ルール
  • テーマルール
  • 状態の変更について
  • 適応性の深度
  • セレクタパフォーマンス
  • HTML5とSMACSS
  • プロトタイプ
  • プリプロセッサ
  • ベースルールをあきらめる時
  • アイコンモジュール
  • 複雑な継承
  • コードのフォーマット
  • リソース

CSSは難しい

みなさんはCSSに対してどんなイメージを持っていますか?CSSはHTMLの次に勉強するものだから、もしかすると簡単なイメージがあるかもしれません。僕もWebのことを勉強し始めた高校生くらいの頃はそんな風に思っていました。

でも、仕事でWebサイトやアプリケーションを開発するようになってから、その考えは変わりました。適当に定義したIDやクラスに対して、これまた適当にスタイルを適用していくと、次第にスタイルを修正したり追加したりすることが難しくなってしまいます。

最初から、適切にIDやクラス構造を設計し、それらに対して適切な方法でスタイルを適用していかないと、メンテナンス性の低いWebサイトやアプリケーションができあがってしまいます。この問題は、サイトの規模が大きくなればなるほど、リリース後の継続的な修正の必要性が高くなればなるほど、顕著に現れます。

HTMLとCSSの関係を疎結合に保つ

メンテナンス性の高いCSSを書くための方法論、というかコツとして「HTMLとCSSの関係を疎結合に保つ」ということが挙げられます。これは「HTML文書の構造を前提としたCSSを書かない」あるいは「CSSの構造を前提としたHTMLを書かない」ということで達成されます。

これができていないと、CSSのある一部分を修正したら、HTMLも修正する羽目になって、さらにまたCSSを修正する必要が出てきて、もう一回HTMLを修正して・・・という辛い無限ループに陥ってしまうかもしれません。これでは何時までたっても仕事を終えて家に変えることができません。

また、CSSの中で定義されている個々のスタイル間の関係についても同じことが言えます。スタイル間の関係を疎結合にしておかないと、あるスタイルを修正した時に同じようなループが発生してしまいかねません。

でも、どうすればHTMLとCSSの関係を疎結合に保つことができるのでしょうか。また、適切なクラス設計って具体的にどんなものでなのでしょうか。

SMACSS

本書には、上のような問いに対する一つの答えが書かれています。本書のタイトルになっている「Scalable and modular Architecture for CSS」、略して「SMACSS」が、そのための方法や考え方を提供してくれます。

SMACSSは、著者がYahoo! Mailやその他多数のプロジェクトに携わることで得られた知見をまとめたものです。ダウンロードして、HTMLから読み込むようなライブラリ/フレームワークといった類のものではなく、HTMLとCSSの関係を疎結合に保つためのCSSの設計方針、あるいは設計理念になります。

SMACSSでは、CSSを以下の5つのカテゴリに分割して、それぞれのカテゴリごとに適した方法でスタイルを定義していきます。

  • ベース:
    特定のHTML要素や擬似クラスに対してデフォルトのスタイルを定義する
  • レイアウト:
    ページを複数のセクション(ヘッダー、フッター、サイドバーなど)に分割するためのスタイルを定義する
  • モジュール:
    レイアウトの中に配置する再利用可能なモジュール(メニュー項目、商品リストなど)のスタイルを定義する
  • 状態(ステート):
    モジュールやレイアウトの特定の状態に対してスタイルを定義する
  • テーマ:
    切り替え可能なスタイルのバリエーションを定義する

このようにCSSを分割し、さらに、セレクタに対してカテゴリに応じた命名規則を設けることで、再利用可能でかつメンテナンス性の高いCSSを記述することができるようになります。詳細は割愛するので、続きは是非本を買って読んでみてください。

読んでみて

メンテナンス性の高いCSSが書けるようになりたい、と意気込んで読みましたが、とてもに参考になりました。今までは暗中模索状態で、どうすればきれいなCSSが書けるのか色々探りながら書いていたのですが、イマイチ自信が持てない状態でした。これからは、困ったときに本書を参照することで、今までよりも自信を持ってスムーズにCSSを実装できるようになりそうです。電子書籍だから、いつでも好きなときに目を通すことができますね。

なお、本書にも書いてありましたが、すべてのプロジェクトでSMACSSの考え方をそのまま当てはめる、なんてことは考えなくていいようです。これはきっとひとつの答えにすぎなくて、他にも様々な考え方があるってことでしょう。

実際に、世の中にはSMACSS以外にもCSSの設計理念を提供する考え方・ツールがあるようです。まだまだ勉強不足ですが、色んな考え方に触れながら、CSSに関する自分なりの哲学を確立し、状況に応じて最適なアプローチを採用できるようになれれば、と思います。まだまだ先は長いですね。

「こういう考え方もあるよ」「これも勉強してみたら」など、オススメ等ありましたらコメント等で教えていただけると喜びます。それでは以上です。ありがとうございました。