最近困った事などを反省する意味も込めて、新しい手法を身につける必要があると感じたので、今更ながらOOCSS(Object Oriented CSS)についてちゃんと考えてみることにしました。
とりあえず今日のところはメモ程度です。　英語。。。全く自信がないので、誤りをご指摘いただけると大変助かります（願

なんでやろうと思ったか

個人的に、最近はCMS絡みの案件がとても多いです。
CMSのテンプレートなどを書く場合もあれば、その基礎となるHTML/CSS/JSあたりを書く場合もあります。

その際に、予めかなり様々なパターンをシミュレートして、利用するレイアウトなどが全て用意されている状態でスタート出来れば特に問題ないと思うのですが、そんな事は稀で、実際には「似たような見た目だけどちょっと違う」みたいなのがどんどん増えていって、更に仕様変更が入ったりするので、スケジュールによっては「我ながらスゴイ！（悪い意味で）」と思える程スパゲティーになっちゃう事も多々......

そんなこんなで良き方法は無いかと考えていたのですが、「HTML汚してCSSスッキリって本末転倒じゃね？」とOOCSSは敬遠していました。
他に、Clearleftのフロントエンドの人がCSS Systemsという開発スタイルを発表していましたが、こちらはどちらかというとレギュレーションというか、マークアップのガイドラインみたいな内容に思えました。

ただ、双方で一致していた（と感じた）のは「再利用」というキーワードです。

実際には、海外と日本とではデザインの作りからして違うので、フレームワーク的なものを作ってもなかなか再利用は難しいのですが、多数の案件で再利用するのではなく、「大規模なサイト」「WEBアプリケーションなどのUI」「CMSの利用などで運用フェーズも意識」といった案件では、ある程度有用かもしれない。　けど、書いてみた事がないから、こまか〜い部分で色々ゴニョゴニョあるかも？

という訳、ちょっと書いてみようかと。
で、今日のところは基本的な概念というか、方針というか。　その辺をメモしておきます。

OOCSS概要

まずは、色々読みました（日本語では、まだ実践レベルの深い話は見つかってません）。

参考サイト

• WDE08 Blog: Object Oriented CSSとCSS Systems
  ビデオとかスライドが紹介されてます。オリジナルを見るのに。
• はてぶ
• マイコミ
  大筋だけ日本語で掲載されてます。

主な目的

• 構文的にどうこうとかclass名が云々とかではなく、目的優先
• パフォーマンスを重視する
• 再利用できるようにする

多分、これらを踏まえて、

• 設計者とコーダーを分けて効率化
• 組み合わせだけで様々なバリエーションを作れるように

とかも考えてるのかな？

「実用はどうかな？」といった感じだけど、一回作ってみても損はないかな。
この後から本文ですが、怪しい訳がはじまります。
非常に怪しいので、アテにしないでください（汗

ページやモジュール単位ではなく、目的単位で

これは、もうちょい情報が欲しいところですが、「レイアウトだけ」「内容だけ」「見た目だけ」といった感じでclassを作りましょうという話だと理解しました。

ものすごい極論で例を挙げれば、

<ul class="unordered">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>
<style>
.unordered {
    list-style: disc;
    margin: 1.5em 0;
    padding: 0 0 0 2.0em;
}
</style>

こんなのを

<ul class="disc margin padding">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>
<style>
.disc {
    list-style: disc;
}
.margin {
    margin: 1.5em 0;
}
.padding {
    padding: 0 0 0 2.0em;
}
</style>

こんな感じで書く。と。
class名もあり得ないし、これじゃstyle属性に書いてるのと変わらん！という内容ですが、あくまで極論だし例です。

目的に合ったデフォルトを設定

すみません。この部分は訳が全く合ってない気がします。
なのでスルー。

再利用可能でコンパクトな要素で

これは、最初の方でも書きましたが、「ひ孫くらいまで作り込んじゃったり、結構遡って継承させないとダメな作りにはしない」という意味だと思います。

サンプルで出てたのは、「bodyのidやclassを基点にしてスタイルを書き分けるのは止めよう」って内容でした。
あと、「ul li aとかしない」みたいな事も書いてあったけど、これは説明を聞かないと真意が掴めませんね。単純にPage Speedとか使った時に警告される内容の話かもしれませんが......←スライドを見直してないですが、これ、パフォーマンスの話ですよね。きっと（Mar 16, 2012追記）

