First Look: Object Oriented CSS

First Look: Object Oriented CSS

Object Oriented CSSを提案．

location-based selectorを使わず，あくまでattributeとしてstyleを指定することで，どの部分を取り出して，他のところに持っていっても同じレンダリング結果が得られる．（カプセル化）

body.onsale .sidebar {
background-color: #FFA500;
}

とするのではなく，

.onsalesidebar {
/* extends .sidebar */
background-color: #FFA500;
}

あるスタイルを元にするときは新たなスタイルを作るのではなく，extendsして再利用．もちろん，実際にextendsがあるわけではないので，HTMLの中で親から順に指定する必要がある．（継承）

メリットとしては，パフォーマンスの向上があるということ．CSSは小さくなり，HTMLは大きくなるが，CSSのロードが終わらないとレンダリングができないのに対して，HTMLはincrementallyにレンダリングが可能なことと（レイテンシーの向上），CSSセレクターの負担が小さくなりレンダリング速度が向上する（スループットの向上）．

また，デザインとHTMLの構造が分離されているため，チームでの作業に向いている．