避免使用通配选择器

通配选择器（*）是CSS中匹配任何元素的选择器。它的语法简单，看起来似乎很方便：

css 复制代码

* {
  margin: 0;
  padding: 0;
}

为什么应该避免使用通配选择器

性能问题

通配选择器会匹配页面上的每一个元素，这会导致浏览器需要做大量的计算工作。对于大型网站或复杂页面，这会显著影响页面渲染性能。

反面例子：

css 复制代码

* {
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  color: #333;
}

这段代码会强制浏览器检查每个元素并应用这些样式，即使许多元素可能已经继承了这些属性。

特异性问题

通配选择器具有最低的特异性（0,0,0,0），这意味着它很容易被其他规则覆盖，导致样式表难以维护。

意外的样式重置

通配选择器常用于"重置"样式，但这可能导致需要额外的工作来恢复某些元素的默认样式。

反面例子：

css 复制代码

* {
  margin: 0;
  padding: 0;
}

这会移除所有元素的边距和内边距，包括表单元素、列表等，可能需要为这些元素重新添加样式。

更好的替代方案

1. 针对特定元素重置

正面例子：

css 复制代码

body, h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;
  padding: 0;
}

这样更有针对性，只重置你真正需要重置的元素。

2. 使用继承属性

正面例子：

css 复制代码

body {
  font-family: 'Arial', sans-serif;
  color: #333;
  line-height: 1.5;
}

大多数文本相关属性会继承自body元素，无需使用通配选择器。

3. 使用CSS变量进行全局控制

正面例子：

scss 复制代码

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --base-font-size: 16px;
}

body {
  font-size: var(--base-font-size);
  color: var(--primary-color);
}

4. 使用SCSS的@extend功能

正面例子(SCSS)：

scss 复制代码

%reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list {
  @extend %reset-list;
  display: flex;
}

例外情况

在某些非常特定的情况下，通配选择器可能是合理的：

打印样式表中重置边距：

css 复制代码

@media print {
  * {
    margin: 0 !important;
    padding: 0 !important;
  }
}

高度隔离的环境如iframe或web组件，需要完全控制样式时。

结论

虽然通配选择器看起来方便，但在大多数情况下应该避免使用。通过更有针对性的选择器、继承属性和现代CSS技术，我们可以创建更高效、更易维护的样式表。记住，CSS的性能和可维护性往往比简洁的代码更重要。