在编写CSS/SCSS时，选择器的书写格式对代码的可读性和可维护性有着重要影响。"每个选择器单独一行"是一项被广泛认可的编码规范，它能显著提高样式表的清晰度和团队协作效率。
为什么每个选择器应该单独一行
将每个选择器放在单独一行有以下优势：
- 提高可读性：一眼就能看清所有选择器
- 便于版本控制：Git等版本控制系统能更清晰地显示变更
- 减少合并冲突：团队成员修改不同选择器时不易产生冲突
- 方便注释：可以为每个选择器添加独立注释
正确示例
基本选择器
scss
/* 好的写法 */
.button,
.input,
.textarea {
margin: 0;
padding: 0.5rem;
}嵌套选择器（SCSS）
scss
/* 好的写法 */
.card {
padding: 1rem;
.header {
font-size: 1.2rem;
}
.body {
margin-top: 0.5rem;
}
}媒体查询
scss
/* 好的写法 */
.container {
width: 100%;
@media (min-width: 768px) {
width: 750px;
}
@media (min-width: 992px) {
width: 970px;
}
}错误示例
拥挤的选择器
scss
/* 不好的写法 - 所有选择器挤在一行 */
.button, .input, .textarea { margin: 0; padding: 0.5rem; }混乱的嵌套
scss
/* 不好的写法 - 嵌套结构不清晰 */
.card { padding: 1rem;
.header { font-size: 1.2rem; }
.body { margin-top: 0.5rem; } }媒体查询混乱
scss
/* 不好的写法 - 媒体查询难以辨认 */
.container { width: 100%; @media (min-width: 768px) { width: 750px; } @media (min-width: 992px) { width: 970px; } }特殊情况处理
相关选择器分组
对于逻辑上紧密相关的选择器，可以在同一规则块内保持接近，但仍应分行：
scss
/* 相关选择器适当接近 */
.button,
.button--primary {
border-radius: 4px;
}
.input,
.textarea {
background-color: #fff;
}长选择器链
对于特别长的选择器链，考虑重构或添加注释：
scss
/* 导航栏中的活动链接 */
.nav > .list > .item > .link--active,
.nav > .list > .item > .link:hover {
color: #3498db;
}工具支持
现代工具可以自动格式化CSS/SCSS以符合此规范：
- Prettier：自动将选择器分行
- Stylelint：通过规则
selector-list-comma-newline-after强制执行 - VS Code插件：如CSS Formatter等
结论
"每个选择器单独一行"是一项简单但强大的CSS/SCSS编写规范。通过遵循这一规则，可以创建出更清晰、更易维护的样式表，特别是在团队协作项目中。虽然初期可能需要适应，但长期来看，这种格式带来的可读性提升将大大超过微小的额外行数成本。
