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
920
漫談 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
590
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
650
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
85
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
690
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
380
初探 Vue 3.0 Function API
kurotanshi
4
2.9k
VueJS Style Guide 導讀
kurotanshi
6
1.7k
Other Decks in Technology
See All in Technology
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
スレットハンティングについて知っておきたいこと
hacket
0
130
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
AWSでRAGを作る法方
sonoda_mj
1
140
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
GitHub's CSS Performance
jonrohan
1026
450k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Web Components: a chance to create the future
zenorocha
307
41k
Happy Clients
brianwarren
94
6.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Infographics Made Easy
chrislema
238
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Producing Creativity
orderedlist
PRO
340
39k
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