CSS modules 簡單玩

Anna Su PIXNET F2E

簡單玩

Agenda - CSS MODULES

基本簡介特⾊色說明ＤＥＭＯ

CSS MODULES

基本簡介之前...了解

Agenda - 為什麼要學 CSS MODULES

先談談為什麼要學？

圖⽚片來源

Agenda - 為什麼要學 CSS MODULES

⼯工程師的煩惱

圖⽚片來源

Agenda - 為什麼要學 CSS MODULES

1.等下要吃什麼？2.命名

圖⽚片來源

？？？

⼯工程師常常要思考兩件事情：

Agenda - 為什麼要學 CSS MODULES

1.等下要吃什麼？總會有⼈人幫忙想...

圖⽚片來源

Agenda - 為什麼要學 CSS MODULES

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

ＤＥＭＯ

Reference - CSS MODULES

DEMO - githubTJ - frontend-boilerplateDocumentation about css-modulesThe End of Global CSS

Thanks! 感謝聆聽 ：）