現在、事務所のホームページは、自分で作っています。
いろいろな本を参考にして、すこしずつ改良を加えています。
オブジェクト指向CSSとの出会い
前回、紹介した本のお蔭で、事務所のホームページの体裁をさらに整えられました。
さらに、デスクトップファーストではありますが、レスポンシブに対応できました。
そんな一段落ついたある日、ネットで何かを検索していたときに出会ったのが、オブジェクト指向CSS（OOCSS）です。
気になるオブジェクト指向CSS
いままで読んできた HTML と CSS の本の中では、残念ならがオブジェクト指向CSS なんて、一言も触れられていません。
本を出版するような本職の人が、知らない訳ないので、きっと紙面の都合上、涙を飲んで割愛したのでしょう。
そのオブジェクト指向CSS とは、何なのかを知るために選んだのが「Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法」です。
この本の内容
CSS という言語は、言語の性質上、簡単な記述でスタイルを定義できてしまいます。
しかし、簡単すぎるがゆえに、好き勝手に書けて、それでも何とか、それらしい見た目にできます。
ただ、いい加減な運用をしていると、CSS のコードが破綻してしまうことになります。
この本では、どのようにすれば、CSS のコードが破綻しにくくなるのかについて、いろいろな解決法が提案されています。
この本で初めて知ったこと
この本では、特につぎのようなことを新しく勉強できました。
- マルチクラス（HTML の class の中には、複数のクラスを書けること）
- すでに、オブジェクト指向CSS に基づいた様々な解決法が存在すること（CSSフレームワークとして有名な Bootstrap もその一つです）
- Sass などの CSSプリプロセッサ（簡単な Sass の記述で、複雑な CSS を生成できる）
- CSS Lint（CSS の不適切な記述をチェックしてくれるツール）
- CSSComb（CSS のプロパティを指定の順番に、並び替えてくれるツール）
最後の 2つのツールは、ボクにとって CSS を記述する上で、無くてはならない存在です。
ボクの使っているエディタ（Brackets）に、拡張機能として導入しています。
マルチクラスを知って
特に、マルチクラスを知ったときは、目からウロコが落ちました。
それまでは、シングルクラスしか知らなかったので、すべてのスタイルを 1つのクラスに割り当てていました。
すると当然、同じようなスタイルをいろんなクラスに、書くことになってしまいます。
マルチクラスを知ってからは、カテゴリごとにクラスを分けて、スタイルを定義することにより、共通するスタイルを再利用できるようになりました。
実は、アイコンフォントの Font Awesome では、マルチクラスを採用しています。
よく使っていたのに、まったくそれと気が付きませんでした。
あとがき
この本に書いてある内容は、たぶん Web製作を仕事にしている人に向けたものです。
平易な文章で、画像などを使ってわかりやすく説明されていますが、理解するためには、ある程度専門用語を知っている必要があります。
この本は、CSS 設計について考えるキッカケになる本です。
この本を読み終わって、実際にどの解決法を選ぶかは、アナタ次第です！
コメント