CSS代码风格规则

从css代码有效性、命名风格、缩写等方便来阐述css的编程风格。

/* 有效性 */
p {
  color: #000; /* 使用十六进制颜色代码 */
  font-size: 16px; /* 使用像素单位 */
  height: 120px;
  weight: 120px;
}

/* 命名风格 */
.img-head-nev {
  color: #333;
  font-size: 24px;
}

/* 缩写 */
p {
  margin: 0;
  padding: 10px;
  background-color: #f0f0f0;
  font: 14px/1.5 'Open Sans', sans-serif;
}

1、CSS代码的有效性:确保CSS规则遵循最佳实践,避免过度或不必要的代码,使用合适的选择器和属性,width/height应尽量不要使用百分比以及像素单位统一,避免增加不必要设计复杂性。

2、命名风格:遵循一致的命名规范,如驼峰命名法或短横线分隔命名,避免使用ID选择器、优先使用类选择器、能够清晰的表达出元素的特点以及位置。

3、缩写:合并相同的CSS属性,如margin、padding、background、font等,使用缩写形式。