More Related Content Similar to 漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例 (20) 漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例1. 漫談 CSS 架構⽅方法
- 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu @ F2E.tw Party 8th
2014/05/26
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;
}
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
{
...
}
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/
29. <div
class="media">
<div
class="media-‐img">
<img
src="http://placehold.it/80x80"
alt="">
</div>
<div
class="media-‐body">
<p>...</p>
</div>
</div>
36. SMACSS - Base
• CSS Reset
• CSS Normalize
• There should be no need to use
!important in a Base style.
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.
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>
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
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/