タイトル煽りすみません。idもidで使い方によっては大事です。。。

ただし実際のところ、CSSの設計でid（#）がかなり減ってるのをご存知でしょうか。近年のフロントエンドの流行ではidをちょいちょい使うよりも「めんどいから全部class（.）にしてしまおうぜ」っつー流れがあります。

……とはいっても、「めんどいから」というのが唯一の理由なのではなく、まぁ色々理由はあるのですが、その中のひとつに「OOCSS（Object-Oriented CSS）の思想が普及してきたから」があって、今回はそのOOCSSについて ~~どんなバカでも分かるように~~ サワリをご紹介したいと思います。

~~よかったですね、OOCSSを知らなかった愚かなフロントエンジニアの皆さん！~~

ご紹介したいと思います。

これでようやく、HTMLとCSSができるだけで「プログラミングもちょっとできます」なんて言っちゃうデザイナーやらディレクターやらよりも、一歩だけ前に進むことができますね！

ご紹介したいと思います。

CSSをオブジェクト指向でかく

オブジェクト指向というのは簡単にいうと「再利用できるように」且つ「無駄がないように」クラスを設計しろってことです。（言葉で説明するのは難しいですが、、、）

その考えをCSSに適用しようぜというのが「OOCSS（Object-Oriented CSS）」。

一言でいうと「構造と見た目を切り離せ」です。

今回は初心者向けということで、サワリの部分というか主にマルチクラスについて記述しますね。

例：idを使った従来のCSS

下のようなHTMLとCSSで、キャラクターをふたり紹介するページがあるとします。

HajimeとMaria

<div id="character1-box">
	<h1>Hajime</h1>
	<p>This is Hajime. He is a genius man.</p>
	<img ...
</div>
<div id="character2-box">
	<h1>Maria</h1>
	<p>This is Maria. She is a beautiful woman.</p>
	<img ...
</div>

<h1>Hajime</h1>

<p>This is Hajime. He is a genius man.</p>

<img ...

</div>

<h1>Maria</h1>

<p>This is Maria. She is a beautiful woman.</p>

<img ...

</div>

#character1-box {
	float: left;
	width: 350px;
	background-color: blue;
	color: white;
	text-align: center;
}
#character2-box {
	float: left;
	width: 350px;
	background-color: red;
	color: white;
	text-align: center;
}

#character1-box {

float: left;

width: 350px;

background-color: blue;

color: white;

text-align: center;

}

#character2-box {

float: left;

width: 350px;

background-color: red;

color: white;

text-align: center;

}

上記のCSSの例だと、ふたつの異なるクラスに「同じプロパティ・同じ値」が入っており、冗長です。

また、HTMLを見ただけではどんな見た目なのか想像できない。

というわけで、これをOOCSSにしたいと思います。

例：OOCSSを取り入れたクラス設計

HajimeとMaria

<div class="box blue-box">
	...
</div>
<div class="box red-box">
	...
</div>

...

</div>

...

</div>

.box {
	float: left;
	width: 350px;
	text-align: center;
	background-color: white; // デフォルト値
	color: black; // デフォルト値
}
.blue-box {
	background-color: blue;
	color: white;
}
.red-box {
	background-color: red;
	color: white;
}

.box {

float: left;

width: 350px;

text-align: center;

background-color: white; // デフォルト値

color: black; // デフォルト値

}

.blue-box {

background-color: blue;

color: white;

}

.red-box {

background-color: red;

color: white;

}

.boxという「構造」と、.blue-boxや.red-boxという「見た目」が切り離せています。

CSSはちゃんと共通化できるところは共通化してあり無駄がなく、さらにHTMLを見るだけで何色のボックスなのか分かりますね。

後者は意外と重要なことで、たとえばディレクターが「このキャラクターの背景色、逆の方がいいな」と思ったとき、一つ目の例だと「HTMLを見てidを確認し、それに応じたCSSを触って、あるいはgruntやsassなどのコマンドをターミナルで実行してCSSを吐き出し……」をしなきゃなので、結局フロントエンジニアに修正指示が飛んできます。

しかしOOCSSの場合は、HTMLを見て「red-box」と「blue-box」を入れ替えればいいだけなので、非常にメンテナンスもしやすく、フロントエンジニアはクソみたいな小さい仕事が減り、メインの開発の仕事に集中できるわけです。

また、「背景色に緑を追加したい」という要望がでたときも、CSSに

.green-box {
	background-color: green;
	color: white;
}

.green-box {

background-color: green;

color: white;

}

と追記し、あとはHTMLの好きな場所に「class=”box green-box”」と書けばいいだけなので、クラスの再利用性もありますね。

応用編：Sass + OOCSS

ちなみにSassを使う下のような書き方もあります

<div class="box man-box">
	...
</div>
<div class="box woman-box">
	...
</div>

...

</div>

...

</div>

.box {
	float: left;
	width: 350px;
	text-align: center;
	background-color: white; // デフォルト値
	color: black;  // デフォルト値
}
.man {
	background-color: blue;
	color: white;
}
.woman {
	background-color: red;
	color: white;
}

.man-box {
	@extend .box;
	@extend .man;
}
.woman-box {
	@extend .box;
	@extend .woman;
}