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