Webデザインメモ2017.05.08

CSSは、構造と見た目と分けて記述しよう: 「OOCSS(オブジェクト指向CSS)」について

コーディングに慣れてきたので、もっと効率的に早くhtmlが組めるようになりたいという方は、「OOCSS」で組んでみましょう。

「OOCSS」とは、米ヤフーのNicole Sullivan氏が提唱したcssの記述方法です。
構造(パーツ)とスキン(見た目)を分離してクラス定義し、それらを組み合わせてスタイルを定義していきます。

構造とスキンの分離の例として一番分かりやすいのは、CSSフレームワークである「Bootstrap」ではないでしょうか。

例えばボタンですが、buttonタグのクラス名に「btn」という構造と、「btn-primary」というスキンとの組み合わせにより、青色のボタンを作ることができます。同じ構造で、緑色に変えたい場合は、「btn-primary」を「btn-success」に変更するだけです。

OOCSSの最大のメリットは、「基本的なクラスやよく使うクラスは、別サイトでもそのまま使いまわせる」ことです。
先ほどのBootstrapのボタンのように、ページに依存しないcssやクラス名にしておくことで、どのサイトでも同じように使用できるのです。


注意としては、
【「見た目」のままクラス名をつけないこと。】です!

赤いボタンに対してclass=“red_button”とクラス名をつけたとします。
しかし後で色が青に変更になった場合、「青色のボタンなのに、class名が”red”」となり、後で管理が面倒なことになってしまいます。
この場合は、見た目に変更が入っても大丈夫な名前にしましょう。(link_buttonなど)


Bootstrapを参考に、効率の良いcssの記述を見直してみませんか?

このブログについて

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。

Webデザインメモ