写CSS的时候，很多人一开始都不太在意格式和写法，觉得只要页面能跑起来就行。可项目一变大，团队一多人，问题就来了——没人看得懂你写的样式，改个颜色都得花十分钟找代码。
统一缩进和空格，别让混乱蔓延
有人喜欢用两个空格缩进，有人偏爱四个，还有人直接用Tab。其实选哪种不重要，关键是整个项目要一致。比如大家都用两个空格：
.header {
margin: 10px;
padding: 20px;
overflow: hidden;
}这样看起来整齐，嵌套结构也清楚。千万别混着来，不然代码就像毛线团，越理越乱。
选择器命名要有意义
别图省事写 .a、.box1 这种名字。时间一长，你自己都不知道它对应哪个模块。推荐用语义化命名，比如 .user-card、.nav-menu，一看就知道是干啥的。
如果项目大，可以考虑用BEM（Block Element Modifier）规范，像这样：
.btn { }
.btn__text { }
.btn--primary { }按钮主体、内部文字、主题变体，分得明明白白。
属性顺序保持一致
有些人先写color，有些人先写position。其实没必要争，定个顺序就行。常见的是把盒模型相关的放前面，视觉表现放后面：
.card {
position: relative;
display: block;
margin: 10px;
padding: 15px;
width: 300px;
border: 1px solid #ddd;
background-color: #fff;
color: #333;
font-size: 14px;
text-align: left;
}这样看样式时，脑子有预期，找起来快。
注释不是负担，而是便利
别觉得写注释浪费时间。一个简单的说明，可能帮同事少花半小时排查。尤其是复杂的布局或浏览器兼容处理，加一行注释很值：
/* 修复iOS Safari下按钮点击高亮 */
button {
-webkit-appearance: none;
outline: none;
}避免过度嵌套
Sass、Less这些预处理器支持嵌套，但嵌五层六层就离谱了。比如写成这样：
.header {
.nav {
.item {
a {
color: blue;
}
}
}
}生成的CSS可能是 .header .nav .item a，权重高，难覆盖。浅一点，平一点，反而更灵活。
用自动工具帮你守规矩
靠人自觉很难持久。不如上工具，比如 Stylelint，能自动检查语法错误、格式问题，甚至能强制你写注释。配合编辑器保存时自动格式化，团队风格自然就统一了。
再配上一份简单的文档，新成员三天就能跟上节奏，不用一个个问‘这地方为啥这么写’。”