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