本篇文章帶給大家的內容是關於什麼是css模組化？ css模組化的實現方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
CSS 模組化
CSS(Cascading Style Sheets)，從誕生之初就決定了它無法編程，甚至連解釋性語言都算不上，只能作為一種簡單的層疊樣式表，對HTML 元素進行格式化。
但隨著前端的發展，前端專案變得越來越龐大和複雜，社群也一直在探索如何以一種有效的方式去管理前端的程式碼（js/css/html）和資源（images, fonts, ...）。
在這個過程中，社群探索出了 js 的模組化（amd, commonjs, es6），現在用 js 開發大工程已經游刃有餘，而 css 的模組化卻還沒有特別的深入人心。
這是最早對css 模組化的實現，也是最主要的一種方式，包括現在許多元件和開發者都是用這種方式開發的。
分組式模組化就是用命名的方式，以不同的前綴代表不同的意義，實現樣式分組，檔案分塊，達到模組化的目的。
例如：
# 目录结构
|-- one/page/css/ 某个页面的 css 目录
|-- common.css 通用的 css
|-- page1/ 单页面1
|-- section1.css 区域1 css
|-- section2.css 区域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 並不具備程式設計的能力，所以這個問題是無法避免的。儘管分組式不算真正意義上的模組化，但這種方式並沒有脫離 css 原生的機制，所以尤其是第三方元件在匯出 css 檔案時，很多都使用的是這種方式。
例如，ant-design 導出的 css 中使用 ant- 前綴標識，mui 導出的 css 中使用 mui- 前綴標識等等。
css 命名分組實踐的時間很長，從css 誕生之初就有了，所以社區已經發展很成熟了，比如網易的css 規範框架NEC， H-ui。
補充：
一個css 檔案不宜過大，可以使用@import 進行檔案分塊；
樣式渲染盡量不要使用#id [attr]，應盡量使用.class;
使用js 函式庫操作dom 時，盡量不要用.class，應盡量用#id data-set，如$('#main'), $('[data-tab="1 "]')。
<ul> <li data-tab="1">tab1</li> <li data-tab="2">tab2</li> </ul> <p data-tab-container="1"></p> <p data-tab-container="2"></p>
因為css 不是程式語言，所以不能宣告變數、函數，不能做判斷、循環和計算，也不能嵌套，所以這就使得寫入樣式是一個效率底下又枯燥的活兒。
為了解決這個問題，社群在探索中主要衍生出了兩種拓展語言less 與sass，它們相容於css，並且拓展了程式設計的功能，主要是帶來了以下的特性：
可以宣告變數、函數，可以進行一些簡單的計算、判斷、循環；
可以嵌套選擇器，這樣節省了書寫的內容，也更具閱讀性；
.page1-section1 {
...
.el-1 {
...
.el-1-1 {
...
}
}
.el-2 {
...
}
}@import 避免重複導入問題，因此可以放心大膽的導入其他檔案。
從模組化的角度來講，less 與 sass 只是擴充了 css 的功能，但並沒有在語言的層面做模組化，因為全局命名衝突的問題依然還在。
想要讓css 具備真正意義上的模組化功能，暫時還不能從語言的層面來考慮，所以只能從工具的角度來實現。
目前比較好的方式是使用js 來載入css 文件，並將css 的內容匯出為一個對象，使用js 來渲染整個dom 樹和匹配相應的樣式到對應的元素上，在這個過程中，我們便有機會對css 做額外的處理，來達到模組化的目的。
例如：
來源檔案
## style.css 文件
.className {
color: green;
}
# js 文件
import styles from "./style.css";
element.innerHTML = '<p class="' + styles.className + '">Hello!</p>';實際效果
# style.css 文件
._23_aKvs-b8bW2Vg3fwHozO {
color: green;
}
# DOM
<p class="_23_aKvs-b8bW2Vg3fwHozO">Hello!</p>在這個轉換過程中，根據檔案的位置、內容產生一個全域唯一的base64 字串，取代原來的名稱，避免了全域命名衝突的問題，這樣便達到了模組化的目的。所以，開發的過程中便無全域樣式衝突的問題。
# common.css 文件
.container {
...
}
.el1 {
...
}
.el2 {
...
}
...
# page1/section1.css 文件
.container {
...
}
.title {
...
}
.content {
...
}
...
# page2/section1.css 文件
.container {
...
}
.title {
...
}
.content {
...
}
...對css 模組化的定義參見css-modules，其中對css 書寫需求主要是：
1、應當用.class，而非#id [attr]（因為只有. class 才能導出為物件的屬性）；
2、推薦用.className 書寫，而非.class-name（前者可以透過styles.className 訪問，後者需要透過styles['class-name']才能訪問）。
更多功能可以查看 css-modules。
當然這個功能需要建構工具的支持，如果你是使用 webpack 建置工程的話，可以使用 css-loader，並設定 options.modules 為 true， 便可使用模組化的功能了。
隨著前端元件化的發展，元件化框架的更新，如react、vue，慢慢的發展為把整個元件的資源進行封裝，並且只對外暴露一個對象，而呼叫者無需關心元件的內部實作和資源，直接呼叫這個對象就夠了。
比如（以 react 为例），一个 Welcome 组件，包括一个 js 文件、一个 css 文件、图片：
# Welcome 组件 |-- welcome.js |-- welcome.css |-- images/
在 welcome.js 中便可如下加载（使用“导出为 js 对象”的 css 模块化）：
import styles from './welcome.css'; import image1 from './images/1.jpg';
其实，还有另外一种思路，就是将 css 内置 js 中，成为 js 的一部分。
这样做的目的，一是 css 的模块化，二是直接绑定到组件上。
比如，material-ui、styled-jsx、jss、vue style scoped 便是使用的这种方式。
这种方式的实现有很多种，这里主要介绍一下 styled-jsx。
styled-jsx 的原理是根据当前文件的位置、内容生成一个全局唯一的标识，然后把这个标识追加到组件每一个元素上，每一个样式选择器上，达到模块化的目的。
可以参考官方文档，查看详细的用法，我在这里给个例子：
npm install --save styled-jsx
.babelrc）{
"plugins": [
"styled-jsx/babel"
]
}hello.js
export default () => (
<div className={'container'}>
<p className={'hello'}>Hello! Hello!</p>
<div id={'hi'}>Hi!</div>
<style jsx>{`
.container {
color: blue;
}
p:first-child {
color: red;
}
.hello {
color: yellow;
}
#hi {
color: green;
}
`}</style>
</div>
)babel path/to/hello.js -d target/dir
转码后的文件
import _JSXStyle from 'styled-jsx/style';
export default () => (
<div className={'jsx-234963469' + ' ' + 'container'}>
<p className={'jsx-234963469' + ' ' + 'hello'}>Hello! Hello!</p>
<div id={'hi'} className={"jsx-234963469"}>Hi!</div>
<_JSXStyle styleId={"234963469"} css={".container.jsx-234963469{color:blue;}p.jsx-234963469:first-child{color:red;}.hello.jsx-234963469{color:yellow;}#hi.jsx-234963469{color:green;}"} />
</div>
);实际渲染效果
<style type="text/css" data-styled-jsx="">
.container.jsx-234963469{
color:blue;
}
p.jsx-234963469:first-child{
color:red;
}
.hello.jsx-234963469{
color:yellow;
}
#hi.jsx-234963469{
color:green;
}
</style>
<div class="jsx-234963469 container">
<p class="jsx-234963469 hello">Hello! Hello!</p>
<div id="hi" class="jsx-234963469">Hi!</div>
</div>以上就是本篇文章的全部内容了，更多css相关内容请关注php中文网的css教程栏目。
以上是什麼是css模組化？ css模組化的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