構造と見た目（スキン）を分離

この辺からは、思想的には重複した内容ですが、より具体例って事でしょうか？

現時点では、この方法は、運用フェーズに入らないと効力を発揮しそうにないんだよな......
開発してる段階では、一カ所に書いておかないと、修正の都度あっちこっち飛ばなきゃいけないし......

まあ、書いてみないで判断するのは良くないですね。

型（入れ物）と（編集可能な）内容を分離

まあ、これも「コンパクトに」ってところを押さえれば同じ内容だと思います。

ただ、最近良く思うのは、ol liとかがマッサラになってると、CMSとかで「WYSIWYG編集して貰おう！」って決まった時にスゲー面倒だなあ。と。

「的に合ったデフォルトを設定」はこういう意味かな？（と思ったけど、oocss.orgを見ると、思いっきりリセットしてある。）

継承を使いこなす

原文では「飼いならす」的なニュアンスだったように感じますが、どっちみち真意が伝わってこないな。
この後出てくる、複数class指定と絡めて、「必要なトコだけoverrideするようにすればCSSがコンパクトになるよ」的な内容なのだろうか......後でもう一回読むか......（汗

複数クラス指定を使う

これは、すでに結構使ってるんですが、ネストした場合の事とかをよい深く考慮して設計する必要がありますね。
コンパクトなclassが一杯ある訳ですから、コンフリクトが怖いです。

最後に

ここまで読んでみると、「最近、こういう感じのサイト多いよな」と思います。

class名とかも「grid3」とかにしてありますね。
ただ、謎なのは、class使うよりidの方がパフォーマンス面では良さげなんですが、トータル的にどうなんだろう？←これ、やっぱり分かってなかったみたいですね（恥）（Mar 16, 2012追記）

自分用のメモとしては、これで十分かな？
「オブジェクト指向的にCSSを書こう」という試みは、OOCSSが話題になる前にチャレンジしたんですが、スケジュールに負けて最後グダグダになった経緯もあり、今度こそしっかり進めたいです。

percentage-grid （zip 3KB）

ごめんなさい。リンク切れてました。

• display:table;とdisplay:table-cell;を使う
• display:table;は、幅100%にしておく

という縛りだと「まあまあ、なんとか......」と言えなくも無いのだけど、グチャっとなるパターン（11分割した時とか）もあるので、実用は厳しいかもしれません。
でも、％ベースのグリッドを採用してるCSSフレームワークって、floatとかinline-blockとか使ってるのが多くて、サンプルページとか見てても、けっこうあれ（どれ？）なんですが、それで通るんですかね？Operaは無視なのかな......

一応、サンプルページも置いておきます。

ちなみに、下のリンク先の記事は2008年のです。

Sub-Pixel Problems in CSS （John Resig）

小さな追加機能として「アルファベット順にソートする」というのを入れました。が、最後に余計な改行が入っちゃうので、暇が出来たら修正します。

TextFormat （zip 11KB）

さて、CodaでSass使うとき、Sass.modeについてポストしている人は結構いるみたいですが、プラグインについてはあまり見つからなかったので、リンクを共有します。

Coda Sass Plug-in

「.scssを保存したら、自動で.cssを書き出したり」とかいう設定も出来るっぽいです。
Sassを試してみたいけど、黒い画面はちょっと...というアナタ。いかがでしょう？

現時点（2011年11月28日）では、まだ、誰が何を書くかはっきりしていませんが、非常に楽しみです！

全力でROM！なのですが、個人的には利用シーンというか「こういうケースでこんな使い方するとイイよー」みたいなのが聞ける（読める）と嬉しいなーとか思っています。

LessもSassも、まだまだ、軽ーくしか使っていないのですが、やはり、鍵になるのは「普及するかどうか」だと考えていて、それは、「ある程度、スタンダードな手法になれば、導入しやすくなるんじゃないかなー」とか「一人で使うなら他の手段もあるしなー」とかいうのが、軽ーく使ってみた印象です。

今のところ、Sass中心なので、Sassが主流になってくれると有難い！ ので、@extendとか@mediaとかを便利（とかカッコイイ感じ）に使ってるサンプルにも期待しています。

