css modules通過將類名轉換為唯一標識符實現命名空間隔離，避免樣式沖突。其核心是默認將類名本地化，如.button變成button_primary__abc123。1. :local用于定義局部作用域，類名會被轉換；2. :global用于定義全局作用域，類名保持不變，適用于第三方庫樣式引入。調試時可通過瀏覽器開發者工具查看編譯后類名及原始類名。使用:global應謹慎，以防止破壞封裝性。相比其他方案，css modules具備避免沖突、局部作用域、簡單易用等優勢，但也存在調試困難和構建復雜性等缺點。
CSS Modules 通過默認將所有類名轉換成唯一的、本地作用域的標識符來解決樣式沖突問題。:global 和 :local 用于控制樣式的局部或全局作用域。
CSS Modules的核心思想是，默認情況下，CSS文件中的所有類名和動畫名都只在當前模塊（組件）中有效。這通過在編譯時將類名轉換成獨一無二的名字來實現，通常會包含文件名和原始類名，用一些哈希值分隔。這樣，即使不同的CSS文件定義了相同的類名，它們在最終渲染時也會被視為不同的類，從而避免沖突。
如何理解CSS Modules的命名空間隔離？
立即學習“前端免費學習筆記（深入）”；
CSS Modules實際上并沒有創建一個真正的“命名空間”，而是一種模擬。它通過對類名進行轉換，確保每個類名都是唯一的。例如，如果你有一個名為button.module.css的文件，其中定義了一個類.primary，那么在編譯后，這個類名可能會變成button_primary__abc123。abc123 是一個隨機生成的哈希值，確保唯一性。這樣，即使你在另一個組件中也定義了一個.primary類，它們的實際名稱是不同的，不會發生沖突。
這種方式的優點是簡單直接，不需要額外的運行時開銷。缺點是調試時可能不太方便，因為你需要查看編譯后的類名才能找到對應的樣式。不過，大多數現代瀏覽器都提供了查看元素樣式的工具，可以方便地找到原始類名和對應的CSS規則。
:local 和 :global 的作用是什么？
默認情況下，CSS Modules會將所有類名都視為局部作用域。這意味著，如果你直接寫.primary，它會被轉換成一個唯一的類名。但是，有時候你可能需要定義一些全局樣式，比如通用的reset樣式或者第三方庫提供的樣式。這時，你就可以使用:global來聲明一個全局類名。
例如：
/* button.module.css */ .primary { background-color: blue; color: white; } :global .btn { padding: 10px 20px; border: none; cursor: pointer; }
在這個例子中，.primary是一個局部類名，會被轉換成一個唯一的類名。而.btn是一個全局類名，不會被轉換，可以直接在html中使用。
相反地，如果你想在一個全局CSS文件中使用CSS Modules的局部作用域特性，你可以使用:local。雖然這種情況比較少見，但有時候也是有用的。
何時應該使用 :global，何時應該避免？
使用:global的一個常見場景是引入第三方CSS庫，比如bootstrap或者Ant Design。這些庫通常會提供一些全局的CSS類名，你需要在你的組件中使用它們。
例如：
/* my-component.module.css */ :global .ant-btn { /* 覆蓋Ant Design的樣式 */ border-radius: 0; } .myButton { /* 組件自己的樣式 */ background-color: red; }
在這個例子中，我們使用:global來選擇Ant Design的.ant-btn類，并覆蓋它的樣式。同時，我們還定義了一個.myButton類，它是局部作用域的。
但是，過度使用:global會破壞CSS Modules的封裝性，導致樣式沖突的風險增加。因此，你應該盡量避免使用:global，只在必要的時候才使用。一種更好的做法是，盡量將第三方庫的樣式封裝到組件內部，避免直接在全局范圍內使用。
例如，你可以創建一個Button組件，將Ant Design的按鈕樣式封裝到這個組件中：
// Button.JSx import React from 'react'; import 'antd/dist/antd.css'; // 引入Ant Design的樣式 import { Button as AntButton } from 'antd'; function Button(props) { return <AntButton {...props} />; } export default Button;
這樣，你就可以在你的應用中使用Button組件，而不需要直接在CSS文件中使用:global。
如何調試CSS Modules樣式？
調試CSS Modules樣式可能會有些挑戰，因為你需要找到編譯后的類名才能找到對應的CSS規則。不過，大多數現代瀏覽器都提供了查看元素樣式的工具，可以方便地找到原始類名和對應的CSS規則。
在chrome DevTools中，你可以打開“Elements”面板，選擇你想要調試的元素，然后在“Styles”面板中查看它的樣式。你會看到編譯后的類名，以及對應的CSS規則。
如果你想找到原始類名對應的CSS規則，你可以使用瀏覽器的搜索功能。在“Styles”面板中，你可以按Ctrl+F（或者Cmd+F）打開搜索框，然后輸入原始類名。瀏覽器會高亮顯示所有包含原始類名的CSS規則。
另外，一些開發工具也提供了CSS Modules的調試支持。例如，在VS Code中，你可以安裝一些CSS Modules相關的插件，它們可以幫助你更方便地查看和編輯CSS Modules樣式。
CSS Modules與其他CSS解決方案相比有什么優勢和劣勢？
CSS Modules有很多優點：
- 避免樣式沖突： 這是CSS Modules最核心的優勢。通過將類名轉換成唯一的標識符，CSS Modules可以有效地避免樣式沖突。
- 局部作用域： CSS Modules默認情況下會將所有類名都視為局部作用域，這可以提高代碼的可維護性和可重用性。
- 簡單易用： CSS Modules的使用非常簡單，只需要安裝一個loader，然后在CSS文件中編寫樣式即可。
- 與現有工具集成： CSS Modules可以與現有的構建工具（比如webpack和Parcel）很好地集成。
但是，CSS Modules也有一些缺點：
- 調試困難： 由于類名被轉換成唯一的標識符，調試CSS Modules樣式可能會有些困難。
- 需要構建過程： CSS Modules需要在構建過程中進行編譯，這會增加構建的復雜性。
- 學習曲線： 雖然CSS Modules的使用很簡單，但是理解它的工作原理需要一定的學習成本。
與其他CSS解決方案相比，比如BEM、Styled Components和CSS-in-JS，CSS Modules在簡單性和性能方面具有優勢。BEM需要手動管理命名空間，容易出錯。Styled Components和CSS-in-JS需要在運行時生成CSS，會增加額外的開銷。
總的來說，CSS Modules是一種簡單、高效的CSS解決方案，特別適合大型項目和團隊協作。
