痞客邦內部前端技術會議分享

1. Anna Su PIXNET F2E
簡單玩

2. Agenda - CSS MODULES
基本簡介
特⾊色說明
ＤＥＭＯ

3. CSS MODULES
基本簡介之前...
了解

4. Agenda - 為什麼要學 CSS MODULES
先談談為什麼要學？
圖⽚片來源

5. Agenda - 為什麼要學 CSS MODULES
⼯工程師的煩惱
圖⽚片來源

6. Agenda - 為什麼要學 CSS MODULES
1.等下要吃什麼？
2.命名
圖⽚片來源
？？
？
⼯工程師常常要思考兩件事情：

7. Agenda - 為什麼要學 CSS MODULES
1.等下要吃什麼？
總會有⼈人幫忙想...
圖⽚片來源

8. Agenda - 為什麼要學 CSS MODULES
2. 命名
越多⼈人想越⿇麻煩...
圖⽚片來源

9. Agenda - 為什麼要學 CSS MODULES
可以幫你處理 CSS 的命名！！
CSS MODULES

10. Agenda - CSS MODULES 基本簡介
A CSS Module is a CSS file in which
all class names and animation names
are scoped locally by default.

11. Agenda - CSS MODULES 基本簡介
The End of Global CSS

12. Agenda - CSS MODULES 特⾊色說明
幫你命名
不⽤用再搞懂 OOCSS BEM SMACSS

13. 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 */

14. Agenda - CSS MODULES 特⾊色說明
使⽤用 :global 寫全域 class
使⽤用 composes: 載⼊入外部 CSS
不是全域 class， class 都是亂數產⽣生

15. Agenda - CSS MODULES 使⽤用⽅方法
:global .page {
padding: 20px;
}
.page {
padding: 20px;
}
Before After

16. 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

17. Agenda - CSS MODULES 使⽤用⽅方法
.article {
font-size: 16px;
}
._article_xkpkl_10 {
font-size: 16px;
}
Before After

18. 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

19. 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",
}

20. Agenda - CSS MODULES 特⾊色說明
效能會好嗎？
產⽣生⼀一堆亂數

21. Agenda - CSS MODULES 使⽤用⽅方法
.article li {
font-size: 16px;
}
._article_xkpkl_10 {
font-size: 16px;
}
Normal CSS Modules
找⾴頁⾯面上⾯面所有 li 元素 hash 不會重複，只會找⼀一個

22. Agenda - CSS MODULES 特⾊色說明
CSS MODULES 優化：
命名
效能

23. Agenda - CSS MODULES 使⽤用⽅方法
localIdentName=[name]__[local]___[hash:base64:5]
可以⾃自定義名稱
例如，在webpack.config 設定：
index__titlePixnet___3Y30S

24. Agenda - CSS MODULES
ＤＥＭＯ

25. Reference - CSS MODULES
DEMO - github
TJ - frontend-boilerplate
Documentation about css-modules
The End of Global CSS

26. Thanks! 感謝聆聽 ：）