まだ、定員に達してない様子（2011年11月28日時点）なので、「書くぜ！」という方は、ぜひ！

「やばい、また今月も書いてないなー」というだけで書いた訳ではないですよ（汗

下図のような感じです。

これを回避するには、「iwloc=A」というのを「iwloc=」とする事で実現出来るっぽい。

APIがアップデートされたりとかすると、こういうのは変わると思うので、ご注意ください。

横幅が 100% の header を ~inner を使わずに実現する | ヨモツネット（デモ）

前提条件

元記事が読めなかったので、断言出来ないのですが、標準モードではIE6でも問題なさそうな感じでした。

やりたい事を上手く表現出来ないので、図でごまかします。下図のようなレイアウトを実現したい感じです。

書いてみる

HTMLは、下記みたいな感じで、「.inner」とかを使わないで書きます。

<div id="document">
    <div id="header">
        <h1>Header</h1>
    <!-- /div#header --></div>
    <div id="body">
        <p>Contents</p>
    <!-- /div#body --></div>
    <div id="footer">
        <h1>Footer</h1>
    <!-- /div#footer --></div>
<!-- // div#document --></div>

CSSは、下記みたいな感じです。関係あるトコロだけ書きます。

#document {
    position: relative;
    min-width: 960px;
    overflow: hidden;
    _width: 960px;
    _margin: 0 auto;
    _position: static; }
    #header, #footer {
        width: 960px;
        /* margin-leftは「padding-leftと、幅の半分を足したサイズ」をマイナスする */
        margin-left: -5480px;
        padding: 0 5000px;
        position: relative;
        left:50%; }
    /* 今回、メインコンテンツ部分は普通（？）に */
    #body {
        width: 960px;
        margin: 0 auto; }

「padding」の値は適当に。 「どのくらいの画面サイズを想定するか」ですかね。

条件によっては上手くいかない場合もあるかもしれません。 デモは下記。

.innerとか使わない（デモ）

簡略化すると「複数行の検索・置換するとき、1行テキストボックスだと使いにくいよね」「できます」という話です。

「先月書いてないなー」というだけで書いた訳ではないですよ（汗

Cross-Browser CSS in Seconds with Prefixr

見てたら、TextMateで使う場合のサンプルとかあったので、Codaのプラグインにしてみました。 例によって、全くと言って良いほど検証していませんが、置いておきます。 よろしければお使いください。

Prefixr （zip 6KB）

使う時は、

/* 例えば、こんなん書いて、選択します（1行だったら、zen-codingの「ctrl + L」とかでいける） */
.foo {border-radius: 5px;}
/* 「cmd + shift + ctrl + P」すると、 */
.foo {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

また、

/* 以下のように他のプロパティが混ざっていた場合は, */
.foo {
  width: 100%;
  border-radius: 5px;
  font-size: 1.2rem;
}
/* こんな感じです。 */
.foo {
  width: 100%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  font-size: 1.2rem;
}

見た目を調整してませんが、プロパティの前にはタブでインデントが入ります。

セレクタが無いまま、「border-radius: 5px;」だけ選択しても動作しますが、最後のセミコロンを省略してたりするとダメっぽかったです。

「俺、シングルラインで書いてるし」という人は、もう一度選択して、zen-coding（Tea for Coda）の「ctrl + M」すれば、イイんじゃないすかね？

といった感じです。

出来る事も出来ない事も、Prefixr次第という感じで、今のところ、たぶん、オプションは使えません。 あと、当然、オフラインだと使えないです。

現在（2011年7月22日）、配布停止されているのですが、理由は「ConvertKanaを利用し「全角カナ→半角カナ」変換を行い、変換後のファイルをIEで開くと濁点のある文字の表示が崩れる現象が確認されました。」との事。

かつて、このブログでも、さりげなく、似たようなものを配布していたのですが、仕組みは同じだったので、当然、同様の問題を抱えていました。 「でも、使いたい！」という事で修正中なのですが、なんとなく動いているっぽいので晒しておきます。
※（恒例となりつつありますが）きちんと動作確認出来ていないので、バグなどありましたら、是非、お知らせください。

TextFormat （zip 12KB）

たぶん、使い方とか書く必要無いと思いますが、リクエストがあれば追記します。