[&] Web Directions East 2009 (Nicole Sullivan)

Nicole Sullivan | Web Directions East

Design Fast Websites - Nicole Sullivan

Design Fast Websites

View more documents from Nicole Sullivan.

Nicole Sullivan
『高速ウェブアプリのためのCSSパフォーマンス』
------------------------------------------------------

今日は CSS アーキテクチャについて紹介します。
http://www.slideshare.net/stubbornella
@stubbornella

カスケードの基本について
高速なアーキテクチャ
エンタープライズサイズのスケールのため

カスケードを理解する。
BROWSER default Styles
すべてのブラウザが難しいスタイルシートを持っている。
さまざまな要素、デフォルト値をもっている。
そこにたくさんバグがあることもわかっている。
ブラウザごとにさまざまなバグがある。0じゃないのに0値だったり。
不必要なコードになりがち。
リセットコードを用いる。
開発の負担も軽減される。

CLASS ORDER

Borken!

同じメッセージが入っていて、わからない。

ORDER OF THE PROPERTY VALUE PAIRS
BROWSER IGNORES BITS ITDOESN't UNDERSTAND
理解できない CSS をブラウザが無視してしまう。
スペルミスの場合。color と colour など。エラーにならない。

ORDER of the RULESETS
大きな web サイトで何人で作業すると、
同じ定義が重なってしまう。

ORDER of the stylesheets
コンフリクトした場合、最後の定義が採用される。どれが勝つのか？
FROM the spec:
It Goes on...

実際に CSS の開発には、早く結論をださなければいけない。

ID AND CLASS
#nav p{color: red}
.nav p{color: blue}

INLINE STYLES
エクスターナルなものよりインラインのものが勝つ。
!IMPORTANT で強制する。

CSS INHERITANCE
インヘリタンスは親から子に継承される。

AGGREGATION OF RULES
くつかのクラス、それぞれのメッセージクラスのインタンス。

理解できればいろんなことができる。
スパゲッティコードになる。

CSS IS AWESOME

CODE IS TOO FRAGILE
新しい人に渡すと壊されてしまう。
専門家がわかっていることがわからないため。
成熟性が必要。
何回もコードを書いている。
web チームで使えるものだけを公開していく。
いい開発者はすぐにでてこない。

CODE RE-USE IS ALMOST NONEXISTENT
コードの再利用はしない。

FILE SIZE JUST KEEPS GETTING BIGGER

非常に複雑な CSSコードを書いてしまっても、
アーキテクチャの中に入っていかない。
非常にパフォーマンスの高いサイトでも数ヶ月で CSSが大きく、遅くなっていく。

HOW TO ARCHITECT CSS
オブジェクトオリエンテッドな CSS
CSSさらにパワフルにしていく
違いは？
今までは括弧の中だけを見ていた。
どのようにセレクタを選ぶかが重要。

TERMINOLOGY CAN BE CONFUSING
クラスといっても CSSなのか Java なのか。サブノートという意味なのか。
できる限り、何を意味しているのか示す。

OOCSS
wiki.github.com/stubbornella/oocss

HEDDINGについて
デザイナーは何を意図しているのかをつきとめる。
エレメントを再利用する。
いろいろなパーツを持ってくる。

AVOID DUPLICATION
二度手間を避けるようにする。
いいツールは無い。
ほとんど同じようなモジュール、ほとんど差異がないようなものを省く。
同じサイトの中では使わない方がいい。ほとんど違わないことに意味はない。

場所の依存性を減らすこと。
依存性をどう解決するのか。
sandboxing した。パフォーマンスの問題があった。
どういものなのか？
FUNCTION AREA() がある。
エリアの範囲内に戻す。
Heading のたとえに戻ると、意味のある大きさと色を保つ。
グローバルに定義されていないと、ページごとに勝手に設定してしまう。
グローバルカラーを定義できたとしても間違いがある。
ロケーションで別な定義づけされて使われてしまう。
黒い文字が必要なのであれば、モジュール内での色を定義する。
一貫性が保たれない。ルールの上にルールを重ねてしまう。

