為什么80%的碼農都做不了架構師？>>> ??

github·原文

CSS Modules 內部通過?ICSS?來解決樣式導入和導出這兩個問題。分別對應?:import?和?:export?兩個新增的偽類。

:import("path/to/dep.css") {localAlias: keyFromDep;/* ... */ } :export {exportedKey: exportedValue;/* ... */ }

webpack 配置

結合 Webpack 的?css-loader?后，就可以在 CSS 中定義樣式，在 JS 中導入。加上?modules?即為啟用，localIdentName?是設置生成樣式的命名規則。

// webpack.config.js css?modules&localIdentName=[name]__[local]-[hash:base64:5]

示例

css 樣式

/* components/Button.css */ .normal { /* normal 相關的所有樣式 */ } .disabled { /* disabled 相關的所有樣式 */ }

js 編寫

/* components/Button.js */ import styles from './Button.css';console.log(styles);buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

生成的 html

<button class="button--normal-abc53">Submit</button>

注意到?button--normal-abc53?是 CSS Modules 按照?localIdentName?自動生成的 class 名。其中的?abc53?是按照給定算法生成的序列碼。經過這樣混淆處理后，class 名基本就是唯一的，大大降低了項目中樣式覆蓋的幾率。同時在生產環境下修改規則，生成更短的 class 名，可以提高 CSS 的壓縮率。

通過這些簡單的處理，CSS Modules 實現了以下幾點：

• 所有樣式都是 local 的，解決了命名沖突和全局污染問題
• class 名生成規則配置靈活，可以此來壓縮 class 名
• 只需引用組件的 JS 就能搞定組件所有的 JS 和 CSS
• 依然是 CSS，幾乎 0 學習成本

樣式默認局部

使用了 CSS Modules 后，就相當于給每個 class 名外加加了一個?:local，以此來實現樣式的局部化，如果你想切換到全局模式，使用對應的?:global。

.normal {color: green; }/* 以上與下面等價 */ :local(.normal) {color: green; }/* 定義全局樣式 */ :global(.btn) {color: red; }/* 定義多個全局樣式 */ :global {.link {color: green;}.box {color: yellow;} }

樣式復用

可以使用 css-module自帶的?composes 來組合樣式

/* settings.css */ .primary-color {color: #f40; }/* components/Button.css */ .base { /* 所有通用的樣式 */ }.primary {composes: base;composes: primary-color from './settings.css';/* primary 其它樣式 */ }

class 命名技巧

CSS Modules 的命名規范是從 BEM 擴展而來。BEM 把樣式名分為 3 個級別，分別是：

• Block：對應模塊名，如 Dialog
• Element：對應模塊中的節點名 Confirm Button
• Modifier：對應節點相關的狀態，如 disabled、highlight

綜上，BEM 最終得到的 class 名為?dialog__confirm-button--highlight。使用雙符號?__?和?--?是為了和區塊內單詞間的分隔符區分開來。

CSS Modules 中 CSS 文件名恰好對應 Block 名，只需要再考慮 Element 和 Modifier。BEM 對應到 CSS Modules 的做法是：

/* .dialog.css */ .ConfirmButton--disabled { }

你也可以不遵循完整的命名規范，使用 camelCase 的寫法把 Block 和 Modifier 放到一起：

/* .dialog.css */ .disabledConfirmButton { }

原則規范

CSS Modules 是對現有的 CSS 做減法。為了追求簡單可控，作者建議遵循如下原則：

• 不使用選擇器，只使用 class 名來定義樣式
• 不層疊多個 class，只使用一個 class 把所有樣式定義好
• 所有樣式通過?composes?組合來實現復用
• 不嵌套

?

轉載于:https://my.oschina.net/lemos/blog/1537216

總結

以上是生活随笔為你收集整理的css-modules 简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。