Your SlideShare is downloading. ×
0
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What's Object-Oriented CSS (japanese)

4,311

Published on

Nicole Sullivanが提唱しているOOCSSを日本語で解説したスライドです。Webridge Meeting #2( http://webridge-kagawa.com/ )でお話しました。 …

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.

Published in: Design, Technology
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,311
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
37
Comments
0
Likes
17
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Whatʼs Object- Oriented CSS for high performance web site 2010/5/22 Webridge Meeting #2 tshinobu
  • 2. Hello, everyone. “tshinobu” on the web I wrote about OOCSS in Web Designing →
  • 3. udOn Ouji CSS
  • 4. WHATʼS OOCSS?
  • 5. Nicole Sullivan
  • 6. Object-Oriented
  • 7. Object-Oriented CSS
  • 8. Traditional
  • 9. OOCSS like
  • 10. ul { ... } ul li { ... } ul li a { ... }
  • 11. ul { ... } ul li { ... } ul li a { ... }
  • 12. WHY OOCSS?
  • 13. Web siteʼs performance of business
  • 14. Code is too fragile.
  • 15. What to do first? •Reduce file size •Reduce HTTP request •Reduce maintenance cost
  • 16. What you can do? •Use CSS Sprite •Use CSS level 3 •Use Object-Oriented CSS!
  • 17. MISUNDERSTANDING
  • 18. HOW TO APPLY OOCSS?
  • 19. Compornents are like LEGO. reusing elements make them.
  • 20. Legos first.
  • 21. 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.
  • 22. Separate container and content
  • 23. Separate structure and skin
  • 24. Avoid dupulication Avoid redundancy
  • 25. Location dependent styles avoid!
  • 26. Use consistency semantic style
  • 27. Avoid irregular Be flexible
  • 28. .cf = clear fix .fl = float left .fr = float right .flall = float aplly child selector .il = display inline .ilall = display inline apply child selector BASE .txtl = text align left .txtr = text align right CLASS .txtc = text align center NAMES .hd = header .bd = body .ft = footer .tr = top right .tl = top left .br = bottom right .bl = bottom left
  • 29. .line GRID .unit AND .size*of* .prepend* RYTHM .append* CLASS .default .half NAMES .zero
  • 30. .separate-t / r / l / b .link-a .thumb-a OTHER .icon-text .icon-text-important CLASS .icon-text-company NAMES .list-a .tbl-a .mod-a .mod-index
  • 31. SHOWCASE
  • 32. Enjoy efficient Web development by OOCSS!
  • 33. Reference
  • 34. Credits
  • 35. Thank you! Letʼs Keep talking. http://tshinobu.com/ luminexy@gmail.com

×