漫談 CSS 架構⽅方法
- 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu @ F2E.tw Party 8th
2014/05/26
Kuro Hsu
前端⼯工程師
業餘暴⺠民
– Chris Eppstein
“CSS is simple..., It’s simple to understand.
But CSS is not simple to use or maintain.”
http://chrisepps...
!
.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;	
  
}	
  
...


	
  .red-­‐text{	
  
	
  	
  	
  color:	
  orange;	
  
	
  }

!
.font-­‐18{	
  
	
  	
  font-­‐size:	
  18px;	
  
}	
  
...
#news	
  h2{	
  
	
  	
  border-­‐bottom:	
  1px	
  solid	
  #000;	
  
	
  	
  padding:	
  1em;	
  
	
  	
  font-­‐size:	
...
#news	
  h2{	
  
	
  	
  border-­‐bottom:	
  1px	
  solid	
  #000;	
  
	
  	
  padding:	
  1em;	
  
	
  	
  font-­‐size:	
...
#news	
  h2{	
  
	
  	
  border-­‐bottom:	
  1px	
  solid	
  #000;	
  
	
  	
  padding:	
  1em;	
  
	
  	
  font-­‐size:	
...
.column_2	
  #inbox	
  .list	
  {	
  ...	
  }	
  
.column_3	
  #inbox	
  .list	
  {	
  ...	
  }	
  
.column_3	
  #inbox	
 ...
!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....
– 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-ar...
模組化	 
MODULAR CSS
Object
Oriented
CSS
OOCSS
OOCSS
Nicole 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...
<div	
  class="media	
  media-­‐shadow">	
  
	
  	
  <div	
  class="media-­‐img">	
  
	
  	
  	
  	
  <img	
  src="http://...
<div	
  class="media	
  media-­‐no-­‐border”>	
  
	
  	
  <div	
  class="media-­‐img">	
  
	
  	
  	
  	
  <img	
  src="ht...
Scalable &
Modular
Architecture for
CSS
SMACSS
SMACSS
Jonathan Snook
http://smacss.com/
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 - Layout
https://speakerdeck.com/snookca/your
SMACSS - Layout
https://speakerdeck.com/snookca/your
SMACSS - Module
https://speakerdeck.com/snookca/your
SMACSS - Module
http://smacss.com/book/type-module
• ⾴頁⾯面上可單獨存在並且可重複使⽤用的元件
• 定義 Module 時應避免使⽤用 id 或標記名稱
做選擇器
• ⼦子模組以原模組名稱加...
SMACSS - State
SMACSS - State
http://smacss.com/book/type-module
• 與 Layout, Module 搭配
• 表⽰示 Layout 或 Module 的狀態變化
• 由 class 定義
• 命名規則是 ....
<div	
  class="media	
  is-­‐box-­‐shadow”>	
  
	
  	
  <div	
  class="media-­‐img">	
  
	
  	
  	
  	
  <img	
  src="http...
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>	
...
!
.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...
Block
Element
Modifier
BEM
http://bem.info/
BEM - Block
• 在⾴頁⾯面上獨⽴立存在並可重複使⽤用的元件
• 如同 SMACSS 的 Module, Layout
• 每個 Block 都是獨⽴立存在的
BEM - CSS 命名原則 (Block)
.button	
  
.text-­‐field	
  
.heading	
  
.menu
.b-­‐button	
  
.b-­‐text-­‐field	
  
.b-­‐heading...
BEM - Element
• 為 Block 的⼀一部份 (⼦子組件)
• 無法獨⽴立於 Block 之外
• 有些 Block 可能沒有 Element
BEM - CSS 命名原則 (Element)
.button__icon	
  
.text-­‐field__label	
  
.heading__title	
  
.menu__item
以 Block 名稱加上兩個底線 _ _ 作...
BEM - Modifier
• ⽤用來定義 Block 或 Element 

的狀態或屬性
• 類似 SMACSS 的 State
• 同⼀一個 Block 或 Element 可以允許多組
modifier 同時存在
BEM - CSS 命名原則 (Modifier)
.button_active	
  
.text-­‐field_editable	
  
.heading_align_top	
  
.menu__item_promo
以 Block 或...
<div	
  class="media	
  media_shadow">	
  
	
  	
  <div	
  class="media__img">	
  
	
  	
  	
  	
  <img	
  src="http://pla...
MindBEMding
• 改良版 BEM,由 Nicolas Gallagher 提出
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax...
良好的 CSS 架構
• 預測 - Predictable
• 複⽤用 - Reusable
• 維護 - Maintainable
• 延展 - Scalable
http://philipwalton.com/articles/css-ar...
取其精華,去其糟粕
THANKS
Kuro Hsu
kurotanshi [at] gmail.com
http://kuro.tw
http://facebook.com/kurotanshi
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Upcoming SlideShare
Loading in...5
×

漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例

20,777

Published on

2014/05/26 - F2E.tw Party 8th.

Published in: Technology
3 Comments
221 Likes
Statistics
Notes
No Downloads
Views
Total Views
20,777
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
234
Comments
3
Likes
221
Embeds 0
No embeds

No notes for slide

漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例

  1. 1. 漫談 CSS 架構⽅方法 - 以 OOCSS, SMACSS, BEM 為例 Kuro Hsu @ F2E.tw Party 8th 2014/05/26
  2. 2. Kuro Hsu 前端⼯工程師 業餘暴⺠民
  3. 3. – 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/
  4. 4. ! .font-­‐18{      font-­‐size:  18px;   }   ! ! .red-­‐text{      color:  red;   }  
  5. 5. <div  class="font-­‐18  red-­‐text">這是個錯誤訊息。</div>
  6. 6. 
 <div  class="font-­‐18  red-­‐text  box">     這是個錯誤訊息。   </div>

  7. 7. ! .font-­‐18{      font-­‐size:  18px;   }   ! @media  only  screen  and  (max-­‐width:  320px){   ! }
  8. 8. 
  .red-­‐text{        color:  orange;    }
 ! .font-­‐18{      font-­‐size:  18px;   }   ! @media  only  screen  and  (max-­‐width:  320px){      .font-­‐18{          font-­‐size:  14px;      }     }
  9. 9. 
  .red-­‐text{        color:  orange;    }
 ! .font-­‐18{      font-­‐size:  18px;   }   ! @media  only  screen  and  (max-­‐width:  320px){      .font-­‐18{          font-­‐size:  14px;      }     }
  10. 10. #news  h2{      border-­‐bottom:  1px  solid  #000;      padding:  1em;      font-­‐size:  18px;      font-­‐weight:  700;   }
  11. 11. #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;   }
  12. 12. #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;   }
  13. 13. .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  {  ...  }
  14. 14. !important
  15. 15. http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/
  16. 16. 糟了,是世界奇觀
  17. 17. Ctrl + a ! del
  18. 18. – 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/
  19. 19. – hlb “Code for system, Not for pages.” https://speakerdeck.com/hlb/maintainable-css-with-sass-and-compass
  20. 20. 良好的 CSS 架構 • 預測 - Predictable • 複⽤用 - Reusable • 維護 - Maintainable • 延展 - Scalable http://philipwalton.com/articles/css-architecture/
  21. 21. 模組化 MODULAR CSS
  22. 22. Object Oriented CSS OOCSS
  23. 23. OOCSS Nicole Sullivan http://www.slideshare.net/stubbornella/object-oriented-css
  24. 24. 兩大原則 • Separate Structure and Skin ·•結構與外觀分離 • Separate Container and Content ·•容器與內容分離
  25. 25. Media object
  26. 26. <div  class="media">      <div  class="media-­‐img">          <img  src="http://placehold.it/80x80"  alt="">      </div>      <div  class="media-­‐body">          <p>...</p>      </div>   </div>
  27. 27. <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>
  28. 28. <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>
  29. 29. Scalable & Modular Architecture for CSS SMACSS
  30. 30. SMACSS Jonathan Snook http://smacss.com/
  31. 31. SMACSS • Categorization ·•將結構分類 • Naming rules ·•命名規則 • Decoupling CSS from HTML ·•CSS 與 HTML 分離
  32. 32. SMACSS Categories • Base • Layout • Module • State • Theme
  33. 33. SMACSS - Base • CSS Reset • CSS Normalize • There should be no need to use 
 !important in a Base style.
  34. 34. SMACSS - Layout https://speakerdeck.com/snookca/your
  35. 35. SMACSS - Layout https://speakerdeck.com/snookca/your
  36. 36. SMACSS - Module https://speakerdeck.com/snookca/your
  37. 37. SMACSS - Module http://smacss.com/book/type-module • ⾴頁⾯面上可單獨存在並且可重複使⽤用的元件 • 定義 Module 時應避免使⽤用 id 或標記名稱 做選擇器 • ⼦子模組以原模組名稱加 dash (-) 作為名稱
 如: .mod-­‐header , .mod-­‐body
  38. 38. SMACSS - State
  39. 39. SMACSS - State http://smacss.com/book/type-module • 與 Layout, Module 搭配 • 表⽰示 Layout 或 Module 的狀態變化 • 由 class 定義 • 命名規則是 .is-* 開頭
  40. 40. <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
  41. 41. SMACSS - Theme • 定義網站主視覺。 • 類似 Layout,但影響的是網站整體視覺 的變化。 • class 名稱通常以 .theme-* 做開頭
  42. 42. • Use class over ID. • Use child selector. ( .menu > li > a ) • Apply a class when the HTML won’t be predictable.
  43. 43. DECOUPLING CSS FROM HTML CSS 與 HTML 分離
  44. 44. <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>
  45. 45. ! .media  p,  .media  div,  .media  ……  {  ...  }   !
  46. 46. ! .media  p,  .media  div,  .media  ul  {  ...  }   ! .media-­‐body  {  ...  }  
  47. 47. <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
  48. 48. Block Element Modifier BEM
  49. 49. http://bem.info/
  50. 50. BEM - Block • 在⾴頁⾯面上獨⽴立存在並可重複使⽤用的元件 • 如同 SMACSS 的 Module, Layout • 每個 Block 都是獨⽴立存在的
  51. 51. BEM - CSS 命名原則 (Block) .button   .text-­‐field   .heading   .menu .b-­‐button   .b-­‐text-­‐field   .b-­‐heading   .b-­‐menu ( prefix ⾮非必要)
  52. 52. BEM - Element • 為 Block 的⼀一部份 (⼦子組件) • 無法獨⽴立於 Block 之外 • 有些 Block 可能沒有 Element
  53. 53. BEM - CSS 命名原則 (Element) .button__icon   .text-­‐field__label   .heading__title   .menu__item 以 Block 名稱加上兩個底線 _ _ 作為 prefix
  54. 54. BEM - Modifier • ⽤用來定義 Block 或 Element 
 的狀態或屬性 • 類似 SMACSS 的 State • 同⼀一個 Block 或 Element 可以允許多組 modifier 同時存在
  55. 55. BEM - CSS 命名原則 (Modifier) .button_active   .text-­‐field_editable   .heading_align_top   .menu__item_promo 以 Block 或 Element名稱加上⼀一個底線 _作為 prefix
  56. 56. <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
  57. 57. MindBEMding • 改良版 BEM,由 Nicolas Gallagher 提出 http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ .block  {  ...  }   .block-­‐-­‐modifier  {  ...  }   .block__element    {  ...  }   .block__element-­‐-­‐modifier  {  ...  }
  58. 58. 良好的 CSS 架構 • 預測 - Predictable • 複⽤用 - Reusable • 維護 - Maintainable • 延展 - Scalable http://philipwalton.com/articles/css-architecture/
  59. 59. 取其精華,去其糟粕
  60. 60. THANKS Kuro Hsu kurotanshi [at] gmail.com http://kuro.tw http://facebook.com/kurotanshi
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×