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
930
漫談 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
600
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
660
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
90
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
700
[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
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
240
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
160
やってやろうじゃないかメカアジャイル! / Let's do it, mechanical agile!
psj59129
1
670
LLVM/ASMを使った有限体の高速実装
herumi
0
120
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
140
Technical Writing Meetup vol.35
soracom
PRO
2
120
The XZ Backdoor Story
fr0gger
0
3.6k
『GRANBLUE FANTASY Relink』ソフトウェアラスタライザによる実践的なオクルージョンカリング
cygames
0
170
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
200
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Happy Clients
brianwarren
96
6.6k
Designing with Data
zakiwarfel
98
5k
What's in a price? How to price your products and services
michaelherold
242
11k
Designing for humans not robots
tammielis
248
25k
Making Projects Easy
brettharned
113
5.8k
YesSQL, Process and Tooling at Scale
rocio
167
14k
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