CSS——CSS 拓展：② CSS 编码规范

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！
复制代码

css_17
复制代码

1. 列举 CSS 编码规范？
2. 编码规范的作用是什么？列举 5 条以上编码规范。
复制代码

前言：编码是否规范，直接影响代码的可读性、可维护性、可交接性等。一份好的代码，可以做到：不管有多少人共同参与同一项目，都可以确保每一行代码都像是同一个人编写的。

1 CSS命名技巧

• 语义化标签优先
• 基于功能命名、基于内容命名、基于表现命名
• 简略、明了、无后患

（:bulb: 看这个东西中文名字是什么，然后试着翻译成英文。）

1.1 常见命名 1

1.2 常见命名 2

1.3 常见命名 3

1.4 常见命名 4

2 CSS 书写规范

• tab 用两个空格表示；
• css 的 : 后加个空格， { 前加个空格；
• 每条声明后都加上分号；
• 换行，而不是放到一行；
• 颜色用小写，用缩写，如： #fff；
• 小数不用写前缀，  0.5s → .5s ；0 不用加单位；
• 尽量缩写， margin: 5px 10px 5px 10px; → margin: 5px 10px; 。

3 CSS 声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

• Positioning
• Box model
• Typography（印刷）
• Visual （视觉）

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

:bulb:例如：

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;


  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;


  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}
复制代码

后记：本篇文章常看常新，规范化的编码对自己、对他人都是百利而无一害的。

加油！