css modules 簡單玩
TRANSCRIPT
Anna Su PIXNET F2E
簡單玩
Agenda - CSS MODULES
基本簡介特⾊色說明DEMO
CSS MODULES
基本簡介之前...了解
Agenda - 為什麼要學 CSS MODULES
⼯工程師的煩惱
圖⽚片來源
Agenda - 為什麼要學 CSS MODULES
1.等下要吃什麼?2.命名
圖⽚片來源
???
⼯工程師常常要思考兩件事情:
Agenda - 為什麼要學 CSS MODULES
可以幫你處理 CSS 的命名!!
CSS MODULES
Agenda - CSS MODULES 基本簡介
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
Agenda - CSS MODULES 基本簡介
The End of Global CSS
Agenda - CSS MODULES 特⾊色說明
幫你命名不⽤用再搞懂 OOCSS BEM SMACSS
Agenda - CSS MODULES 使⽤用⽅方法
:global .page { padding: 20px; }
.title { composes: title from "./mixins.css"; color: green; }
.article { font-size: 16px; }
.title { color: black; font-size: 40px; }
.title:hover { color: red; }
/* styles.css */ /* mixins.css */
Agenda - CSS MODULES 特⾊色說明
使⽤用 :global 寫全域 class使⽤用 composes: 載⼊入外部 CSS不是全域 class, class 都是亂數產⽣生
Agenda - CSS MODULES 使⽤用⽅方法
:global .page { padding: 20px; }
.page { padding: 20px; }
Before After
Agenda - CSS MODULES 使⽤用⽅方法
.title { composes: title from "./mixins.css"; color: green; }
._title_116zl_1 { color: black; font-size: 40px; }
._title_116zl_1:hover { color: red; }
._title_xkpkl_5 { color: green; }
Before After
Agenda - CSS MODULES 使⽤用⽅方法
.article { font-size: 16px; }
._article_xkpkl_10 { font-size: 16px; }
Before After
Agenda - CSS MODULES 使⽤用⽅方法
:global .page { padding: 20px; }
.title { composes: title from "./mixins.css"; color: green; }
.article { font-size: 16px; }
._title_116zl_1 { color: black; font-size: 40px; }
._title_116zl_1:hover { color: red; }
.page { padding: 20px; }
._title_xkpkl_5 { color: green; }
._article_xkpkl_10 { font-size: 16px; }
Before After
Agenda - CSS MODULES 特⾊色說明the plugin will give you a JSON object for transformed classes:
{ "title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10", }
Agenda - CSS MODULES 特⾊色說明
效能會好嗎?產⽣生⼀一堆亂數
Agenda - CSS MODULES 使⽤用⽅方法
.article li { font-size: 16px; }
._article_xkpkl_10 { font-size: 16px; }
Normal CSS Modules
找⾴頁⾯面上⾯面所有 li 元素 hash 不會重複,只會找⼀一個
Agenda - CSS MODULES 特⾊色說明
CSS MODULES 優化:
命名 效能
Agenda - CSS MODULES 使⽤用⽅方法
localIdentName=[name]__[local]___[hash:base64:5]
可以⾃自定義名稱
例如,在webpack.config 設定:
index__titlePixnet___3Y30S
Agenda - CSS MODULES
DEMO
Reference - CSS MODULES
DEMO - githubTJ - frontend-boilerplateDocumentation about css-modulesThe End of Global CSS
Thanks! 感謝聆聽 :)