css如何避免样式污染 |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;
}

全局选择器如上所示，会影响整个页面，容易与其他样式产生冲突。可以使用类选择器来代替全局选择器，例如：

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

避免嵌套过深

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

嵌套过深不仅难以维护，也容易产生样式污染。可以使用类选择器来避免过深嵌套，例如：

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

以上是避免CSS样式污染的几个方法，希望能对前端开发者有所帮助。