重點在於可利用性，OOCSS 並不是新的語言或是框架，它是一種撰寫 CSS 的方法，可減少 CSS 代碼，達到優化效能的作用。

1. OOCSS
SASS
Phoebe Pan - 2016.2.18

2. OOCSS

3. “Object Oriented CSS”
CSS

4. Outline
1. OOCSS
2. CSS
3. CSS

5. • Separate Structure and Skin
(size v.s. color)
• Separate Container and Content
(container v.s. content)

6. • (size v.s. color)

7. • (container v.s. content)
1.
2.
3. OOCSS
Class

8. • (container v.s. content)
.friday .item
Class

9. • (container v.s. content)
OOCSS
Class

10. • : text-red, text-danger
• : , ,
: .comment .comment.comment-best
• :

11. • +

12.
css
• (HTML )
•
• UI ( )
• jQuery

13. (HTML )
語意化的必要性:
正確語意化寫法可以提⾼ SEO、
語⾳瀏覽器、⼿機裝置的⽀援。

16. •
• (img class)
• (Mixin)
• CSS Class
clearfix( ), pull-left, pull-right( )...

17. UI
•
•
•
• (Bootstrap)

18. •
• TAB
•

19. OOCSS

20. • !important
• css ( )
tag
• absolute relative

21. • Color Highlighter
• csscomb: Shift + Ctrl + C
Sublime Plugin

23. •
1.
2.
• HTML
Class
• OOCSS
CSS CSS

24. References:
• SASS & RWD
• CSS - OOCSS, SMACSS, BEM
• OOCSS
• An Introduction To Object Oriented CSS (OOCSS)
• Name Your SASS Variables Modularly
• INTRODUCTION TO OBJECT-ORIENTED CSS

25. Thank You