object-oriented css 從 oocss, smacss, bem 到 amcss
DESCRIPTION
我們都同意,其實 CSS 並不難。但是很快的你發現,當專案開始變大,你的 CSS 變得越來越難維護 — tag、id 還有 class 交錯使用,選擇器越組越長,這段 CSS 看起來好眼熟? 為什麼你需要 Object Oriented CSS Methodology?什麼是 OOCSS、SMACSS 還有 BEM (甚至是最新的 AMCSS)?如何寫出具有可預測性、可重複使用且易於維護的架構?TRANSCRIPT
![Page 1: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/1.jpg)
Object-Oriented CSS從 OOCSS, SMACSS, BEM 到 AMCSS
Benson Lu
![Page 2: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/2.jpg)
Benson LuFront-End Engineer
Wantrepreneur
![Page 3: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/3.jpg)
– http://cssguidelin.es/ Harry Roberts
CSS is not a pretty language. While it is simple to learn and get started with, it soon
becomes problematic at any reasonable scale.
![Page 4: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/4.jpg)
http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/
<div class=”widget”> Featured Items</div>
#sidebar
.widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px;}
COMMON MISTAKES
![Page 5: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/5.jpg)
http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/
<div class=”widget”> Featured Items</div>
<div id=”sidebar”> <div class=”widget”> Featured Items </div></div>
#sidebar
.widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px;}
COMMON MISTAKES
![Page 6: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/6.jpg)
COMMON MISTAKES
http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/
#sidebar
.widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px;}
#sidebar .widget { width: 200px;}
<div class=”widget”> Featured Items</div>
<div id=”sidebar”> <div class=”widget”> Featured Items </div></div>
![Page 7: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/7.jpg)
COMMON MISTAKES
http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/
<div class=”widget”> Featured Items</div>
<div id=”sidebar”> <div class=”widget”> Featured Items </div></div>
.widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px;}
#sidebar .widget { width: 200px;}
home
![Page 8: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/8.jpg)
COMMON MISTAKES
http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/
<div class=”widget”> Featured Items</div>
<div id=”sidebar”> <div class=”widget”> Featured Items </div></div>
.widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px;}
#sidebar .widget { width: 200px;}
body.homepage .widget { backgorund: white;}
home
![Page 9: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/9.jpg)
COMMON MISTAKES
• Not Reusable 不能重複使⽤用
• Not Scalable 不能擴充
![Page 10: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/10.jpg)
COMMON MISTAKES
• Not Reusable 不能重複使⽤用
• Not Scalable 不能擴充
• Redesign?
![Page 11: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/11.jpg)
COMMON MISTAKES
#main-nav ul li ul li div .widget {}
#content atticle h1:first-child {}
#sidebar > div > h3 + p {}
• Overly Complicated Selectors
![Page 12: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/12.jpg)
COMMON MISTAKES
• Overly Complicated Selectors
• Overly Generic Class Names
• Making a Rule Do Too Much
![Page 13: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/13.jpg)
CSS Architecture
![Page 14: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/14.jpg)
- http://philipwalton.com/articles/css-architecture/
CSS isn’t just visual design.
OOP, Modular, DRY, open/closed principle etc. still apply to CSS
![Page 15: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/15.jpg)
蛤,可是物件導向我不會
![Page 16: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/16.jpg)
- 世間情 三⽴立台灣台
![Page 17: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/17.jpg)
Good CSS Architecture
• 預測 - Predictable
• 複⽤用 - Reusable
• 維護 - Maintainable
• 延展 - Scalable
http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/
![Page 18: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/18.jpg)
CSS Methodology
![Page 19: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/19.jpg)
CSS Methodology
• OOCSS
• SMACSS
• BEM
• AMCSS
http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/
![Page 20: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/20.jpg)
OBJECT Oriented CSS
- Nicole Sullivan 2009
![Page 21: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/21.jpg)
Principles
• Separate Structure and Skin
• Separate Container and Content
![Page 22: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/22.jpg)
Principles
• Separate Structure and Skin
![Page 23: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/23.jpg)
https://dribbble.com/shots/989864-Flat-Roman-Typeface-Ui by Cosmic Capitanu
Media Object
![Page 24: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/24.jpg)
Media Object
![Page 25: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/25.jpg)
Media ObjectBase Class Sub Class
(modifier) Descendent Content
Descendent Content
![Page 26: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/26.jpg)
Principles
• Separate Container and Content
• break the dependency between the container module and the content objects it contains.
![Page 27: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/27.jpg)
Some Guidelines for OOCSS
• Avoid the descendent selector (i.e. don’t use .sidebar h3)
• Avoid IDs as styling hooks
• Avoid attaching classes to elements in your stylesheet (i.e. don’t do div.header or h1.title)
• Except in some rare cases, avoid using !important
![Page 28: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/28.jpg)
SCALABLE MODULAR ARCHITECTURE CSS
- Jonathan Snook
![Page 29: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/29.jpg)
PRinciples
• Categorizing CSS Rules
• 將 CSS 結構分類
• Naming Rules
• 命名規則
• Minimizing the Depth of Applicability
• 減少 CSS 與 HTML 的相依程度
![Page 30: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/30.jpg)
Five Types of Categories
• Base
• Layout
• Module
• State
• Theme
![Page 31: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/31.jpg)
BASE
• applied to
• element
• descendent selector
• child selector
• pseudo-classes
• should be no !important
• CSS Resets
![Page 32: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/32.jpg)
LAYOUT
![Page 33: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/33.jpg)
LAYOUT
![Page 34: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/34.jpg)
LAYOUT
<style> #header {…} .l-main {…} .l-secondary {…} .l-featured {…} .l-featured > li {…}</style>
<div id=”header”></div><div class=”l-main”></div><div class=”l-secondary”></div><div class=”l-featured”></div>
![Page 35: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/35.jpg)
MODULE
• Modules 存在於 Layout components 下.
• Modules 也可存在於 Modules 下.
• 每個 Module 應該被設計成獨⽴立存在的
• 避免使⽤用 IDs 還有 element 當作 selector
![Page 36: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/36.jpg)
MODULE
![Page 37: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/37.jpg)
STATE
• 可以作⽤用於 Layout 和 Module 上
• 表⽰示狀態的變化
• 使⽤用 .is-* 開頭的 class 來定義
![Page 39: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/39.jpg)
BLOCK
• 在⾴頁⾯面上獨⽴立存在, i.e. 可以在⾴頁⾯面之中任意更動位置
• 是 Web Application 的 “building block”
• 可重複使⽤用
• Block 可以是 簡單⽽而單⼀一的 或是含有其他的 blocks
![Page 40: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/40.jpg)
BLOCK
![Page 41: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/41.jpg)
BLOCK
![Page 42: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/42.jpg)
BLOCK
![Page 43: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/43.jpg)
ELEMENT
• An internal part of BLOCK
• 只能存在於 BLOCK 內,沒有獨⽴立出來的意義
• BLOCK 不⼀一定要包含 ELEMENT(S)
![Page 44: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/44.jpg)
ELEMENT
• 在 BLOCK 名稱後加上兩個底線 __ 作為 prefix
![Page 45: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/45.jpg)
MODIFIER
• 定義 BLOCK 或 ELEMENT 的狀態或屬性
• 多組 MODIFIERS 可以共同作⽤用於⼀一個 BLOCK/ELEMENT 上
![Page 46: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/46.jpg)
MODIFIER
• 在 MODIFIER 之前加上兩個 —(dash) 當作 prefix
- MindBEMding- http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
![Page 47: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/47.jpg)
QUICK SUMMARY
• .block {…}
• .block--modifier {…}
• .block__element {…}
• .block__element—modifier {…}
![Page 48: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/48.jpg)
BUT SERIOUSLY?
—__-_—_— - _— ___—__
![Page 49: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/49.jpg)
ATTRIBUTE METHOD CSS
Glen Maddern, 2014 http://glenmaddern.com/articles/introducing-am-css
![Page 50: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/50.jpg)
Why CLASSES?
• 3.2.5.7 The class attribute
• https://html.spec.whatwg.org/multipage/dom.html#classes
• The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.
• There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
![Page 51: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/51.jpg)
Why CLASSES?• Therefore,
• BEM
• .primary-nav__sub-nav—current
• Utilities
• .u-textTruncate
• left
• clearfix
• Javascript hook
• .js-whatevs
GLOBAL NAMESPACE
![Page 52: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/52.jpg)
~=Attribute is within
Space Separated List<div class='a b c'>
.a { ... }
.b { ... }
.c { ... }
[class~='a'] { ... }
[class~='b'] { ... }
[class~='c'] { ... }
![Page 53: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/53.jpg)
<div class=‘row’> <div class=‘column-12’>Full</div></div><div class=‘row’> <div class=‘column-4’>Thirds</div> <div class=‘column-4’>Thirds</div> <div class=‘column-4’>Thirds</div></div>
.row { /* max-width, clearfixes */ }
.column-1 { /* 1/12th width, floated */ }
.column-2 { /* 1/6th width, floated */ }
.column-3 { /* 1/4th width, floated */ }
.column-4 { /* 1/3th width, floated */ }
.column-5 { /* 5/12th width, floated */ }/* etc */.column-12 { /* 100% width, floated */ }
Normally we do
![Page 54: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/54.jpg)
<div am-row> <div am-column=‘12’>Full</div></div><div am-row> <div am-column=‘4’>Thirds</div> <div am-column=‘4’>Thirds</div> <div am-column=‘4’>Thirds</div></div>
[am-row] { /* max-width, clearfixes */ }[am-column~=“1”] { /* 1/12th width, floated */ }[am-column~=“2”] { /* 1/6th width, floated */ }[am-column~=“3”] { /* 1/4th width, floated */ }[am-column~=“4”] { /* 1/3th width, floated */ }[am-column~=“5”] { /* 5/12th width, floated */ }[am-column~=“12”] { /* 100% width, floated */ }
AMCSS
![Page 55: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/55.jpg)
<div am-row> <div am-column>Full</div></div><div am-row> <div am-column=‘1/3’>Thirds</div> <div am-column=‘1/3’>Thirds</div> <div am-column=‘1/3’>Thirds</div></div>
[am-row] { /* max-width, clearfixes */ }[am-column] { /* 100% width, floated */ }[am-column~=“1/12”] { /* 1/12th width, floated */ }[am-column~=“1/6”] { /* 1/6th width, floated */ }[am-column~=“1/4”] { /* 1/4th width, floated */ }[am-column~=“1/3”] { /* 1/3th width, floated */ }[am-column~=“5/12”] { /* 5/12th width, floated */ }
AMCSS
![Page 56: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/56.jpg)
Styling both attributes and values• attribute 可以⽽而且應該要被 styled
• 屬性的 Value 可以改變與繼承 Base styles(也就是 attribute)
• namespace 的概念
![Page 57: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/57.jpg)
Zero-class approach
• attribute 可以⽽而且應該要被 styled
• 屬性的 Value 可以改變與繼承 Base styles(也就是 attribute)
• namespace 的概念
![Page 58: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/58.jpg)
zero-class approach to BEM modifiers
header > nav [am-Button] { /* contextual overrides */ }
![Page 59: Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS](https://reader031.vdocuments.site/reader031/viewer/2022012400/557d5a5fd8b42aba3d8b4abf/html5/thumbnails/59.jpg)
Good CSS Architecture
• 預測 - Predictable
• 複⽤用 - Reusable
• 維護 - Maintainable
• 延展 - Scalable
http://philipwalton.com/articles/css-architecture/http://philipwalton.com/articles/css-architecture/