Basic

1. 缩进：2 个空格
2. 分组选择器（Grouping selectors），每行一个

/* // Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* // Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgb(0 0 0 / .5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. 左大括号前空一格
4. 右大括号放在新行
5. : 后加空格
6. 一行一个声明
7. 所有声明加;（包括最后一个）
8. , 后加空格（例如，box-shadow）
9. 颜色：（例如，background-color: rgb(0 0 0 / .5)）（这是 CSS4 的写法，我查了一下，怎么是 2022 年 7 月 5 号的东西，好新）
10. 不要在属性值或颜色参数前加上前导零（例如，用 .5 代替 0.5 和 -.5px 代替 -0.5px）
11. 小写所有十六进制值，例如 #fff（因为小写字母更醒目）
12. 多用速记十六进制值，能用 #fff 就不用 #ffffff。
13. 在选择器中给属性值加""，例如 input[type=“text”]
14. 不要给 0 单位，margin: 0px; margin: 0;

各个声明组合的顺序

1. Position 相关，因为 position 是决定文档流的东西
2. Box model 相关，文档流位置确定了再处理盒子
3. 排版，和文字效果打交道的
4. 视觉效果：背景、边框一类，border 属于 box model，为什么还要往后放呢？因为大多数系统是无视 box-sizing 是啥的，统一定为 border-box，所以 border-width 事实上不会影响整体尺寸
5. 杂项

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

  /* // Box model */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;

  /* // Typography */
  font: normal 14px 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  text-decoration: underline;

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

  /* // Misc */
  opacity: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

使用 Logical properties

不同国家的语言书写习惯是不同的，有的是横行有的是竖行

Logical properties 是基于块和内联等抽象术语的方向和维度属性的替代方案。默认情况下，block 是指垂直方向（上下），而 inline 是指水平方向（左右）。您可以开始在所有现代、常青浏览器的 CSS 中使用这些值。

为什么要使用逻辑属性？并非每种语言都像英语一样左右流动，因此写作模式需要灵活。借助逻辑属性，您可以轻松支持可以水平或垂直书写的语言（如中文、日文和韩文）

这种使用 block 和 inline 的方法可以自动对各种语言做出适配

/* // Without logical properties */
.element {
  margin-right: auto;
  margin-left: auto;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* // With logical properties */
.element {
  margin-inline: auto;
  border-block: 1px solid #eee;
}
1
2
3
4
5
6
7
8
9
10
11
12
13