css 算是前端發(fā)展的一個(gè)痛點(diǎn)吧. 以前是裸寫(xiě)css, 接著到后來(lái)的 inline css, 然后是, scss/sass. 從單一 file 到可以模塊化書(shū)寫(xiě)css. 不過(guò), 隨著前端發(fā)展, 現(xiàn)在的要求是組件化, 那么, 以前那種直接 < link> 腳本也逐漸變?yōu)橥袋c(diǎn). so, 2015/6 左右, 出來(lái)了 css-module 這個(gè)概念. 可以說(shuō), 這是一個(gè)專(zhuān)門(mén)為 component 編程而生的. 因?yàn)?他是和 js 緊密結(jié)合在一起的.
css-module 更具官方的說(shuō)法就是: css-module 其實(shí)就是原來(lái)的 css 文件。只是他的 className 和 animation 最后都會(huì)被編譯為 object 形式的映射對(duì)象.
舉個(gè)簡(jiǎn)單的例子就是:

// 未編譯前的 style.css .title {background-color: red; }// 通過(guò)js 腳本調(diào)用 import styles from "./styles.css";element.innerHTML = `<h1 class="${styles.title}">demo</h1>`;// 最后實(shí)際輸出為: # css 格式 ._styles__title_309571057 {background-color: red; } # HTML 格式 <h1 class="_styles__title_309571057">demo </h1>

上面簡(jiǎn)單的介紹了, css-module 到底是啥?
Ps: 上面漏了一點(diǎn), 怎么將css 編譯嘞？ 這里,方法很多,有webpack, gulp等等. 看同學(xué)們自己的選擇了

命名方式

首先,在 css-module 里面. 以前在 css 中的命名方式,都變得 nonsense. 在 css-module 推薦一切命名方式使用 camelCase 的形式. 因?yàn)? 在寫(xiě)組件的時(shí)候我們并不是來(lái)寫(xiě)全局的樣式, 我們僅僅只是來(lái)完成我們當(dāng)前組件的渲染. 所以, 這就要求, 這些組件所需和隱藏的 css 屬性, 我們必須一個(gè)不拉的全部寫(xiě)上去, 比如: display, font, text-align 等等.

// 寫(xiě)一個(gè) btn 的樣式 # 原始的css .btn-normal{...}# 使用 css-module # 實(shí)際該文件的保存名就是 btn-style.css .normal{...} .clickStyle{...}

組合 composition

既然, 上文已經(jīng)說(shuō)了 css-module 里面每個(gè) style 都必須全部寫(xiě)出所需的樣式, 那么, 這樣重復(fù)的工作實(shí)在太多的... 誰(shuí) TM 還和你來(lái)什么 module 不 module 的. 所以, 為了解決這樣的痛點(diǎn), css-module 提供了 composes 這個(gè)概念. 相當(dāng)于, 就是我們以前 css 中的嵌套.

// 原始 css # 直接嵌套 .button{...} .button .normal{...}// 在 css-module 中 # 使用 composes 進(jìn)行嵌套 .button{...} .normal{composes:button;... }

這個(gè) composes 概念,就有點(diǎn)和 sass 中的 @extends 類(lèi)似. 但,他倆編譯的結(jié)果點(diǎn)都不像. composes 是直接在 DOM 渲染時(shí), 添加不同的 class. 而 @extends 只是將 class 變?yōu)榍短锥?

// @extends 語(yǔ)法 .Button--common { ... } .Button--normal {@extends .Button--common;... }// 編譯結(jié)果 .Button--common, .Button--normal {...} .Button--normal {...}

但,這樣并不符合 css-module 實(shí)際編譯后改變 className 的 feature, 并且, @extends 的結(jié)果, 會(huì)造成很大的 className 冗余.
具體說(shuō)一下 css-module composes 的過(guò)程.

// 正常書(shū)寫(xiě) css-module .common { ...} .normal { composes: common; ... }// 經(jīng)過(guò)編譯得出 # 注意,這里并沒(méi)有存在嵌套的情況,每個(gè)className 都是分離的. .components_submit_button__common__abc5436 { ... } .components_submit_button__normal__def6547 { ... }// 通過(guò) import 的 css 暴露的接口為: styles: {common: "components_submit_button__common__abc5436",normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547", }// 渲染出來(lái)的HTML DOM 節(jié)點(diǎn)內(nèi)容 # 添加 style.normal 樣式 <button class="components_submit_button__common__abc5436 components_submit_button__normal__def6547">Submit </button>

當(dāng)然, composes 也可以引入其他 css 文件中的某個(gè) class.

// colors.css .primary {color: #720; }// button.css .normal {composes: primary from "../shared/colors.css"; }

另外, 寫(xiě)好一個(gè) css-module 有很多原則可以遵循的. 最出名的應(yīng)該就是 單一職責(zé)原則.

單一職責(zé)

因?yàn)?composes 的限制, 我們一般只能引入單一的 className 去包裹我們想要的 style 樣式. 但這樣,感覺(jué)有點(diǎn)浪費(fèi). 這點(diǎn),感覺(jué) sass 做的還是挺棒的.

@mixin subtle-shadow {box-shadow: 0 0 4px -2px; } // 直接通過(guò) mixin 引進(jìn) .some_element {@include subtle-shadow; }

所以, 為了在 css-module 達(dá)到同樣的目的. 我們一般只能使用單一的文件去包裹,所需的樣式內(nèi)容. 像下面的 demo:

// 直接從其他文件中引進(jìn) .element {composes: large from "./typography.css"; }

具體實(shí)例

css-module 主要是和 react 一起使用. 因?yàn)? react 存在, 才使前端組件化得到蓬勃的發(fā)展. so, 我們這里,就需要借助 webpack 對(duì) import 的 css 文件進(jìn)行編譯.
這里就不多說(shuō)了, 直接把配置放出來(lái)吧.

// 引入所需的插件 var ExtractTextPlugin = require('extract-text-webpack-plugin');# 下面就是具體的 module.exports 里面的內(nèi)容module: {// 關(guān)鍵語(yǔ)句. 處理 css-module的內(nèi)容.loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') }]},postcss: [require('autoprefixer-core'),require('postcss-color-rebeccapurple')],resolve: {modulesDirectories: ['node_modules', 'components']},plugins: [new ExtractTextPlugin('style.css', { allChunks: true })]

如果,想更快的了解的話(huà), 那就直接去線上 demo 看吧.

總結(jié)

以上是生活随笔為你收集整理的组件化的css-module的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。