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
620
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
720
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
120
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
750
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
400
初探 Vue 3.0 Function API
kurotanshi
4
3k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
Other Decks in Technology
See All in Technology
技術者はかっこいいものだ!!~キルラキルから学んだエンジニアの生き方~
masakiokuda
2
270
食べログが挑む!飲食店ネット予約システムで自動テスト無双して手動テストゼロを実現する戦略
hagevvashi
3
420
Porting PicoRuby to Another Microcontroller: ESP32
yuuu
4
410
AI Agentを「期待通り」に動かすために:設計アプローチの模索と現在地
kworkdev
PRO
2
450
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
120
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
270
Road to Go Gem #rubykaigi
sue445
0
470
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
790
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
110
更新系と状態
uhyo
7
1.5k
[2025年4月版] Databricks Academy ラボ環境 利用開始手順 / Databricks Academy Labs Onboarding
databricksjapan
0
140
バックオフィス向け toB SaaS バクラクにおけるレコメンド技術活用 / recommender-systems-in-layerx-bakuraku
yuya4
6
540
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
We Have a Design System, Now What?
morganepeng
52
7.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
750
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Agile that works and the tools we love
rasmusluckow
328
21k
Site-Speed That Sticks
csswizardry
5
490
A Tale of Four Properties
chriscoyier
158
23k
RailsConf 2023
tenderlove
30
1.1k
4 Signs Your Business is Dying
shpigford
183
22k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
The Language of Interfaces
destraynor
157
25k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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