少し前の記事ですが、2014年10月26日に The Sass Way に掲載されていた OOCSS（オブジェクト指向CSS） の記事が実践的でとても役に立ったので紹介したいと思います。

以下、こちらの記事の翻訳となります。
"Using Object-Oriented CSS with Sass" by Jaime Caballero
（掲載許可いただいております）

Sass を利用したオブジェクト指向 CSS を使おう（翻訳）

Nicole Sullivan 氏は、2008年の Web Directions North で、最初にOOCSSを世界に紹介した。それ以降、CSSを系統立てるための最も重要なモジュラーシステムのひとつとして知られるようになった。

OOCSS は、SMACSS や BEM のような他のCSSメソッドと違うわけではない。それらはすべて、再利用できるモジュラーブロックの中にCSSスタイルを置くことによって、構造からコンテンツを分離しようとしている。実際に、私はたいてい SMACSS と OOCSS を組み合わせている。（Editors note: 私たちは Modular CSS についても広範囲にわたって書き終えたところだ。The Sass Way はこちら）

今日は、オブジェクト指向CSS の基本的な考え方をあなたたちに教えよう。Sass を使った一番効率のよい方法でOOCSSをどう実現するかについても少しアドバイスしていこうと思う。

オブジェクトって何？

「繰り返し使えるビジュアルパターンで、HTML、CSS、または JavaScript の、独立したスニペットへと抽象化できるもの」

- Nicole Sullivan

抽象化とは、あなたが CSS Object をつくるときに真っ先に検討すべきものだ。コードを分離し系統立てるためのベストな方法とはいったいなんだろうか。Nicole Sullivan （OOCSS の作者である）は2つの主な原則を定義している。

・構造と見た目の分離
ベースオブジェクトの中には構造と配置、そして拡張クラスの中には（background や border のような）視覚的な特徴を保持するべきである。この方法では、決して視覚的なプロパティーを上書きしてはいけない。

・コンテナーとコンテンツの分離
CSS の中では、HTML の構造を模倣してはならない。言い換えると、スタイルシートではタグやIDを参照するなということだ。代わりに、当該のタグの用途を記述するクラスをつくって利用しよう。そして、ネストしたクラスは最小限になるようにしよう。

短い実例を見てみよう

これらの考え方を適用することは、初めのうちは難しいだろう。以下のような実際のコードでどのように作用するかを見てみよう。

/* The bad way */
.box-1 {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
.box-2 {
  border: 1px solid #ccc;
  width: 120px;
  height: 120px
  border-radius: 10px;
}

注意して見ていくと、いくつかの変数を繰り返していることに気づくだろう。このケースでは、border スタイルは両方のクラスの定義の中で重複している。
つまり、もし border-radius や border プロパティを変更しないといけないとしたら、このプロパティの組み合わせを使ったすべての場所をチェックする必要があるだろう。

この問題を解決するために、視覚的なプロパティを他のクラスへ抽象化しよう。

/* The good way */
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}

これで、これらのクラスを HTML 要素へと適用し、拡張オブジェクトをつくるために組み合わせることができる。

<div class="box-1 box-border">Lorem ipsum</div>
<div class="box-2 box-border">Lorem ipsum</div>

セマンティックと保守はどうする？

セマンティックでないことは気にしなくてよい。私は保守することに関心がある。例えば、前掲の CSS は HTML 内ではそう思われるだろう。

静的な CSS でオブジェクトをつくる唯一の方法は、セマンティックでないクラスを定義することなのだ。しかしながら、いくつか問題はある。

• スタイルの変更が必要になったときは毎回 HTML を変更しなければならない
• いくつかの DOM 要素にアクセスするのに安全な手法ではない。

保守ができない HTML に比べると、OOCSS はすべてにおいて素晴らしい。私たちの CSS コードは、拡張性があり、保守が簡単で、抽象化されたクラスの再利用によって新しいコンテンツをスタイルするのも簡単にできる。

つまり、CSS における役割をコード化し、それらを HTML で 拡張(extend) する。これがベストな方法だろう。

Sass がよい影響をもたらす

あなたはきっと Sass の @extend 命令について聞いたことがあって、もちろんどう作用するかも知っているだろう。そう、私たちは placeholder セレクタ* のおかげで、Sass の中で extend したり、CSS の中でセマンティッククラスを作ったり、HTML に関する問題を解決したりすることができる。

訳注）Placeholder Selectors
プレイスホルダーセレクタとは、Sass 3.2 から使えるようになった、再利用できるスタイルセットを % キーワードで指定する extend 専用のセレクタ。

私たちは placeholders をオブジェクトとして扱うべきで、@extend を通してマージすることによってのみ作られるクラスを定義する。これは、素晴らしい DRY な CSS コードを産み出す。

/* The bad way */
a.twitter {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
  background: #55acee
  color: #fff;
}
span.facebook {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
  background: #3b5998;
  color: #fff;
}

これまで見てきたものをすべて適用し、ベースオブジェクトを @extend を使って組み合わせれば、とても保守が簡単で私たちがこの先 HTML を変更する必要のない、きれいなオブジェクト指向CSS を手に入れることができる。

/* The best way */
%button {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
%twitter-background {
  color: #fff;
  background: #55acee;
}
%facebook-background {
  color: #fff;
  background: #3b5998;
}

.btn {
  &--twitter {
    @extend %button;
    @extend %twitter-background;
  }
  &--facebook {
    @extend %button;
    @extend %facebook-background;
  }
}

これはHTML の中でも簡単に扱える、効率的なコードを産み出す。

<a href="#" class="btn--twitter">Twitter</a>
<a href="#" class="btn--facebook">Facebook</a>

素晴らしくセマンティックではないだろうか。Sass が私たちの問題を解決してくれた。覚えておこう： セマンティックなまま、HTML の保守を簡単にしたいのであれば、Sass にセマンティックでない部分を取りまとめて entend すること

私はこれを OOSass と呼んでいる、なぜなら OOCSS と Sass の入り混じったもので、オブジェクトは Sass 側に作られているからだ。でももちろん、必ずしもあなたが使う必要はない。セマンティックでない HTML コードが気にならないのであれば、あなたは従来通りの方法で OOCSS を使えばいい。それは人の好みだ。最近、あなたはどのように CSS を組み立てているだろうか？

October 26, 2014 ~ Intermediate, Jaime Caballero

参考リンク

The Sass Way - Using Object-Oriented CSS with Sass

こちらが翻訳した記事です。

OOCSS

Nicole Sullivan 氏のオブジェクト指向 CSS についてのスライドです。