オブジェクト指向CSS（OOCSS）設計とは？基本の書き方を解説

みなさんは、CSSをオブジェクト指向型の設計をしていますか？OOCSS（Object Oriented CSS）とも呼ばれる、この概念は「構造とスキンを分離する」設計手法です。
チーム開発の現場や規模の大きいサイト制作で、オブジェクト指向CSSは特に真価を発揮します。本記事では、これからCSSを学ぶ人でも理解できるように、OOCSS解説をしていきます。

オブジェクト指向CSS（OOCSS）設計とは

まず、オブジェクト指向CSS（OOCSS）設計とは何かについて解説していきましょう。
これからサイトを作る人が、いざCSSのコードを書こうと思ったとき、どこから始めればいいのかわからないと思います。また、CSSでクラス作成時のルールを何も決めずに作り始めたため、名前が違うだけの同じスタイルのクラスが書かれているなど、コードの管理ができていない人も多いはずです。このような事態を防ぐために考えられたのが、明確にルールを決めてCSSコードを作成するCSS設計です。
その中でも人気の設計手法が、オブジェクト指向の考え方でCSSコードを設計するOOCSS（Object Oriented CSS）です。

そこで、なぜOOCSSが人気なのか、OOCSSを使うメリットについて紹介していきましょう。

再利用性が向上する

OOCSSでは、オブジェクト指向の考え方を当てはめています。
オブジェクト指向型プログラミングの最大のメリットは、再利用性が向上する点です。一度定義したクラスを何度も再利用することで複雑なコードを何度も書く必要がなくなり、効率の良いサイト制作ができます。また、仕様が変更になったときや、不具合が発生したときの修正が容易になる点も大きなメリットです。

チーム開発では必須

チームでサイト制作を行っているのであれば、OOCSSは必須ともいえる設計手法です。
チームで開発を行う場合、個人でサイト全体のコードを把握することは難しく、各担当箇所を割り振られます。そして、担当箇所のコードは、明確に決められたルールに従って書く必要があります。
自分の好みで自由に書いたコードだと、サイトに仕様変更があった場合、「一部の表示だけ新しい仕様が反映されない」といった不具合が発生してしまいます。また、CSSがシンプルになるため、担当者が変わっても理解できるコードを書くためにも、チーム開発では必要な考え方です。

オブジェクト指向CSS（OOCSS）の書き方

それでは、オブジェクト指向CSS（OOCSS）の書き方について解説していきます。
OOCSSで書くときに、重要となる考え方は次の2つです。

• 構造と見た目を分離する
• コンテナとコンテンツを分離する

それぞれの考え方について、詳しく見ていきましょう。

構造と見た目を分離する

OOCSSにおけるオブジェクト指向は、「構造」と「見た目」を分離することがメインの考え方です。
簡単にいうと、位置や大きさなどの構造に関するプロパティと、色情報などの見た目に関するプロパティを、同じクラスの中で記述してはいけないということです。
実際にサンプルコードを使って詳しくみていきましょう。

まずは、OOCSSができていないダメな例がこちらです。

See the Pen
VwjyNdv by sho-go (@sho-go)
on CodePen.

次に、OOCSSを意識したおすすめの書き方がこちらです。

See the Pen
QWEaPxQ by sho-go (@sho-go)
on CodePen.

両コードとも出力結果は同じですが、構造に関する位置や大きさを指定した「display」「padding」プロパティと、見た目に関する色情報である「background-color」プロパティを別のクラスに分けました。
クラスを分けたことにより、コードがとてもシンプルになりました。また、今の構造を変更する場合には、1つのクラス（label）を書き換えるだけで、全ての出力結果に反映されます。

コンテナとコンテンツを分離する

OOCSSでは、再利用性を高めるためにコンテナとコンテンツの分離も推奨されています。
再利用する要素がコンテンツで、その要素の大枠の要素がコンテナです。わかりやすくいうと、「親子で指定するのはやめましょう」ということです。

こちらも実際にサンプルコードを使って詳しくみていきましょう。

See the Pen
dyXJLjo by sho-go (@sho-go)
on CodePen.

test1クラスは、sampleクラスの子要素なので、sampleクラス内でしか適用されません。一方、test2クラスはsampleクラスと親子関係にないため、複数クラスを指定することで両クラスの要素が適用されます。
子要素クラスを頻繁に使うと、コードが複雑になりやすく、クラスの再利用が難しくなります。そのため、特別な理由がない限り、クラスの親子関係を設定するのは避けるようにしましょう。