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
610
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
710
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
100
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
730
[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
わたしのOSS活動
kazupon
2
320
The Future of SEO: The Impact of AI on Search
badams
0
250
Reading Code Is Harder Than Writing It
trishagee
2
110
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
130
デスクトップだけじゃないUbuntu
mtyshibata
0
590
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
270
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
3
600
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
2
870
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.8k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
130
偏光画像処理ライブラリを作った話
elerac
1
140
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
430
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Docker and Python
trallard
44
3.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
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