Transcript
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
top related