【ホームページ】HTMLとCSSはこの本で勉強しました その3 (オブジェクト指向CSS篇)

ホームページ
この記事は約4分で読めます。

現在、事務所のホームページは、自分で作っています。

いろいろな本を参考にして、すこしずつ改良を加えています。

スポンサーリンク

オブジェクト指向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 設計について考えるキッカケになる本です。
この本を読み終わって、実際にどの解決法を選ぶかは、アナタ次第です!

コメント

タイトルとURLをコピーしました