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

  • 14,235 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • good job!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
14,235
On Slideshare
0
From Embeds
0
Number of Embeds
17

Actions

Shares
Downloads
116
Comments
1
Likes
170

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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

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