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 检查代码。多设备真机测试显示效果，确保响应式布局正常。