CSS Modules

查小小飛發表於2019-12-24
CSS

CSS 如何實現模組化

什麼是CSS Modules

ES6之前雖然語言層面上沒有模組化的實現，但通過各種方法能夠做到模組化的效果，也就是能夠實現你和我寫的程式碼可以相互不干擾，不會衝突。那在CSS中又是怎麼實現兩個CSS檔案能不相互影響的呢？這就是CSS Modules要解決的問題。 先看看官方給的定義：

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

實際上，CSS Modules 不是一個官方的標準，也不是瀏覽器的實現。而是你按照的 Modules 的寫法(語法)去寫CSS,然後通過構建工具轉換，就能夠實CCSS Modules。

CSS Modules 語法規則

全域性作用域的樣式

語法： ：global(.className)

index.css

:global(.red) {
    color: red;
}
複製程式碼

這樣，red 這個類就是一個全域性的樣式，和我們正常寫的CSS是一樣的。

區域性作用域的樣式

語法： :loacl(.red)

index.css

：local(.red) {
    color: red;
}

或者：
.red {
    color: red;
}
複製程式碼

這樣，red這個類就是一個具有區域性作用的樣式，它不會影響到其他的CSS。

類的組合(繼承)

語法： composes: className 注意：這個語法只適用於區域性作用域的Class index.css

.red {
    color: red;
}
.ele1 {
    composes: red;  // 繼承了 red Class 的樣式
    font-size: 24px;
}
複製程式碼

繼承其他模組的類

index1.css

.red {
    color: red;
}
複製程式碼

index2.css

.ele {
    composes: red from './index1.css'  // 繼承了index1.css 裡的red Class
}

複製程式碼

CSS Modules Complier

上面的寫法不是CSS的語法，瀏覽器無法識別上面的寫法，那如何讓瀏覽器識別呢，這就需要用一個工具，將它轉換成瀏覽器認識的CSS，這就CSS Modules Complier，例如webpack 的css-loader就實現了這個功能。

是如何實現區域性作用的

下面是一個示意圖：

通過CSS Modules 的寫法寫CSS，然後經過CSS Modules Complier 將CSS進行處理，最後會將這個CSS 檔案以一個JS物件的形式輸出。

CSS Modules

要想在CSS裡實現區域性作用域，這就要保證你的Class名是獨一無二的，這就是核心，CSS Modules Complier就是通過將區域性作用域的Class Name 轉換成一個獨一無二的名字實現CSS Module 的。

CSS Modules

相關文章