Embed Size (px)
DESCRIPTION
2014/05/26 - F2E.tw Party 8th.
Citation preview
漫談 CSS 架構⽅方法- 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu @ F2E.tw Party 8th2014/05/26
Kuro Hsu
前端⼯工程師
業餘暴⺠民
– Chris Eppstein
“CSS is simple..., It’s simple to understand. But CSS is not simple to use or maintain.”
http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/
!.font-‐18{ font-‐size: 18px; } !!.red-‐text{ color: red; }
<div class="font-‐18 red-‐text">這是個錯誤訊息。</div>
<div class="font-‐18 red-‐text box"> 這是個錯誤訊息。 </div>
!.font-‐18{ font-‐size: 18px; } !@media only screen and (max-‐width: 320px){ !}
.red-‐text{ color: orange; }
!.font-‐18{ font-‐size: 18px; } !@media only screen and (max-‐width: 320px){ .font-‐18{ font-‐size: 14px; } }
.red-‐text{ color: orange; }
!.font-‐18{ font-‐size: 18px; } !@media only screen and (max-‐width: 320px){ .font-‐18{ font-‐size: 14px; } }
#news h2{ border-‐bottom: 1px solid #000; padding: 1em; font-‐size: 18px; font-‐weight: 700; }
#news h2{ border-‐bottom: 1px solid #000; padding: 1em; font-‐size: 18px; font-‐weight: 700; }
#faq .title{ border-‐bottom: 1px solid #000; padding: 1em; font-‐size: 18px; font-‐weight: 700; }
#news h2{ border-‐bottom: 1px solid #000; padding: 1em; font-‐size: 18px; font-‐weight: 700; }
#faq .title{ border-‐bottom: 1px solid #000; padding: 1em; font-‐size: 18px; font-‐weight: 700; }
#service .feature .title{ border-‐bottom: 1px solid #000; padding: 0.5em; font-‐size: 16px; }
.column_2 #inbox .list { ... }
.column_3 #inbox .list { ... }
.column_3 #inbox .list .name { ... }
.column_3 #inbox .list .name p { ... }
.column_3 #inbox .list .name.reply { ... }
.column_3 #inbox .list .name.reply a { ... } !
#top .column_3 #inbox .list.left { ... }
!important
http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/
糟了，是世界奇觀
Ctrl + a !
del
– Nicole Sullivan
“We have been doing it all wrong…, Our (CSS) best practices are killing us! ”
http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
– hlb
“Code for system, Not for pages.”
https://speakerdeck.com/hlb/maintainable-css-with-sass-and-compass
良好的 CSS 架構
• 預測 - Predictable
• 複⽤用 - Reusable
• 維護 - Maintainable
• 延展 - Scalable
http://philipwalton.com/articles/css-architecture/
模組化
MODULAR CSS
Object
Oriented
CSSOOCSS
OOCSSNicole Sullivan
http://www.slideshare.net/stubbornella/object-oriented-css
兩大原則
• Separate Structure and Skin ·•結構與外觀分離
• Separate Container and Content ·•容器與內容分離
Media object
<div class="media"> <div class="media-‐img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-‐body"> <p>...</p> </div> </div>
<div class="media media-‐shadow"> <div class="media-‐img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-‐body"> <p>...</p> </div> </div>
<div class="media media-‐no-‐border”> <div class="media-‐img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-‐body"> <p>...</p> </div> </div>
Scalable &
Modular
Architecture for
CSS
SMACSS
SMACSS
• Categorization ·•將結構分類
• Naming rules ·•命名規則
• Decoupling CSS from HTML ·•CSS 與 HTML 分離
SMACSS Categories
• Base
• Layout
• Module
• State
• Theme
SMACSS - Base
• CSS Reset
• CSS Normalize
• There should be no need to use !important in a Base style.
SMACSS - Module
http://smacss.com/book/type-module
• ⾴頁⾯面上可單獨存在並且可重複使⽤用的元件
• 定義 Module 時應避免使⽤用 id 或標記名稱做選擇器
• ⼦子模組以原模組名稱加 dash (-) 作為名稱如: .mod-‐header , .mod-‐body
SMACSS - State
SMACSS - State
http://smacss.com/book/type-module
• 與 Layout, Module 搭配
• 表⽰示 Layout 或 Module 的狀態變化
• 由 class 定義
• 命名規則是 .is-* 開頭
<div class="media is-‐box-‐shadow”> <div class="media-‐img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-‐body"> <p>...</p> </div> </div>
module class state
sub module
sub module
SMACSS - Theme
• 定義網站主視覺。
• 類似 Layout，但影響的是網站整體視覺的變化。
• class 名稱通常以 .theme-* 做開頭
• Use class over ID.
• Use child selector. ( .menu > li > a )
• Apply a class when the HTML won’t be predictable.
DECOUPLING CSS FROM HTML CSS 與 HTML 分離
<div class="media"> <img src="http://placehold.it/80x80" alt=""> <div>...</div> </div> !<div class="media"> <img src="http://placehold.it/80x80" alt=""> <p>...</p> </div>
!.media p, .media div, .media …… { ... } !
!.media p, .media div, .media ul { ... } !.media-‐body { ... }
<div class="media is-‐box-‐shadow”> <div class="media-‐img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-‐body"> <p>...</p> </div> </div>
module class state
sub module
sub module
Block
Element
Modifier
BEM
BEM - Block
• 在⾴頁⾯面上獨⽴立存在並可重複使⽤用的元件
• 如同 SMACSS 的 Module, Layout
• 每個 Block 都是獨⽴立存在的
BEM - CSS 命名原則 (Block)
.button
.text-‐field
.heading
.menu
.b-‐button
.b-‐text-‐field
.b-‐heading
.b-‐menu
( prefix ⾮非必要)
BEM - Element
• 為 Block 的⼀一部份 (⼦子組件)
• 無法獨⽴立於 Block 之外
• 有些 Block 可能沒有 Element
BEM - CSS 命名原則 (Element)
.button__icon
.text-‐field__label
.heading__title
.menu__item
以 Block 名稱加上兩個底線 _ _ 作為 prefix
BEM - Modifier
• ⽤用來定義 Block 或 Element 的狀態或屬性
• 類似 SMACSS 的 State
• 同⼀一個 Block 或 Element 可以允許多組 modifier 同時存在
BEM - CSS 命名原則 (Modifier)
.button_active
.text-‐field_editable
.heading_align_top
.menu__item_promo
以 Block 或 Element名稱加上⼀一個底線 _作為 prefix
<div class="media media_shadow"> <div class="media__img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media__body"> <p>...</p> </div> </div>
Block Modifier
Element
Element
MindBEMding
• 改良版 BEM，由 Nicolas Gallagher 提出
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
.block { ... }
.block-‐-‐modifier { ... }
.block__element { ... }
.block__element-‐-‐modifier { ... }
良好的 CSS 架構
• 預測 - Predictable
• 複⽤用 - Reusable
• 維護 - Maintainable
• 延展 - Scalable
http://philipwalton.com/articles/css-architecture/
取其精華，去其糟粕
THANKS
Kuro Hsu kurotanshi [at] gmail.com http://kuro.tw http://facebook.com/kurotanshi
