在開發前端頁面的過程中，CSS樣式污染（CSS style pollution）是一個常見的問題。它指的是在使用CSS樣式表時，樣式屬性的值被奇怪地修改或者被子樣式覆蓋的現象。

這里介紹一些CSS避免樣式污染的方法。

命名空間

.namespace1 button {
background-color: blue;
color: white;
}
.namespace2 button {
background-color: red;
color: white;
}

通過給選擇器加上命名空間，可以使其只在特定的作用范圍內生效，避免選擇器與其他模塊中的選擇器產生沖突。

使用更具體的選擇器

ul#nav li.active {
color: blue;
}
ul#nav li:hover {
color: red;
}

使用更具體的選擇器，可以增加樣式的優先級，避免被其他樣式所覆蓋。

避免使用全局選擇器

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

全局選擇器如上所示，會影響整個頁面，容易與其他樣式產生沖突?？梢允褂妙愡x擇器來代替全局選擇器，例如：

.clearfix {
margin: 0;
padding: 0;
box-sizing: border-box;
}

避免嵌套過深

a {
color: blue;
&:hover {
color: red;
&:before {
content: ">";
}
}
}

嵌套過深不僅難以維護，也容易產生樣式污染?？梢允褂妙愡x擇器來避免過深嵌套，例如：

a {
color: blue;
}
a:hover {
color: red;
}
a:hover:before {
content: ">";
}

以上是避免CSS樣式污染的幾個方法，希望能對前端開發者有所幫助。