漫談 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