css 代码规范整理

命名‌

  • 类名使用小写字母,以中划线分隔
  • id 采用驼峰式命名
  • scss 中的变量、函数、混合、placeholder 采用驼峰式命名

ID 和 class 的名称总是使用可以反应元素目的和用途的名称,或其他通用的名称,代替表象和晦涩难懂的名称

/* 正例 */
.heavy {
  font-weight: 800;
}


.important {
  color: red;
}


/* 反例 */
.fw-800 {
  font-weight: 800;
}
.red {
  color: red;
}

选择器

  1. css 选择器中避免使用标签名 从结构、表现、行为分离的原则来看,应该尽量避免 css 中出现 HTML 标签,并且在 css 选择器中出现标签名会存在潜在的问题。
  2. 很多前端开发人员写选择器链的时候不使用 直接子选择器(注:直接子选择器和后代选择器的区别)。有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而,在任何情况下,这是一个非常不好的做法。如果你不写很通用的,需要匹配到 DOM 末端的选择器, 你应该总是考虑直接子选择器。
/* 正例 */
.content > .title {
  font-size: 2rem;
}


/* 反例 */
.content .title {
  font-size: 2rem;
}

尽量使用缩写属性

/* 正例 */
.demo {
  border-top: 0;
  font: 100%/1.6 palatino, georgia, serif;
  padding: 0 1em 2em;
}


/* 反例 */
.demo {
  border-top-style: none;
  font-family: palatino, georgia, serif;
  font-size: 100%;
  line-height: 1.6;
  padding-bottom: 2em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0;
}

每个选择器及属性独占一行

/* 正例 */
button {
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}
/* 反例  */
button {
  width:100px;height:50px;color:#fff;background:#00a0e9;
}

略0后面的单位

/* 正例 */
div {
  padding-bottom: 0;
  margin: 0;
}
/* 反例 */
div {
  padding-bottom: 0px;
  margin: 0em;
}

避免使用ID选择器及全局标签选择器防止污染全局样式

/* 正例 */
.header {
  padding-bottom: 0px;
  margin: 0em;
}
/* 反例 */
#header {
  padding-bottom: 0px;
  margin: 0em;
}