What's Object-Oriented CSS (japanese)
-
Upload
shinobu-tsutsui -
Category
Design
-
view
4.234 -
download
1
description
Transcript of What's Object-Oriented CSS (japanese)
![Page 1: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/1.jpg)
WhatʼsObject-
OrientedCSS
2010/5/22 Webridge Meeting #2 tshinobufor high performance web site
![Page 2: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/2.jpg)
Hello, everyone.“tshinobu” on the web
I wrote about OOCSSin Web Designing →
![Page 3: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/3.jpg)
udOn Ouji CSS
王子 極まる!
んなわけない
![Page 4: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/4.jpg)
![Page 5: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/5.jpg)
![Page 6: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/6.jpg)
WHATʼS OOCSS?A phylosophy? A framework? A tool?
![Page 7: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/7.jpg)
Nicole Sullivanカリフォルニア在住のWebデベロッパー。 米Yahoo!にてパフォーマンスエンジニア、及びインターナショナルエバンジェリストとしてプロジェクトマネージメントやYahoo!製品の最適化などを担当している。
![Page 8: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/8.jpg)
Object-Orientedオブジェクト指向
•対象物指向、目的重視•「オブジェクト」は、何らかの「データ」と、それを操作するための「メソッド」の組み合わせ
•操作対象に対して固有の操作方法を設定することで、その内部動作の詳細を覆い隠し、利用しやすく
•オブジェクト同士の相互作用で全体が成り立つ
![Page 9: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/9.jpg)
Object-Oriented CSSオブジェクト指向CSS
•一つのスタイルを「レゴブロック」のパーツのように考えて、同じ外観を持つインタフェースを共有する
•特定のIDやクラスをきっかけに、子孫セレクタによってスタイルを定義するのではなく、すべてのスタイルを「クラスで定義」し、目的別でクラスを複数適用する
![Page 10: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/10.jpg)
![Page 11: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/11.jpg)
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>
![Page 12: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/12.jpg)
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>
![Page 13: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/13.jpg)
ul { ... }ul li { ... }
ul li a { ... }
これまではプロパティを見ていた
![Page 14: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/14.jpg)
ul { ... }ul li { ... }
ul li a { ... }
どのようにセレクタを選ぶかが重要
![Page 15: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/15.jpg)
![Page 16: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/16.jpg)
WHY OOCSS?
![Page 17: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/17.jpg)
![Page 18: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/18.jpg)
![Page 19: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/19.jpg)
![Page 20: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/20.jpg)
![Page 21: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/21.jpg)
![Page 22: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/22.jpg)
![Page 23: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/23.jpg)
![Page 24: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/24.jpg)
Web siteʼs performanceof business
•読み込み速度の遅延が収益を低下• Google検索アルゴリズムの変化
![Page 25: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/25.jpg)
Code is too fragile.•美しいコードは専門家以外の人が触れば破綻する•専門的な知識をはじめから必要とする•コードの再利用はほとんど存在しない•ファイルサイズは増えるばかり
![Page 26: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/26.jpg)
•Reduce file size•Reduce HTTP request•Reduce maintenance cost
What to do first?•ファイルサイズを減らす•HTTPリクエストの数を減らす•メンテナンスのコストを下げる
![Page 27: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/27.jpg)
•Use CSS Sprite•Use CSS level 3•Use Object-Oriented CSS!
What you can do?• CSS Spriteを使う• CSS3を使う•Object-Oriented CSSを使う!
![Page 28: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/28.jpg)
MISUNDERSTANDING
![Page 29: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/29.jpg)
![Page 30: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/30.jpg)
“HTMLの方が複雑になるということだ。どちらをとるかはトレードオフの関係にある。”
OOCSSの考えをうまくなじませられれば、HTMLは複雑にならない。むしろメンテナンスしやすく、
誰が見ても分かりやすい簡単なものになる。
![Page 31: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/31.jpg)
![Page 32: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/32.jpg)
![Page 33: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/33.jpg)
![Page 34: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/34.jpg)
“クラス名だけのセレクタにするために要素という要素にクラス名を追加してたら、HTMLが無駄に大きくなって逆に(転送やパースに)コストがかかって
お釣りがくるかも…。”CSSやJavascriptを効率が良いように書いても、
普通のWebページでのパフォーマンスはそこまでかわらない。アプリケーション級のWebページではじめて効果が発揮される。
![Page 35: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/35.jpg)
HOW TO APPLY OOCSS?
![Page 36: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/36.jpg)
![Page 37: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/37.jpg)
Compornents are like LEGO.reusing elements
make them.コンポーネントをレゴのブロックに見立てて要素を再利用することでページを表現
![Page 38: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/38.jpg)
Legos first.まずはレゴのブロックを作る
![Page 39: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/39.jpg)
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.
![Page 40: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/40.jpg)
![Page 41: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/41.jpg)
Separate containerand content
コンテナとコンテンツの分離
![Page 42: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/42.jpg)
Separate structureand skin構造とスキンの分離
![Page 43: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/43.jpg)
![Page 44: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/44.jpg)
![Page 45: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/45.jpg)
![Page 46: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/46.jpg)
Avoid dupulicationAvoid redundancy
重複を避ける冗長性を避ける
![Page 47: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/47.jpg)
Location dependentstyles avoid!
要素依存/場所依存を避ける
![Page 48: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/48.jpg)
Use consistencysemantic style
一貫性を保つ
![Page 49: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/49.jpg)
Avoid irregularBe flexible
ドロップシャドウや角丸にイレギュラーな背景画像を使わない幅と高さは拡張できるようにしておく
![Page 50: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/50.jpg)
![Page 51: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/51.jpg)
![Page 52: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/52.jpg)
![Page 53: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/53.jpg)
.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
![Page 54: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/54.jpg)
.line
.unit
.size*of*
.prepend*
.append*
.default
.half
.zero
GRIDANDRYTHMCLASSNAMES
![Page 55: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/55.jpg)
.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
![Page 56: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/56.jpg)
SHOWCASE
![Page 57: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/57.jpg)
![Page 58: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/58.jpg)
![Page 59: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/59.jpg)
![Page 60: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/60.jpg)
![Page 61: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/61.jpg)
![Page 62: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/62.jpg)
![Page 63: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/63.jpg)
![Page 64: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/64.jpg)
![Page 65: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/65.jpg)
![Page 66: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/66.jpg)
![Page 67: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/67.jpg)
![Page 68: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/68.jpg)
![Page 69: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/69.jpg)
Enjoy efficient Web development by OOCSS!
![Page 70: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/70.jpg)
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/
![Page 71: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/71.jpg)
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/)
![Page 72: What's Object-Oriented CSS (japanese)](https://reader034.fdocuments.in/reader034/viewer/2022052505/554bea9fb4c9055a368b4d7c/html5/thumbnails/72.jpg)
Thank you!Letʼs Keep talking.http://tshinobu.com/