css制作规范

CSS 制作规范

文件组织与命名

CSS文件应按照功能或模块划分，避免将所有样式集中在一个文件中。常见的文件组织方式包括：

• reset.css 或 normalize.css：用于重置浏览器默认样式。
• base.css：包含全局基础样式，如字体、颜色、间距等。
• layout.css：布局相关样式，如网格系统、页面结构。
• components.css：组件级样式，如按钮、卡片、导航栏。
• utilities.css：工具类样式，如边距、浮动、隐藏等。

命名应使用小写字母和连字符（-），例如 main-header.css。

选择器规范

避免使用过于具体的选择器，以减少样式冲突和提高可维护性。推荐使用类选择器而非ID选择器。

/* 不推荐 */
#header .nav li a { color: red; }

/* 推荐 */
.nav-link { color: red; }

避免使用通配符选择器（*），因其会降低性能。

/* 不推荐 */
* { margin: 0; padding: 0; }

/* 推荐 */
body, h1, p { margin: 0; padding: 0; }

属性书写顺序

按照属性类型分组书写，提高可读性。推荐顺序：

1. 布局属性：display, position, float, clear 等。
2. 盒模型属性：width, height, margin, padding, border 等。
3. 文本属性：font, color, text-align, line-height 等。
4. 视觉属性：background, box-shadow, opacity 等。
5. 其他属性：cursor, z-index, transition 等。

.card {
  display: block;
  position: relative;
  width: 100%;
  margin: 10px;
  padding: 20px;
  font-size: 16px;
  color: #333;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

响应式设计

使用媒体查询（@media）实现响应式布局，并遵循移动优先原则。

/* 移动端样式 */
.container { padding: 10px; }

/* 平板及以上 */
@media (min-width: 768px) {
  .container { padding: 20px; }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .container { padding: 30px; }
}

变量与预处理

使用CSS变量（--var）或预处理器（如Sass/Less）管理颜色、字体等重复值。

:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
}

性能优化

避免使用高开销属性（如box-shadow、filter）频繁动画。 减少重绘和回流，例如使用transform替代top/left动画。

/* 不推荐 */
.element { top: 10px; transition: top 0.3s; }

/* 推荐 */
.element { transform: translateY(10px); transition: transform 0.3s; }

注释与文档

为复杂模块或特殊样式添加注释，说明用途和依赖关系。

/* 主导航栏样式
   依赖：.container 的宽度限制 */
.main-nav {
  display: flex;
  justify-content: space-between;
}

浏览器兼容性

针对需要兼容的浏览器版本添加前缀或备用方案。

.box {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

代码格式化

使用一致的缩进（通常为2或4空格），每行一个属性，右括号单独成行。

.selector {
  property: value;
  another-property: value;
}