在前端開發中，一個頁面引用多個 CSS 檔案時，樣式衝突是很常見的問題。為了防止樣式衝突，可以採用以下幾種策略：
1. CSS 名稱空間/模組化:
-
BEM (Block, Element, Modifier): 這是一種流行的命名約定，它透過使用連字元和下劃線來建立更具描述性和唯一性的類名。例如，
.block-name__element-name--modifier-name。這樣可以有效避免不同模組之間的樣式衝突。 -
CSS Modules: 這是一個構建步驟中的工具，它會自動為你的 CSS 類生成唯一的作用域。這意味著即使你的不同檔案中使用了相同的類名，它們最終也會被編譯成不同的、唯一的類名，從而避免衝突。
-
名稱空間字首: 為每個 CSS 檔案或模組新增一個獨特的字首。例如，如果你的頁面引用了
header.css和footer.css，你可以在header.css中使用.header-字首，在footer.css中使用.footer-字首。
2. CSS 優先順序:
-
更具體的 selectors: 使用更具體的 CSS 選擇器可以提高樣式的優先順序。例如，
#id > .class比.class的優先順序更高。但是，過度使用過於具體的選擇器會使程式碼難以維護，應謹慎使用。 -
!important: 這是提高樣式優先順序的終極武器，但應謹慎使用。!important會覆蓋所有其他樣式，包括更具體的樣式。過度使用!important會使程式碼難以維護和除錯。 儘量避免使用!important，只有在其他方法都無效時才考慮使用。
3. CSS 前處理器:
- Sass, Less, Stylus: 這些前處理器提供了變數、巢狀、mixin 等功能，可以幫助你更好地組織和管理 CSS 程式碼，從而減少樣式衝突的可能性。它們還可以幫助你生成更具特異性的選擇器。
4. CSS-in-JS:
- Styled Components, Emotion, JSS: 這些庫允許你在 JavaScript 中編寫 CSS。它們通常會自動處理樣式的隔離，從而避免樣式衝突。
5. Shadow DOM:
- Web Components: Shadow DOM 可以將元件的樣式封裝在元件內部，從而防止元件的樣式影響頁面上的其他元素，也防止頁面上的其他樣式影響元件。
最佳實踐:
-
規劃好 CSS 架構: 在開始編寫 CSS 之前，先規劃好你的 CSS 架構，並選擇一種合適的命名約定或 CSS 前處理器。
-
保持 CSS 檔案的簡潔: 將 CSS 程式碼拆分成更小的、更易於管理的檔案。
-
使用 Lint 工具: 使用 CSS Lint 工具可以幫助你識別潛在的樣式衝突和程式碼風格問題。
選擇哪種方法取決於專案的規模和複雜性。對於小型專案，簡單的命名約定可能就足夠了。對於大型專案，你可能需要使用 CSS 前處理器或 CSS Modules。 最重要的是保持程式碼的組織性和一致性，這將有助於避免樣式衝突，並使程式碼更易於維護。