别再用 !important：一招解决 CSS 优先级问题！

前端开发项目时，经常会遇到 CSS 样式冲突问题，想想当时的你是不是很抓狂？

聪明的你很快就想到了解决办法，然后直接甩个 !important 上去，没别的，就图个省事。

这么干虽然当下问题解决了，但后患无穷，越往后你会发现代码不仅乱得像一锅粥，调试起来更是能把人逼疯。

所以想到这儿，是时候跟 !important 说拜拜了，我们可以用更靠谱的方法解决样式冲突。

搞懂 CSS 优先级

要想摆脱 !important，先得把 CSS 优先级整明白。其实 CSS 优先级不神秘，就像算分一样，用四个数字 (a, b, c, d) 表示就行：

• a：内联样式，厉害得很，能直接拿 1000 分。
• b：一个 ID 选择器能顶 100 分。
• c：类选择器、属性选择器、伪类，一个能拿 10 分。
• d：元素选择器、伪元素，一个才 1 分。

比较优先级也简单：

1. 从左往右对比，看谁的分高。
2. 分高的肯定优先。
3. 分数一样，那就谁在后面谁厉害。

举个例子：

#header .nav-item:hover span {
  color: red; /* 分数：(0, 1, 2, 1) = 121 */
}
.nav .nav-item a {
  color: blue; /* 分数：(0, 0, 2, 2) = 22 */
}

这里 #header .nav-item:hover span 的分数比 .nav .nav-item a 高多了，所以红色会赢。

提升 CSS 优先级

ID 选择器

ID 选择器那可是优先级里的扛把子，用好了能省不少事儿。比如说：

#header .nav-item {
  color: red;
}

组合选择器

把多个选择器组合起来，特异性立马就上去了。比如说：

body .container .nav-item {
  color: blue;
}

属性选择器

属性选择器和类选择器一个档次，也能给特异性加分。比如说：

.nav-item[data-type="main"] {
  color: green;
}

重复选择器

重复用同一个选择器，优先级也会跟着涨。比如说：

.nav-item.nav-item.nav-item {
  color: purple;
}

伪类选择器

伪类选择器用好了，优先级也能轻松提上去。比如说：

.nav-item:hover {
  color: orange;
}

借助现代 CSS 架构

BEM 命名法，简单又实用

BEM 就是用来避免优先级冲突的一个好法子。比如说：

/* 组件本体 */
.card {
background: white;
border: 1px solid #ddd;
}

/* 组件里的小部件 */
.card__title {
font-size: 18px;
font-weight: bold;
}

/* 组件的变体 */
.card--featured {
border-color: gold;
box-shadow: 04px8pxrgba(0,0,0,0.1);
}

.card--featured.card__title {
color: gold;
}

这种命名方式一目了然，能帮咱少碰不少优先级冲突的麻烦事儿。

特殊情况 !important 还是能用，但得悠着点

虽说咱提倡少用甚至不用 !important，可有些时候它还真是能救命：

• 覆盖第三方库样式的时候：要是第三方库的样式太霸道，咱们又没办法从根儿上改它，那 !important 就得上场了。
• 遇到紧要关头得临时救火的时候：项目都快上线了，突然发现这儿那儿的样式不对劲，这时候用 !important 快速修复一下，然后再找时间把代码好好重构一遍，也算是一种折中的办法。

!important 就像个麻烦制造机，虽然能图一时之快，但后患无穷。

搞清楚 CSS 优先级的道道，用好那些提升优先级的小技巧，再把现代 CSS 架构的一些好方法用起来，咱们完全能写出又清晰又容易维护的样式代码，彻底摆脱 !important 的纠缠。

以上关于别再用 !important：一招解决 CSS 优先级问题！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。