css优化之匹配优化

css优化系列文章

打算更新个css优化系列的文章，这里是其中之一：匹配上的优化，即提高匹配效率。

什么是css匹配

css匹配是指浏览器将css的规则应用到DOM元素的过程。在匹配时遵循一定的规则。我们优化css匹配时，可以从这些匹配规则着手，使得css可以更加高效地匹配到对应的DOM元素。

css匹配优化场景（附原理）

1. 避免选择器深层嵌套。
   优化原理：浏览器从右向左匹配选择器，深层嵌套则会增加匹配次数。
   如：

<style>
/* 低效：嵌套选中目标元素 */
body div ul li span { /* 避免超过3级的嵌套 */
  color: blue;
}
/* 高效：设置class 通过class选中目前元素 */
.list-item{
	color: blue;
}
</style>

2.减少选择器的复杂度
优化原理：简单的选择器（如类/id选择器）的匹配速度远快于组合选择器（如:> 、+）。

<style>
 /*低效： 复杂的组合选择器 */
.wrap nav ul > li.active + li a {
  font-weight: bold;
}
/*高效： 用类替代复杂选择器 */
.next-to-active { 
  font-weight: bold;
}
</style>

3.避免标签名与类 / ID 组合
优化原理：标签名匹配需要遍历所有该类型的元素。

<style>
/* 低效： 标签+类的组合 */
button.primary { 
  background-color: blue;
}
/* 高效： 选择器 */
.primary-button { 
  background-color: blue;
}
</style>

4.避免属性选择器过度使用
优化原理：属性匹配需要检查每个元素的属性。

<style>
	/* 低效：属性选择器 */
	input[type="text"] { 
	  border: 1px solid gray;
	}
	/* 高效：用类替代属性选择器 */
	.text-input { 
	  border: 1px solid gray;
	}
</style>

当然一些特殊情况，使用属性选择器还是有必要的，比如只对某类标签的active状态添加背景色，而且这类标签同时会存在多个active情况。使用时属性选择器时，虽然css匹配的效率降低，但整体上看可以在标签上去掉根据状态判断的逻辑，代码变得简洁。【当然仅根据个人习惯，也可以通过判断的形式即 判断标签的状态，根据状态值在class里添加或者移除对应的active选择器来实现。】
5. ID 选择器优于类选择器
优化原理：ID 应仅用于唯一元素，匹配更加高效。

<style>
	/* 低效：类选择器 */
	.container {
	  width: 100%;
	}
	/*高效： ID选择器性能最优 */
	#main-container { 
	  width: 100%;
	}
</style>

6.避免通配符选择器
优化原理：通配符会匹配所有元素，增加不必要的计算。

<style>
/* 低效：通配符选择器 */
* {
  box-sizing: border-box;
}
/* 高效：继承比通配符更高效 */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
</style>

关于这里多解释一些(已经了解的或者单纯关注优化的可以跳过不看）：

继承

是指子元素会自动获取父元素的可以被继承的css属性值的机制。这个机制可以减少css代码的重复定义，提高代码可维护性。

上面这段优化后的选择器，实现了：

（1）将整个页面的盒模型都设置为border-box。
（2）让所有元素继承这个设置：*, *::before, ::after { box-sizing: inherit; } 强制所有元素（包括伪元素）继承根元素的 box-sizing 属性。
而对比直接使用通配符选择器设置盒模型 ：

优化后的浏览器只需要：

(1) 为根元素 设置一次 border-box；
(2) 让所有子元素继承这个值。

而通配符选择器：

会对每一个元素单独应用 box-sizing: border-box，而不管它们的父元素是否已经有相同的设置。

另：

并非所有 CSS 属性都可以被继承。例如：
width, height, margin, padding, border, position 等是不可以被继承的。

7.使用 CSS Modules
优化原理：自动生成唯一类名，避免选择器冲突和复杂匹配

如文件： styles/module.css

.container {
  padding: 12px;
}

组件里

import styles from './styles.module.css';
<div className={styles.container} />

总结

css总结起来的优化原则为：

• 保持选择器简短（理想情况不超过 3 个部分）
• 优先使用 ID 和类
• 减少嵌套层级
• 避免复杂选择器（如:nth-child、属性选择器）
• 利用继承减少重复规则