css制作规范
CSS 制作规范
命名规范
选择器命名需语义化，避免使用无意义的缩写或数字。推荐使用 BEM（Block Element Modifier）命名法，例如 .block__element--modifier。
类名使用小写字母和连字符，如 .main-content。ID 选择器应谨慎使用，确保唯一性。
代码格式
每行声明以分号结尾，属性与值之间保留一个空格。声明块内缩进使用 2 个空格或 1 个 tab。
.selector {
color: #333;
font-size: 16px;
}属性顺序
按照布局、盒模型、文本、视觉、动画等逻辑分组排列属性。示例顺序：
.selector {
/* 布局 */
display: flex;
position: absolute;
/* 盒模型 */
width: 100px;
padding: 10px;
/* 文本 */
font-family: Arial;
color: #333;
/* 视觉 */
background: #fff;
border-radius: 4px;
/* 动画 */
transition: all 0.3s;
}选择器使用
避免使用通配符选择器 *。后代选择器不超过 3 层，减少嵌套深度。优先使用类选择器而非标签选择器。
响应式设计
使用媒体查询时，断点设置需统一。推荐移动优先（Mobile First）原则：
/* 默认移动端样式 */
.container {
width: 100%;
}
/* 平板及以上 */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* 桌面端 */
@media (min-width: 1024px) {
container {
width: 980px;
}
}性能优化
避免使用 @import 引入 CSS，推荐使用 <link> 标签。合并重复样式，减少冗余代码。关键路径 CSS 内联处理。
预处理器规范
若使用 Sass/Less，嵌套不超过 3 层。变量命名使用 $prefix-description 格式：
$color-primary: #1890ff;
$spacing-small: 8px;注释规范
文件头部注明作者和用途，关键模块添加注释：
/
* 主导航样式
* @author Name
*/
.nav {
/* 主菜单项 */
&__item {
color: #333;
}
}浏览器兼容
明确支持的浏览器版本范围。使用 Autoprefixer 自动添加厂商前缀。针对老旧浏览器提供降级方案。
代码复用
提取公共样式为工具类（Utility Classes），如 .text-center。组件样式独立封装，避免全局污染。
验证与测试
发布前使用 CSS Lint 或 Stylelint 检查代码。多设备真机测试显示效果，确保响应式布局正常。
