search

manabuyasuda / styleguide

arrange coding rule.
MIT License
164 stars 32 forks source link

[OOCSS] OOCSSとはなにか？ #27

Open manabuyasuda opened 8 years ago

manabuyasuda commented 8 years ago

OOCSSとは何か？

OOCSSはNicole Sullivanが提唱したCSSの設計手法のひとつです。
OOCSSは「Object Oriented CSS」の略でオブジェクト指向のCSSという意味です。オブジェクト指向はプログラミングの手法のひとつで、CSSにおけるオブジェクト指向は機能ごとにクラスを作って、それを組み合わせることでページを作成していく方法です。

CSSは壊れやすい。始めることは簡単だけれど。
ファイルサイズは確実に増えていきます。なぜなら、コードの再利用はほとんどされないからです（自分が書いていないコードは信じられないです）。
最初はクリーンなコードも壊すことは簡単です。始めることが重要なのではなく、クリーンに保ち続けることが重要なのです。
クレバーなモジュールを書きましょう。さもなければ、ブロックやページ、複雑なコンテンツが増えるごとにコードも増え続けます。

Object Oriented CSSというスライドの冒頭で、このようにニコール・サリヴァンは言っています。この課題を解決する方法としてOOCSSが考えられました。OOCSSは2009年に発表され、今ではCSS設計の基礎になっています。

OOCSSには2つの重要な原則があります。

  1. 構造と見た目を分離する（Separate Structure and Skin）
  2. コンテナとコンテンツを分離する（Separate Container and Content）