タイトル煽りすみません。idもidで使い方によっては大事です。。。
ただし実際のところ、CSSの設計でid（#）がかなり減ってるのをご存知でしょうか。近年のフロントエンドの流行ではidをちょいちょい使うよりも「めんどいから全部class（.）にしてしまおうぜ」っつー流れがあります。
……とはいっても、「めんどいから」というのが唯一の理由なのではなく、まぁ色々理由はあるのですが、その中のひとつに「OOCSS（Object-Oriented CSS）の思想が普及してきたから」があって、今回はそのOOCSSについて どんなバカでも分かるように サワリをご紹介したいと思います。
よかったですね、OOCSSを知らなかった愚かなフロントエンジニアの皆さん！
ご紹介したいと思います。
これでようやく、HTMLとCSSができるだけで「プログラミングもちょっとできます」なんて言っちゃうデザイナーやらディレクターやらよりも、一歩だけ前に進むことができますね！
ご紹介したいと思います。
CSSをオブジェクト指向でかく
オブジェクト指向というのは簡単にいうと「再利用できるように」且つ「無駄がないように」クラスを設計しろってことです。（言葉で説明するのは難しいですが、、、）
その考えをCSSに適用しようぜというのが「OOCSS（Object-Oriented CSS）」。
一言でいうと「構造と見た目を切り離せ」です。
今回は初心者向けということで、サワリの部分というか主にマルチクラスについて記述しますね。
例：idを使った従来のCSS
下のようなHTMLとCSSで、キャラクターをふたり紹介するページがあるとします。
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#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を取り入れたクラス設計
|
1 2 3 4 5 6 |
<div class="box blue-box"> ... </div> <div class="box red-box"> ... </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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に
|
1 2 3 4 |
.green-box { background-color: green; color: white; } |
と追記し、あとはHTMLの好きな場所に「class=”box green-box”」と書けばいいだけなので、クラスの再利用性もありますね。
応用編：Sass + OOCSS
ちなみにSassを使う下のような書き方もあります
|
1 2 3 4 5 6 |
<div class="box man-box"> ... </div> <div class="box woman-box"> ... </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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; } |
特にサービスが大規模になればなるほど、再利用性やメンテナンスのしやすさは効果を発揮します。
「グチャグチャなクラス設計」という言葉でグサッとくる方は、OOCSSの導入をぜひ検討してみてください。
最新のCSSの書き方を学びたい方
これ買っときゃOKです。
