本篇文章給大家分享的是有關(guān)什么是css模塊化？怎么實現(xiàn)css模塊化？小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
CSS 模塊化
CSS(Cascading Style Sheets)，從誕生之初就決定了它無法編程，甚至連解釋性語言都算不上，只能作為一種簡單的層疊樣式表，對 HTML 元素進行格式化。
但隨著前端的發(fā)展，前端項目已經(jīng)變得越來越龐大和復(fù)雜，社區(qū)也一直在探索如何以一種有效的方式去管理前端的代碼（js/css/html）和資源（images, fonts, ...）。
在這個過程中，社區(qū)探索出了 js 的模塊化（amd, commonjs, es6），現(xiàn)在用 js 開發(fā)大工程已經(jīng)游刃有余，而 css 的模塊化卻還沒有特別的深入人心。
1. 分組式模塊化這是最早對 css 模塊化的實現(xiàn)，也是最主要的一種方式，包括現(xiàn)在很多組件和開發(fā)者都是用這種方式開發(fā)的。
分組式模塊化就是用命名的方式，以不同的前綴代表不同的含義，實現(xiàn)樣式分組，文件分塊，達到模塊化的目的。
比如：
重慶分公司
重慶分公司
# 目錄結(jié)構(gòu)
|-- one/page/css/ 某個頁面的 css 目錄
|-- common.css 通用的 css
|-- page1/ 單頁面1
|-- section1.css 區(qū)域1 css
|-- section2.css 區(qū)域2 css
|-- page2/ 單頁面2
|-- ...
# common.css 文件
.c-el-1 {
...
}
.c-el-2 {
...
}
...
# page1/section1.css 文件
.page1-section1 {
...
}
.page1-section1 .el-1 {
...
}
.page1-section1 .el-2 {
...
}
...
# page1/section2.css 文件
.page1-section2 {
...
}
.page1-section2 .el-1 {
...
}
.page1-section2 .el-2 {
...
}
...這種方式并不是真正意義上的模塊化，因為無法避免全局沖突的問題，但原生 css 并不具備編程的能力，所以這個問題是無法避免的。盡管分組式不算真正意義上的模塊化，但是這種方式?jīng)]有脫離 css 原生的機制，所以尤其是第三方組件在導(dǎo)出 css 文件時，很多都使用的是這種方式。
比如，ant-design 導(dǎo)出的 css 中使用 ant- 前綴標(biāo)識，mui 導(dǎo)出的 css 中使用 mui- 前綴標(biāo)識等等。
1.1 最佳實踐css 命名分組實踐的時間很長，從 css 誕生之初就有了，所以社區(qū)已經(jīng)發(fā)展很成熟了，比如網(wǎng)易的 css 規(guī)范框架 NEC，H-ui。
補充：
一個 css 文件不宜過大，可以使用 @import 進行文件分塊；
樣式渲染盡量不要使用 #id [attr]，應(yīng)盡量使用 .class；
使用 js 庫操作 dom 時，盡量不要用 .class，應(yīng)盡量用 #id data-set，如 $('#main'), $('[data-tab="1"]')。
因為 css 不是編程語言，所以不能聲明變量、函數(shù)，不能做判斷、循環(huán)和計算，也不能嵌套，所以這就使得寫樣式是一個效率底下且又枯燥的活兒。
為了解決這個問題，社區(qū)在探索中主要衍生出了兩種拓展語言 less 與 sass，它們兼容 css，并且拓展了編程的功能，主要是帶來了以下的特性：
可以聲明變量、函數(shù)，可以進行一些簡單的計算、判斷、循環(huán)；
可以嵌套選擇器，這樣節(jié)省了書寫的內(nèi)容，也更具閱讀性；
.page1-section1 {
...
.el-1 {
...
.el-1-1 {
...
}
}
.el-2 {
...
}
}@import 避免重復(fù)導(dǎo)入問題，因此可以放心大膽的導(dǎo)入其他文件。
從模塊化的角度來講，less 與 sass 只是擴充了 css 的功能，但并沒有在語言的層面做模塊化，因為全局命名沖突的問題依然還在。
2. 模塊化（導(dǎo)出為 js 對象）想要讓 css 具備真正意義上的模塊化功能，暫時還不能從語言的層面來考慮，所以只能從工具的角度來實現(xiàn)。
目前比較好的方式是使用 js 來加載 css 文件，并將 css 的內(nèi)容導(dǎo)出為一個對象，使用 js 來渲染整個 dom 樹和匹配相應(yīng)的樣式到對應(yīng)的元素上，在這個過程中，我們便有機會對 css 做額外的處理，來達到模塊化的目的。
比如：
源文件
# style.css 文件
.className {
color: green;
}
# js 文件
import styles from "./style.css";
element.innerHTML = 'Hello!
';實際效果
# style.css 文件
._23_aKvs-b8bW2Vg3fwHozO {
color: green;
}
# DOM
Hello!
在這個轉(zhuǎn)換過程中，根據(jù)文件的位置、內(nèi)容生成一個全局唯一的 base64 字符串，替換原來的名稱，避免了全局命名沖突的問題，這樣便達到了模塊化的目的。所以，開發(fā)的過程中便無全局樣式?jīng)_突的問題。
# common.css 文件
.container {
...
}
.el1 {
...
}
.el2 {
...
}
...
# page1/section1.css 文件
.container {
...
}
.title {
...
}
.content {
...
}
...
# page2/section1.css 文件
.container {
...
}
.title {
...
}
.content {
...
}
...對 css 模塊化的定義參見 css-modules，其中對 css 書寫需求主要是：
1、應(yīng)當(dāng)用 .class，而非#id [attr]（因為只有 .class 才能導(dǎo)出為對象的屬性）；
2、推薦用 .className 書寫，而非 .class-name（前者可以通過 styles.className 訪問，后者需要通過 styles['class-name'] 才能訪問）。
更多功能可以查看 css-modules。
當(dāng)然這個功能需要構(gòu)建工具的支持，如果你是使用 webpack 構(gòu)建工程的話，可以使用 css-loader，并設(shè)置 options.modules 為 true， 便可使用模塊化的功能了。
3. 模塊化（內(nèi)置 js，綁定組件）隨著前端組件化的發(fā)展，組件化框架的更新，如 react、vue，慢慢的發(fā)展為把整個組件的資源進行封裝，并只對外暴露一個對象，而調(diào)用者無需關(guān)心組件的內(nèi)部實現(xiàn)和資源，直接調(diào)用這個對象就夠了。
比如（以 react 為例），一個 Welcome 組件，包括一個 js 文件、一個 css 文件、圖片：
# Welcome 組件 |-- welcome.js |-- welcome.css |-- images/
在welcome.js中便可如下加載（使用“導(dǎo)出為 js 對象”的 css 模塊化）：
import styles from './welcome.css'; import image1 from './images/1.jpg';
其實，還有另外一種思路，就是將 css 內(nèi)置 js 中，成為 js 的一部分。
這樣做的目的，一是 css 的模塊化，二是直接綁定到組件上。
比如，material-ui、styled-jsx、jss、vue style scoped 便是使用的這種方式。
這種方式的實現(xiàn)有很多種，這里主要介紹一下 styled-jsx。
3.1 styled-jsxstyled-jsx 的原理是根據(jù)當(dāng)前文件的位置、內(nèi)容生成一個全局唯一的標(biāo)識，然后把這個標(biāo)識追加到組件每一個元素上，每一個樣式選擇器上，達到模塊化的目的。
可以參考官方文檔，查看詳細的用法，我在這里給個例子：
3.1.1 安裝工具（babel 轉(zhuǎn)碼所需）npm install --save styled-jsx3.1.2 配置 babel plugins（如
.babelrc）{
"plugins": [
"styled-jsx/babel"
]
}3.1.3 添加源文件代碼hello.js