コードの意味と、デザインの意味が一致しない。
その欲求をどうバランスをとるか。
90% のユーザーはビジュアル側しかみないので、尊重しなければいけない。
似たようなものが無いのかどうか、デザイナと調整する。
もっとヘディングが必要ならクラス化を考える。

REFLOWS (and rendering time)
パフォーマンスのオタク的に心引かれるもの。
CSSサイズと HTTP のリクエストを考えると、reflow は同じレベルに無い。
reflow にあまり時間をさくのではなく、http リクエストやファイルサイズに対応した方がいい。

不必要な reflow が起こる理由はいくつかある。
ブラウザによって変わる。

Toggle classes as low in the dom tree as possible
Aboid setting multiple inline styles.
Apply animations to elements that are position fixed or absolute
Trade smoothness for speed
Avoid tables for layout
Avoid javascript expressions in the CSS(IE only)

CSSベストプラクティス

古くなったルールを使い回すよりも、複製する方がまだ良い。
デフォルトバリューを定義する。
避けたいのはエレメントをスタイリングすること。
どのルールにも同じ強さ、力関係をもたせる。
どのルームも同等に同じ権限があり、ルールに関してはファイルのどこにあるのかが違うだけ。
順番だけで優先順位がわかるように。
チームで取り組むときに作業が簡単になる。だれかと力比べをしてはいけない。
ブラウザ固有のルールを使わなければいけない場面があれば、別につくる。
場所にも気をつける。どこで対応するのかを考える。
やりすぎない。定格に合わせすぎない。なるべく抽象的なものにする。
なるべく小さな機能クラスをつくってもデザインにいかされない。
SINGLETON も避ける。つくっても意味がない。一つのエッセンスだけにする。
できるだけオープンな状態に。ID はキープする。スタイリングには使わない。
MIXINSを使う。to avoid repeating code.
ENCAPSULATION カプセル化。直接アクセスされず、変更されないように。

http://stubbornella.org
nicole@stubbornella.org
@stubbornella
groups.google.com/group/obuject-oriented-css

Q. CSSのフレームワークを使っていてパフォーマンスをもっと役に立つものに変えるためには？
A. いろいろ話は聞いています。ファイルのサイズに関してはとても気にしている。
560 バイト多くても 700バイト、
別な余分なものを入れないようにしている。
簡単な例としては、ページが三つに分割されているとする。
必要であれば、コードを 1/3 反復すれば良い。

Q. MULTIPLE StyleSheet , 複数のファイルを使っている時、どのように影響を与えるか。
A. CSS を一つのファイルにまとめるのが良い。キャスケードは良くない。
　開発環境がよければ、実際にプロジェクトの人で分かれたファイルを
　ツールを使って、まとめるのが良い。
　別のファイルがあって、通常のスタイルシートと同じように統合すれば良い。

開発ツールがまだ発展途上
別のオブジェクトでまとめた方がいい。
コンベショナルスタイルシートを使う。大変だと思う。

■おまけ CSS Wish List

CSS Wish List @JSConf

View more presentations from Nicole Sullivan.

CSS WISH , W3C にむけてつくったプロポーザル
CSS は素晴らしいです。もっと良くなります。
さまざまなパターンが反復されています。
hex 値で設定できるようにして欲しい。

ぜひ欲しいものの PROTOTYPE
mod/inner/hd/bd/ft の構造で、ラウンドコーナーを表現。
@prototype .mod の設定ができる。
allowd nested childern
prototype の修正ができるようにする。
MIXINS クラスネームをつけたくない時。clearfix など。
margin top の bottom, height - corner, hight の設定
非常にシンプルに。コーナーを丸くするのが少ないコードで。イメージを取りこめるように。

#SlideShare を直接フルスクリーンで投影してプレゼンしてたのが印象的。