避免过度使用通用选择器

在CSS/SCSS开发中，选择器的使用方式直接影响着网页性能、样式可维护性和渲染效率。其中，通用选择器(*)是一个强大但容易被滥用的工具。本文将探讨如何合理使用通用选择器，避免其过度使用带来的负面影响。

什么是通用选择器

通用选择器(*)匹配文档中的所有元素，是最广泛的选择器类型。例如：

css 复制代码

* {
  margin: 0;
  padding: 0;
}

scss 复制代码

// 合理的重置示例
*,
*::before,
*::after {
  box-sizing: border-box;
}

scss 复制代码

// 在特定容器内重置所有链接样式
.theme-dark * {
  color: #fff;
}

反面例子：

css 复制代码

/* 糟糕的性能 - 匹配页面所有元素 */
* {
  transition: all 0.3s ease;
}

改进方案：

scss 复制代码

// 只对需要过渡的元素应用
.button, 
.card, 
.menu-item {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

反面例子：

css 复制代码

/* 特异性太低，容易被覆盖 */
* {
  color: #333;
}

/* 后面定义的更具体选择器会覆盖 */
.header {
  color: #fff;
}

改进方案：

scss 复制代码

// 使用更具体的选择器
body {
  color: #333;
}

.header {
  color: #fff;
}

反面例子：

scss 复制代码

/* 难以追踪哪些元素会被影响 */
* {
  font-size: 16px;
}

/* 后面需要覆盖时不得不提高特异性 */
.sidebar * {
  font-size: 14px;
}

改进方案：

scss 复制代码

// 明确设置基础字体
body {
  font-size: 16px;
}

// 明确覆盖
.sidebar {
  font-size: 14px;
}

反面例子：

scss 复制代码

.nav {
  * {
    display: inline-block;
    padding: 5px;
  }
}

改进方案：

scss 复制代码

.nav {
  & > li,
  & > a {
    display: inline-block;
    padding: 5px;
  }
}

scss 复制代码

// 优于通用选择器的精确选择
[class^="btn-"] {
  border-radius: 4px;
  padding: 8px 16px;
}

考虑一个包含1000个DOM元素的页面：

css 复制代码

/* 低效 - 浏览器需要检查每个元素 */
* > div {
  background: #f5f5f5;
}

/* 高效 - 浏览器可以直接定位div元素 */
div {
  background: #f5f5f5;
}

通过合理使用选择器，我们可以构建出既高效又易于维护的CSS架构，避免通用选择器带来的潜在问题。