CSS编码规范

1. 缩进与换行

Bad

body{background-color:#fff;font-family:Arial,sans-serif;}

Good

body {
  background-color: #fff;
  font-family: Arial, sans-serif;
}

保持良好的缩进和换行，以提高代码的可读性。

2. 使用SCSS/SASS预处理器

Bad

/* No preprocessor usage */

Good

$primary-color: #007BFF;

body {
  color: $primary-color;
}

预处理器可以简化变量、混合、嵌套等，使CSS更强大。

3. 选择器优先级

Bad

body .container #main .title {
  color: #333;
}

Good

.title {
  color: #333;
}

尽量减少选择器的复杂度，避免不必要的高特异性。

4. 使用类而不是ID进行样式

Bad

#uniqueElement {
  color: red;
}

Good

.unique-element {
  color: red;
}

ID应该是唯一的，使用类更灵活且易于重用。

5. BEM命名约定

Bad

.container {
  /* ... */
}
.container-header {
  /* ... */
}

Good

.container__header {
  /* ... */
}

BEM（Block Element Modifier）命名模式可以清晰地表示元素关系。

6. 属性顺序

Bad

.button {
  padding: 10px;
  border-radius: 5px;
  color: white;
  background-color: blue;
}

Good

.button {
  color: white;
  background-color: blue;
  padding: 10px;
  border-radius: 5px;
}

保持属性的逻辑顺序，如颜色、背景、边框、内边距、外边距等。

7. 缩写单位

Bad

.margin {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

Good

.margin {
  margin: 10px;
}

使用简写的属性值，当所有方向相同或对称时。

8. 使用rem或em单位

Bad

body {
  font-size: 16px;
}
.header {
  font-size: 18px;
}

Good

body {
  font-size: 16px;
}
.header {
  font-size: 1.125rem;
}

使用相对单位（rem或em）以保持响应式设计。

9. 避免使用!important

Bad

.title {
  color: red !important;
}

Good

.title {
  color: red;
}

尽量避免使用!important，它破坏了层叠机制。

10. 分组相似选择器

Bad

.header {
  color: #333;
}
.footer {
  color: #333;
}

Good

.header,
.footer {
  color: #333;
}

将具有相同属性的选择器分组，减少重复。

11. 遵循盒模型

Bad

.box {
  width: 100px;
  padding: 10px;
  border: 1px solid black;
}

Good

.box {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 1px solid black;
}

使用box-sizing: border-box;使宽度计算更直观。

12. 清除浮动

Bad

.clearfix::after {
  clear: both;
}

Good

.clearfix::after {
  display: table;
  clear: both;
  content: "";
}

使用伪元素清除浮动，保持容器的高度。

13. 响应式设计

Bad

.image {
  width: 300px;
}

Good

.image {
  max-width: 100%;
  height: auto;
}

使用百分比或max-width来适应不同的屏幕尺寸。

14. 使用CSS Grid和Flexbox

Bad

.container {
  float: left;
  width: 50%;
}

Good

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

或

.container {
  display: flex;
  justify-content: space-between;
}

使用现代布局方法，如Grid和Flexbox，替代传统的float和position。

15. 避免过度使用!important

Bad

#element {
  color: red !important;
}

Good

#element {
  color: red;
}

尽量避免使用!important，以维护层叠的自然顺序。

这些规范仅覆盖了一小部分CSS编码的最佳实践，但在实际项目中遵循这些原则将有助于创建更高效、可维护和一致的代码。在编写CSS时，应持续关注行业标准和最佳实践的更新，以保持代码的现代性和有效性。