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中文網其他相關文章！
