多个选择器共用样式时用逗号分隔，嵌套结构中用空格组合避免重复父类名，属性选择器可替代冗余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 单一类名替代
实际项目里，组合选择器的“省代码”效果，往往取决于你是否提前想清楚样式的作用域和复用边界。写得越细，后期改得越痛；写得太泛，又容易污染全局。关键不是少写几行，而是让每一行都明确回答：这个样式，到底该在哪生效、不该在哪生效。