【前端】3.总结一下前端css样式规范

CSS样式规范可以帮助保持代码的一致性和可维护性。以下是一些关键的规范点：

1. 命名规范：类名和ID应该具有描述性，使用驼峰命名法（camelCase）或短横线命名（kebab-case）。

/* 正确的命名 */
.headerNavigation { /* ... */ }
.site-logo { /* ... */ }
 
/* 不推荐的命名 */
.hd-nav { /* ... */ }
.site_logo { /* ... */ }

2. 缩进和换行：使用2个空格进行缩进，在选择器和花括号之间保留空格。

.selector {
  property: value;
}

3. 空格：在属性值前后保留空格。

.selector {
  property: value; /* 在冒号前后保留空格 */
}

4. 选择器组：相关的选择器可以并排书写，每个选择器独占一行。

/* 并排书写选择器 */
h1, h2, h3 {
  font-weight: bold;
}
 
/* 不推荐将所有选择器放在同一行 */
h1, h2, h3 { font-weight: bold; }

5. 属性顺序：将相关的属性按照特定的顺序组织，如布局定位属性（display, position, top, right, bottom, left, float, clear, visibility, overflow）、盒模型属性（width, height, margin, padding, border）、文本属性（font, line-height, text-align, color, text-transform）、背景属性（background, background-image, background-position）、动画属性等。

.selector {
  display: block;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 20px;
  font-size: 16px;
  background-color: #f0f0f0;
}

6. 注释：使用注释描述样式的目的和用途。

/* 头部导航区域 */
.header-navigation {
  /* 样式规则 */
}

7. 避免过度嵌套：避免不必要的嵌套，以保持规则简洁明了。

/* 避免过度嵌套 */
.parent {
  color: red;
 
  .child {
    color: green; /* 不推荐在子选择器中重复父选择器的样式 */
  }
}

8. 使用SCSS、LESS等预处理器：预处理器提供了变量、混合（mixins）、函数等高级功能，可以提高CSS开发效率。

// 使用SCSS变量
$font-stack: Helvetica, sans-serif;
 
body {
  font-family: $font-stack;
  color: #333;
}

9. 性能优化：避免不必要的复杂选择器和过度使用伪类。

/* 避免不必要的选择器嵌套 */
a:hover {
  color: blue; /* 直接使用伪类，不要通过父元素进行引导 */
}

10. 移动优先或响应式样式：根据设计稿设置合适的断点，适配不同屏幕尺寸。

/* 响应式布局 */
.container {
  width: 100%;
}
 
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
 
@media (min-width: 992px