前端命名规范_（17）CSS 拓展：② CSS 编码规范 | CSS

原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有，未经授权，请勿转载！

本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」

❗️❗️❗️以下链接为本文最新勘误篇章——《CSS 拓展：② CSS 编码规范》

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

上方面试题“参考答案详解”，请点击此处查看获取方式！

---

前言： 编码是否规范，直接影响代码的可读性、可维护性、可交接性等。

一份好的代码，可以做到：不管有多少人共同参与同一项目，都可以确保每一行代码都像是同一个人编写的。

1 CSS 命名技巧

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

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

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）或者是不影响前两组属性，因此排在后面。
例如：

.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;
}

---

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

祝好，qdywxs ♥ you！