Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
漫談 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 為例

39,994 views

Published on

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

Published in: Technology

漫談 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

×