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.

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

6. WHATʼS OOCSS?

7. Nicole Sullivan

8. Object-Oriented

9. Object-Oriented CSS

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

35. HOW TO
APPLY OOCSS?

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

46. Avoid dupulication
Avoid redundancy

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