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

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

on

  • 11,151 views

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

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

Statistics

Views

Total Views
11,151
Views on SlideShare
10,490
Embed Views
661

Actions

Likes
145
Downloads
73
Comments
1

13 Embeds 661

http://www.f2e.tw 540
http://qwersteve07.blogspot.tw 55
http://www.expr.cc 20
https://twitter.com 13
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://bbs.ifengyuan.tw 3
http://qwersteve07.blogspot.com 1
https://home.jolicloud.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • good job!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 漫談 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://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 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"  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 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 或標記名稱 做選擇器 • ⼦子模組以原模組名稱加 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
  • http://bem.info/
  • 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