• FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業

Webデザインメモ

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

2017年5月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の記述を見直してみませんか?