css制作规范
CSS 制作规范
命名规范
使用小写字母和连字符（kebab-case）命名类名和ID，避免使用驼峰式或下划线。例如：
.main-header {}
.sidebar-nav {}选择器命名需语义化，避免使用无意义的缩写。例如：
.user-avatar {} /* 正确 */
.ua {} /* 避免 */代码格式
每行声明结束后添加分号，即使可选。规则块之间用空行分隔：
.selector {
margin: 0;
padding: 10px;
}
.another-selector {
color: #333;
}属性顺序建议按布局→盒模型→文本→视觉→其他分组排列：
.element {
/* 布局 */
position: absolute;
top: 0;
/* 盒模型 */
width: 100px;
padding: 10px;
/* 文本 */
font-family: sans-serif;
line-height: 1.5;
/* 视觉 */
background: #fff;
border-radius: 4px;
}选择器使用
避免使用通配选择器*，限制选择器嵌套深度（建议不超过3层）：
/* 避免 */
.container * {}
/* 推荐 */
.container > .child {}优先使用类选择器而非标签选择器，ID选择器仅用于唯一元素：
.btn {} /* 推荐 */
button {} /* 避免 */
#header {} /* 仅用于唯一元素 */单位与值
长度单位：
- 使用
px固定尺寸 - 使用
em或rem响应式尺寸 - 使用
%流体布局 - 无单位值用于
line-height和z-index
颜色值：
- 十六进制使用小写简写形式
#fff rgba()用于透明色- 避免颜色名称如
red
响应式设计
使用媒体查询标准断点（移动优先）：
/* 基础移动样式 */
.container { width: 100%; }
/* 平板 */
@media (min-width: 768px) {
.container { width: 750px; }
}
/* 桌面 */
@media (min-width: 992px) {
.container { width: 970px; }
}性能优化
避免使用@import，合并CSS文件，压缩生产环境代码。减少重绘属性使用：
/* 触发重绘的属性 */
.element {
opacity: 0.9; /* 优于visibility */
transform: scale(1.1); /* 硬件加速 */
}预处理器规范（如Sass）
嵌套不超过3层，变量命名用$kebab-case：
$primary-color: #3498db;
.component {
&__child {
color: $primary-color;
}
}注释规范
文件头部注释说明用途，模块用区块注释：
/* =================================
主导航样式
================================= */
.nav {
/* 二级菜单项 */
&-item { ... }
}
