OOCSS SASS Phoebe Pan - 2016.2.18

OOCSS

“Object Oriented CSS” CSS

Outline

1. OOCSS

2. CSS

3. CSS

• Separate Structure and Skin (size v.s. color)

• Separate Container and Content (container v.s. content)

• (size v.s. color)

• (container v.s. content)

1.

2.

3. OOCSS Class

• (container v.s. content)

.friday .item Class

• (container v.s. content)

OOCSS Class

• : text-red, text-danger

• : , , : .comment .comment.comment-best

• :

• +

css

• (HTML )

•

• UI ( )

• jQuery

(HTML )

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

•

• (img class)

• (Mixin)

• CSS Classclearfix( ), pull-left, pull-right( )...

UI

•

•

•

• (Bootstrap)

•

• TAB

•

OOCSS

• !important

• css ( ) tag

• absolute relative

• Color Highlighter

• csscomb: Shift + Ctrl + C

Sublime Plugin

•

1.

2.

• HTML Class

• OOCSS CSS CSS

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

Thank You