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

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

19. – 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/

20. – hlb
“Code for system, Not for pages.”
https://speakerdeck.com/hlb/maintainable-css-with-sass-and-compass

21. 良好的 CSS 架構
• 預測 - Predictable
• 複⽤用 - Reusable
• 維護 - Maintainable
• 延展 - Scalable
http://philipwalton.com/articles/css-architecture/

22. 模組化
MODULAR CSS

23. Object
Oriented
CSS
OOCSS

24. OOCSS
Nicole Sullivan
http://www.slideshare.net/stubbornella/object-oriented-css

25. 兩大原則
• Separate Structure and Skin
·•結構與外觀分離
• Separate Container and Content
·•容器與內容分離

28. Media object

29. <div
class="media">
<div
class="media-­‐img">
<img
src="http://placehold.it/80x80"
alt="">
</div>
<div
class="media-­‐body">
<p>...</p>
</div>
</div>

30. <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>

31. <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>

32. Scalable &
Modular
Architecture for
CSS
SMACSS

33. SMACSS
Jonathan Snook
http://smacss.com/

34. SMACSS
• Categorization
·•將結構分類
• Naming rules
·•命名規則
• Decoupling CSS from HTML
·•CSS 與 HTML 分離

35. SMACSS Categories
• Base
• Layout
• Module
• State
• Theme

36. SMACSS - Base
• CSS Reset
• CSS Normalize
• There should be no need to use
!important in a Base style.

38. SMACSS - Layout
https://speakerdeck.com/snookca/your

39. SMACSS - Layout
https://speakerdeck.com/snookca/your

41. SMACSS - Module
https://speakerdeck.com/snookca/your

42. SMACSS - Module
http://smacss.com/book/type-module
• ⾴頁⾯面上可單獨存在並且可重複使⽤用的元件
• 定義 Module 時應避免使⽤用 id 或標記名稱
做選擇器
• ⼦子模組以原模組名稱加 dash (-) 作為名稱
如: .mod-­‐header , .mod-­‐body

45. SMACSS - State

46. SMACSS - State
http://smacss.com/book/type-module
• 與 Layout, Module 搭配
• 表⽰示 Layout 或 Module 的狀態變化
• 由 class 定義
• 命名規則是 .is-* 開頭

48. <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

49. SMACSS - Theme
• 定義網站主視覺。
• 類似 Layout，但影響的是網站整體視覺
的變化。
• class 名稱通常以 .theme-* 做開頭

51. • Use class over ID.
• Use child selector. ( .menu > li > a )
• Apply a class when the HTML won’t
be predictable.

56. DECOUPLING CSS FROM HTML
CSS 與 HTML 分離

57. <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>

58. !
.media
p,
.media
div,
.media
……
{
...
}
!

59. !
.media
p,
.media
div,
.media
ul
{
...
}
!
.media-­‐body
{
...
}

60. <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

61. Block
Element
Modifier
BEM

62. http://bem.info/

63. BEM - Block
• 在⾴頁⾯面上獨⽴立存在並可重複使⽤用的元件
• 如同 SMACSS 的 Module, Layout
• 每個 Block 都是獨⽴立存在的

66. BEM - CSS 命名原則 (Block)
.button
.text-­‐field
.heading
.menu
.b-­‐button
.b-­‐text-­‐field
.b-­‐heading
.b-­‐menu
( prefix ⾮非必要)

67. BEM - Element
• 為 Block 的⼀一部份 (⼦子組件)
• 無法獨⽴立於 Block 之外
• 有些 Block 可能沒有 Element

69. BEM - CSS 命名原則 (Element)
.button__icon
.text-­‐field__label
.heading__title
.menu__item
以 Block 名稱加上兩個底線 _ _ 作為 prefix

70. BEM - Modifier
• ⽤用來定義 Block 或 Element
的狀態或屬性
• 類似 SMACSS 的 State
• 同⼀一個 Block 或 Element 可以允許多組
modifier 同時存在

72. BEM - CSS 命名原則 (Modifier)
.button_active
.text-­‐field_editable
.heading_align_top
.menu__item_promo
以 Block 或 Element名稱加上⼀一個底線 _作為 prefix

73. <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

74. MindBEMding
• 改良版 BEM，由 Nicolas Gallagher 提出
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
.block
{
...
}
.block-­‐-­‐modifier
{
...
}
.block__element
{
...
}
.block__element-­‐-­‐modifier
{
...
}

75. 良好的 CSS 架構
• 預測 - Predictable
• 複⽤用 - Reusable
• 維護 - Maintainable
• 延展 - Scalable
http://philipwalton.com/articles/css-architecture/

76. 取其精華，去其糟粕

77. THANKS
Kuro Hsu
kurotanshi [at] gmail.com
http://kuro.tw
http://facebook.com/kurotanshi