What's Object-Oriented CSS (japanese)

4,644
-1

Published on

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,644
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
37
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

What's Object-Oriented CSS (japanese)

  1. 1. Whatʼs Object- Oriented CSS for high performance web site 2010/5/22 Webridge Meeting #2 tshinobu
  2. 2. Hello, everyone. “tshinobu” on the web I wrote about OOCSS in Web Designing →
  3. 3. udOn Ouji CSS
  4. 4. WHATʼS OOCSS?
  5. 5. Nicole Sullivan
  6. 6. Object-Oriented
  7. 7. Object-Oriented CSS
  8. 8. Traditional
  9. 9. OOCSS like
  10. 10. ul { ... } ul li { ... } ul li a { ... }
  11. 11. ul { ... } ul li { ... } ul li a { ... }
  12. 12. WHY OOCSS?
  13. 13. Web siteʼs performance of business
  14. 14. Code is too fragile.
  15. 15. What to do first? •Reduce file size •Reduce HTTP request •Reduce maintenance cost
  16. 16. What you can do? •Use CSS Sprite •Use CSS level 3 •Use Object-Oriented CSS!
  17. 17. MISUNDERSTANDING
  18. 18. HOW TO APPLY OOCSS?
  19. 19. Compornents are like LEGO. reusing elements make them.
  20. 20. Legos first.
  21. 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. 22. Separate container and content
  23. 23. Separate structure and skin
  24. 24. Avoid dupulication Avoid redundancy
  25. 25. Location dependent styles avoid!
  26. 26. Use consistency semantic style
  27. 27. Avoid irregular Be flexible
  28. 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. 29. .line GRID .unit AND .size*of* .prepend* RYTHM .append* CLASS .default .half NAMES .zero
  30. 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. 31. SHOWCASE
  32. 32. Enjoy efficient Web development by OOCSS!
  33. 33. Reference
  34. 34. Credits
  35. 35. Thank you! Letʼs Keep talking. http://tshinobu.com/ luminexy@gmail.com

×