What's Object-Oriented CSS (japanese)
- 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 →
- 11. Traditional
- 12. OOCSS like
- 13. ul { ... } ul li { ... } ul li a { ... }
- 14. ul { ... } ul li { ... } ul li a { ... }
- 16. WHY OOCSS?
- 24. Web siteʼs performance of business
- 25. Code is too fragile.
- 26. What to do first? •Reduce file size •Reduce HTTP request •Reduce maintenance cost
- 27. What you can do? •Use CSS Sprite •Use CSS level 3 •Use Object-Oriented CSS!
- 28. MISUNDERSTANDING
- 37. Compornents are like LEGO. reusing elements make them.
- 38. Legos first.
- 39. 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.
- 41. Separate container and content
- 42. Separate structure and skin
- 47. Location dependent styles avoid!
- 48. Use consistency semantic style
- 49. Avoid irregular Be flexible
- 53. .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
- 54. .line GRID .unit AND .size*of* .prepend* RYTHM .append* CLASS .default .half NAMES .zero
- 55. .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
- 56. SHOWCASE
- 69. Enjoy efficient Web development by OOCSS!
- 70. Reference
- 71. Credits
- 72. Thank you! Letʼs Keep talking. http://tshinobu.com/ luminexy@gmail.com