css modules是什麼

CSS Modules不是一個官方的規範，也不是瀏覽器的一種機制，而是在建構步驟中對CSS類別名稱和選擇器限定作用域的一種方式（類似於命名空間）。透過建構工具的幫助，可以將class的名字或選擇器的名字作用域化。

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

css modules是什麼

#根據CSS Modules在Gihub上的項目，它被解釋為：

#所有的類別名稱和動畫名稱預設都有各自的作用域的CSS檔案。

所以CSS Modules 不是一個官方的規範，也不是瀏覽器的一種機制，而是在建構步驟（例如使用Webpack或Browserify）中對CSS類別名稱和選擇器限定作用域的一種方式（類似命名空間）。

css modules優勢

解決全域命名衝突問題css modules只關心元件本身命名唯一

模組化可以使用composes來引入自身模組中的樣式以及另一個模組的樣式

解決嵌套層次過深的問題使用扁平化的類別名稱

為什麼引入css Modules？

1）、全域樣式衝突

webpack進行打包時，將所有js檔案匯入到入口App.js檔案中，樣式也會統一載入到入口中，根據css的layout規則，後面的樣式會覆寫前面的樣式聲明，造成全域樣式的覆蓋問題。

2）、巢狀層次過深的選擇器

嵌套特別深會造成的問題：

- 根據css選擇器的解析規則可以知道，層級越深，比較的次數就越多，影響整個頁面的渲染

- 增加了不必要的位元組開銷

- 語義混亂可擴展性不好，約束越多，擴展性越差

3）、無法共享變數

#複雜元件要使用js 和css 來共同處理樣式。

學習影片分享：css影片教學

#

以上是css modules是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！