应优先使用逗号分组合并共用样式的选择器，如h1, h2, .section-title；其次可用:is()简化多容器下同类元素选择；SCSS嵌套中逗号需顶格书写；属性选择器可替代冗长类链；但语义差异大的元素（如button与a）不应强行分组。
逗号分组直接合并多个选择器
当你发现 h1、h2、.section-title 都要设相同的 line-height 和 font-weight，别写三遍规则。用逗号把它们并列写在同一个声明块前就行：
h1, h2, .section-title {
line-height: 1.5;
font-weight: 600;
}
这样既避免重复声明，又让修改集中——改一处，全生效。注意：逗号必须是英文半角，且前后不加空格（某些旧版构建工具对空格敏感）；如果其中某个选择器拼错，整条规则会被浏览器忽略，但不会报错，容易漏检。
:is() 替代长串后代选择器
遇到 header p、main p、footer p 这类“同一元素在多个容器下”的模式，传统写法冗余且难维护。改用 :is()：
:is(header, main, footer) p {
margin-bottom: 1rem;
}
它比手写逗号分组更紧凑，也比嵌套预处理器生成的选择器更可控。但要注意：:is() 不提升特异性，里面最弱的选择器决定整条规则的权重；IE 完全不支持，如需兼容就得回退到传统写法或用 PostCSS 插件补丁。
立即学习“前端免费学习笔记（深入）”；
SCSS 嵌套内分组要顶格写逗号
在 SCSS 中想给 .card 下的 h2、h3、.title 统一设置 margin-top，嵌套写法更易读：
.card {
h2, h3, .title {
margin-top: 0.5em;
}
}
关键细节：逗号必须顶格写在大括号内第一列，不能缩进。否则老版本 Sass（如 3.5 之前）会解析失败，编译出空 CSS 或报错；新版本虽容忍缩进，但团队协作时风格不一致容易引发误判。另外，这种写法编译后仍是普通逗号分组，不产生额外特异性，和手写等价。
属性选择器替代深嵌套类链
像 .container .wrapper .content .text--lead 这种四层类名链，本质只是想选“语义为导语的文本”，完全可以用 [data-role="lead-text"] 替代：
[data-role="lead-text"] {
font-size: 1.25rem;
color: #444;
}
好处有三：长度缩短约 20 字符；不依赖 DOM 结构，挪动 HTML 位置也不失效；避免因父级类名变更导致样式丢失。但得同步改 HTML：<p data-role="lead-text">，不能只改 CSS。如果项目已大量使用类名链，建议先加 data- 属性做双写过渡，等灰度完成再删旧类。
button 和 a 虽然都可点击，但语义、默认样式、可访问性要求完全不同，硬塞进同一组容易埋坑。 
