hajipion.com

UI/UX designer blog & creative portfolio

サルでも分かるOOCSS(オブジェクト指向CSS)。未だにidを使っている愚かなフロントエンジニアへ

サルでも分かるOOCSS(オブジェクト指向CSS)。未だにidを使っている愚かなフロントエンジニアへ

タイトル煽りすみません。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

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

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

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

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

HajimeとMaria

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

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

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

こんなことくらい自分でやれよカス

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

これくらいなら僕でも修正できそうだから!

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

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

応用編:Sass + OOCSS

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

特にサービスが大規模になればなるほど、再利用性やメンテナンスのしやすさは効果を発揮します。

「グチャグチャなクラス設計」という言葉でグサッとくる方は、OOCSSの導入をぜひ検討してみてください。

最新のCSSの書き方を学びたい方

これ買っときゃOKです。


Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法