17370845950

多个选择器共用样式时用逗号分隔，嵌套结构中用空格组合避免重复父类名，属性选择器可替代冗余class，BEM命名下组合选择器宜用于修饰符批量控制，需警惕过度嵌套。

多个选择器共用同一组样式时怎么写

直接用逗号分隔，而不是重复写规则块。这是最基础也最容易被忽略的减冗方式。

• 错误写法：

  .header { color: #333; }
  .nav { color: #333; }
  .footer { color: #333; }

• 正确写法：

  .header, .nav, .footer {
    color: #333;
  }

• 逗号是「或」关系，不是「和」；.a, .b 匹配所有 .a 元素 或 所有 .b 元素
• 注意空格：逗号前后可加空格提升可读性，但不能写成 .a ,.b（IE8 及更早版本在某些场景下会解析失败）

嵌套结构中避免重复写父级类名

当多个子元素都属于同一个容器，且样式只在该容器内生效时，用空格组合比重复写父类更安全、更易维护。

• 不推荐：

  .article-title { font-size: 24px; }
  .article-content { font-size: 16px; }
  .article-footer { margin-top: 20px; }

• 推荐：

  .article .title { font-size: 24px; }
  .article .content { font-size: 16px; }
  .article .footer { margin-top: 20px; }

• 这样改后，.title 类即使在其他地方出现也不会被误匹配，语义和作用域更清晰
• 如果后续要整体移动到 .post 容器下，只需改一处 .article → .post

用属性选择器代替一堆 class 名

当一组元素靠相似属性（比如 data-type、type、role）区分，而样式逻辑高度一致时，属性选择器能大幅压缩代码量。

• 例如统一处理所有带 data-status="error" 的表单控件：

  [data-status="error"] {
    border-color: #e74c3c;
    background-color: #fdf2f2;
  }

• 也可配合伪类：

  [type="text"]:invalid, [type="email"]:invalid {
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.5);
  }

• 注意：属性值匹配默认区分大小写，[lang="en"] 不匹配 lang="EN"；如需不敏感，用 [lang="en" i]

BEM 命名 + 组合选择器的实用边界

BEM（block__element--modifier）本身已减少嵌套依赖，但组合选择器仍可用于修饰符批量控制或状态归并。

• 比如统一禁用所有带 --disabled 修饰符的组件：

  .btn--disabled,
  .input--disabled,
  .select--disabled {
    opacity: 0.5;
    pointer-events: none;
  }

• 不要写成 .btn--disabled, .btn__icon--disabled —— 后者属于元素层级，语义不同，应单独处理
• 真正要警惕的是过度组合：.page-home .section-featured .card .title 这类 4 层深度选择器，既难维护又影响性能，应优先用 BEM 单一类名替代

实际项目里，组合选择器的“省代码”效果，往往取决于你是否提前想清楚样式的作用域和复用边界。写得越细，后期改得越痛；写得太泛，又容易污染全局。关键不是少写几行，而是让每一行都明确回答：这个样式，到底该在哪生效、不该在哪生效。