值格式规范

CSS中的值格式规范是确保代码一致性和可维护性的关键部分。合理的值格式能提升团队协作效率，减少样式冲突，同时增强代码的可读性。以下从多个维度展开具体说明。

颜色值格式

十六进制颜色推荐使用小写字母和简写形式。当颜色值为#aabbcc时，优先写成#abc的简写形式：

/* 推荐 */
.element {
  color: #f00;
  background-color: #0a8;
}

/* 不推荐 */
.element {
  color: #FF0000;
  background-color: #00AA88;
}

RGB/RGBA颜色值需保留空格分隔符，透明度值不带前导零：

/* 推荐 */
.element {
  background: rgba(255, 0, 128, .5);
}

/* 不推荐 */
.element {
  background: rgba(255,0,128,0.5);
}

数值与单位规范

长度为0时省略单位，非零值必须显式单位。百分比值不带小数：

/* 推荐 */
.box {
  margin: 0;
  padding: 12px;
  width: 100%;
}

/* 不推荐 */
.box {
  margin: 0px;
  padding: 12.0px;
  width: 100.00%;
}

视窗单位计算需用calc()函数时保持运算符两侧空格：

/* 推荐 */
.header {
  height: calc(100vh - 80px);
}

/* 不推荐 */
.header {
  height: calc(100vh-80px);
}

字体与文本值

字体栈必须包含通用族名称，字号使用rem单位基准：

/* 推荐 */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6rem;
}

/* 不推荐 */
body {
  font-family: "Microsoft YaHei";
  font-size: 16px;
}

行高值推荐使用无单位数字，避免继承问题：

/* 推荐 */
.text {
  line-height: 1.5;
}

/* 不推荐 */
.text {
  line-height: 24px;
}

动画属性值

关键帧百分比保持整数，时间单位统一用秒：

/* 推荐 */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.anim {
  animation-duration: 0.3s;
}

/* 不推荐 */
@keyframes slide {
  0.00% { transform: translateX(0); }
  100.00% { transform: translateX(100px); }
}
.anim {
  animation-duration: 300ms;
}

函数参数格式

多参数函数保持参数换行对齐，逗号后必须空格：

/* 推荐 */
.shadow {
  box-shadow: 
    1px 1px 5px rgba(0, 0, 0, .1),
    2px 2px 10px rgba(0, 0, 0, .2);
}

/* 不推荐 */
.shadow {
  box-shadow: 1px 1px 5px rgba(0,0,0,.1),2px 2px 10px rgba(0,0,0,.2);
}

媒体查询断点

断点值使用预定义变量，避免魔数：

/* 推荐 */
:root {
  --breakpoint-md: 768px;
}

@media (min-width: var(--breakpoint-md)) {
  .grid {
    display: flex;
  }
}

/* 不推荐 */
@media (min-width: 768px) {
  .grid {
    display: flex;
  }
}

自定义属性

变量命名采用小写短横线分隔，作用域需明确：

/* 推荐 */
:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

/* 不推荐 */
:root {
  --primaryColor: #3498db;
}
.button {
  background-color: var(--PRIMARY_COLOR);
}

浏览器前缀处理

使用PostCSS等工具自动添加前缀，避免手写：

/* 不推荐手动编写 */
.element {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

特殊值处理

initial/inherit/unset等全局关键字需注释说明用途：

.reset {
  all: unset; /* 需要显式重置继承样式时使用 */
}

响应式图片处理

srcset属性需明确宽度描述符和像素密度描述符：

<img src="small.jpg" 
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 50vw">

现代CSS特性检测

使用@supports规则时检测属性和值需完整：

/* 推荐 */
@supports (display: grid) {
  .container {
    display: grid;
  }
}

/* 不推荐 */
@supports (grid) {
  .container {
    display: grid;
  }
}