View
4.238
Download
1
Category
Preview:
DESCRIPTION
Nicole Sullivanが提唱しているOOCSSを日本語で解説したスライドです。Webridge Meeting #2( http://webridge-kagawa.com/ )でお話しました。 Nicole Sullivan has been proposed in Japanese describing OOCSS slide. I talked Webridge Meeting # 2.
Citation preview
WhatʼsObject-
OrientedCSS
2010/5/22 Webridge Meeting #2 tshinobufor high performance web site
Hello, everyone.“tshinobu” on the web
I wrote about OOCSSin Web Designing →
udOn Ouji CSS
王子 極まる！
んなわけない
WHATʼS OOCSS?A phylosophy? A framework? A tool?
Nicole Sullivanカリフォルニア在住のWebデベロッパー。 米Yahoo!にてパフォーマンスエンジニア、及びインターナショナルエバンジェリストとしてプロジェクトマネージメントやYahoo!製品の最適化などを担当している。
Object-Orientedオブジェクト指向
•対象物指向、目的重視•「オブジェクト」は、何らかの「データ」と、それを操作するための「メソッド」の組み合わせ
•操作対象に対して固有の操作方法を設定することで、その内部動作の詳細を覆い隠し、利用しやすく
•オブジェクト同士の相互作用で全体が成り立つ
Object-Oriented CSSオブジェクト指向CSS
•一つのスタイルを「レゴブロック」のパーツのように考えて、同じ外観を持つインタフェースを共有する
•特定のIDやクラスをきっかけに、子孫セレクタによってスタイルを定義するのではなく、すべてのスタイルを「クラスで定義」し、目的別でクラスを複数適用する
Traditional<style type="text/css">#product #news-box{margin:10px;padding:10px;border:3px solid #0066CC;}#product #product-box{margin:10px;padding:10px;border:3px solid #CC0066;}#product #news-box h3,#product #product-box h3{margin:0;padding:10px;background:#CCCCCC;}</style><body id="product"><div id="news-box"><h3>お知らせ</h3><p><a href="#">2010年3月20日 春期休暇のお知らせ</a></p></div><div id="product-box"><h3>製品情報</h3><p><a href="#">2010年2月20日 新製品発売のお知らせ</a></p></div></body>
OOCSS like<style type="text/css">.box{margin:10px;padding:10px;border:3px solid;}.news{border-color:#0066CC;}.product{border-color:#CC0066;}.title{margin:0;padding:10px;background:#CCCCCC;}</style><body><div class="box news"><h3 class="title">お知らせ</h3><p><a href="#">2010年3月20日 春期休暇のお知らせ</a></p></div><div class="box product"><h3 class="title">製品情報</h3><p><a href="#">2010年2月20日 新製品発売のお知らせ</a></p></div></body>
ul { ... }ul li { ... }
ul li a { ... }
これまではプロパティを見ていた
ul { ... }ul li { ... }
ul li a { ... }
どのようにセレクタを選ぶかが重要
WHY OOCSS?
Web siteʼs performanceof business
•読み込み速度の遅延が収益を低下• Google検索アルゴリズムの変化
Code is too fragile.•美しいコードは専門家以外の人が触れば破綻する•専門的な知識をはじめから必要とする•コードの再利用はほとんど存在しない•ファイルサイズは増えるばかり
•Reduce file size•Reduce HTTP request•Reduce maintenance cost
What to do first?•ファイルサイズを減らす•HTTPリクエストの数を減らす•メンテナンスのコストを下げる
•Use CSS Sprite•Use CSS level 3•Use Object-Oriented CSS!
What you can do?• CSS Spriteを使う• CSS3を使う•Object-Oriented CSSを使う！
MISUNDERSTANDING
“HTMLの方が複雑になるということだ。どちらをとるかはトレードオフの関係にある。”
OOCSSの考えをうまくなじませられれば、HTMLは複雑にならない。むしろメンテナンスしやすく、
誰が見ても分かりやすい簡単なものになる。
“クラス名だけのセレクタにするために要素という要素にクラス名を追加してたら、HTMLが無駄に大きくなって逆に(転送やパースに)コストがかかって
お釣りがくるかも…。”CSSやJavascriptを効率が良いように書いても、
普通のWebページでのパフォーマンスはそこまでかわらない。アプリケーション級のWebページではじめて効果が発揮される。
HOW TO APPLY OOCSS?
Compornents are like LEGO.reusing elements
make them.コンポーネントをレゴのブロックに見立てて要素を再利用することでページを表現
Legos first.まずはレゴのブロックを作る
Site-wide legos•Headings•Lists (e.g. action, product, feature, external link)•Module headers and footers•Grids•Buttons•Anything else that should be consistent site-wide.
Separate containerand content
コンテナとコンテンツの分離
Separate structureand skin構造とスキンの分離
Avoid dupulicationAvoid redundancy
重複を避ける冗長性を避ける
Location dependentstyles avoid!
要素依存／場所依存を避ける
Use consistencysemantic style
一貫性を保つ
Avoid irregularBe flexible
ドロップシャドウや角丸にイレギュラーな背景画像を使わない幅と高さは拡張できるようにしておく
.cf = clear fix
.fl = float left
.fr = float right
.flall = float aplly child selector
.il = display inline
.ilall = display inline apply child selector
.txtl = text align left
.txtr = text align right
.txtc = text align center
.hd = header
.bd = body
.ft = footer
.tr = top right
.tl = top left
.br = bottom right
.bl = bottom left
BASECLASSNAMES
.line
.unit
.size*of*
.prepend*
.append*
.default
.half
.zero
GRIDANDRYTHMCLASSNAMES
.separate-t / r / l / b
.link-a
.thumb-a
.icon-text
.icon-text-important
.icon-text-company
.list-a
.tbl-a
.mod-a
.mod-index
OTHERCLASSNAMES
SHOWCASE
Enjoy efficient Web development by OOCSS!
Reference• http://wiki.github.com/stubbornella/oocss/• http://www.slideshare.net/stubbornella/what-is-object-oriented-css• http://east.webdirections.org/wde/2009/resources/css-performance/• http://t32k.com/mol/2009/12/css-performance-for-fast-web-applications/• http://t32k.com/mol/2009/11/introduction-to-web-performance/• http://opengl.jp/blogger/2009/11/web-directions-east-2009-nicole.html• http://d.hatena.ne.jp/in0in0/20100208/1265657205• http://www.nagomu.me/archives/2009/nagomu090916.html• http://www.tenman.info/study/oocss/• http://t32k.com/mol/2010/04/lets-make-the-web-faster/• http://t32k.com/mol/2009/11/high-performance-web-design/• http://techblog.yahoo.co.jp/cat206/post_18/• http://gyauza.egoism.jp/clip/archives/2009/08/sugamocssmod/• http://gyauza.egoism.jp/clip/archives/2008/09/080929-classnaming/• http://gyauza.egoism.jp/clip/archives/2009/07/090716-htmltemplate/
Credits• http://www.flickr.com/photos/leejordan/357478091/• http://www.flickr.com/photos/jamadams/192063262/• http://www.flickr.com/photos/seven13avenue/2080281038/• http://www.flickr.com/photos/fernando/4365842765/• http://www.flickr.com/photos/allegri/1348831065/• http://www.flickr.com/photos/dnorman/3263654347/• http://www.flickr.com/photos/nikhilverma/4199403145/• http://www.flickr.com/photos/mia3mom/3195422014/• http://www.flickr.com/photos/chego101/3394439610/• http://www.flickr.com/photos/7737269@N04/470431086/• 鍋坂樹伸 (http://www.sonsun33.com/)
Thank you!Letʼs Keep talking.http://tshinobu.com/
luminexy@gmail.com
Recommended