Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Search
Kuro Hsu
May 26, 2014
Technology
7
1k
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
2014/05/26 - F2E.tw Party 8th.
Kuro Hsu
May 26, 2014
Tweet
Share
More Decks by Kuro Hsu
See All by Kuro Hsu
Laravel x Vite
kurotanshi
0
630
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
740
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.4k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
120
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.3k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
760
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
410
初探 Vue 3.0 Function API
kurotanshi
4
3k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
Other Decks in Technology
See All in Technology
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1k
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
6
680
IIWレポートからみるID業界で話題のMCP
fujie
0
700
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.3k
TerraformをSaaSで使うとAzureの運用がこんなに楽ちん!HCP Terraformって何?
mnakabayashi
0
300
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
9.5k
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
140
20250623 Findy Lunch LT Brown
3150
0
750
A2Aのクライアントを自作する
rynsuke
1
150
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
190
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
2
140
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
120
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Practical Orchestrator
shlominoach
188
11k
Designing for Performance
lara
609
69k
A better future with KSS
kneath
239
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
We Have a Design System, Now What?
morganepeng
52
7.6k
RailsConf 2023
tenderlove
30
1.1k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Transcript
漫談 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
None
– 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 ·•容器與內容分離
None
None
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.
None
SMACSS - Layout https://speakerdeck.com/snookca/your
SMACSS - Layout https://speakerdeck.com/snookca/your
None
SMACSS - Module https://speakerdeck.com/snookca/your
SMACSS - Module http://smacss.com/book/type-module • ⾴頁⾯面上可單獨存在並且可重複使⽤用的元件 • 定義 Module 時應避免使⽤用
id 或標記名稱 做選擇器 • ⼦子模組以原模組名稱加 dash (-) 作為名稱 如: .mod-‐header , .mod-‐body
None
None
SMACSS - State
SMACSS - State http://smacss.com/book/type-module • 與 Layout, Module 搭配 •
表⽰示 Layout 或 Module 的狀態變化 • 由 class 定義 • 命名規則是 .is-* 開頭
None
<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-* 做開頭
None
• Use class over ID. • Use child selector. (
.menu > li > a ) • Apply a class when the HTML won’t be predictable.
None
None
None
None
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 都是獨⽴立存在的
None
None
BEM - CSS 命名原則 (Block) .button .text-‐field .heading
.menu .b-‐button .b-‐text-‐field .b-‐heading .b-‐menu ( prefix ⾮非必要)
BEM - Element • 為 Block 的⼀一部份 (⼦子組件) • 無法獨⽴立於
Block 之外 • 有些 Block 可能沒有 Element
None
BEM - CSS 命名原則 (Element) .button__icon .text-‐field__label .heading__title
.menu__item 以 Block 名稱加上兩個底線 _ _ 作為 prefix
BEM - Modifier • ⽤用來定義 Block 或 Element 的狀態或屬性
• 類似 SMACSS 的 State • 同⼀一個 Block 或 Element 可以允許多組 modifier 同時存在
None
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