漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 12,626 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
12,626
On Slideshare
11,891
From Embeds
735
Number of Embeds
13

Actions

Shares
Downloads
93
Comments
1
Likes
158

Embeds 735

http://www.f2e.tw 567
http://qwersteve07.blogspot.tw 95
http://www.expr.cc 20
https://twitter.com 18
http://feedly.com 9
http://119.77.231.33 7
http://qwersteve07.blogspot.com.au 4
http://www.slideee.com 4
http://news.ezprice.com.tw 3
http://qwersteve07.blogspot.com 3
http://bbs.ifengyuan.tw 3
https://home.jolicloud.com 1
https://www.linkedin.com 1

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