2 代码风格

2.1 缩进

【强制】 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符；

示例：

  1. /* Not so great */
  2. .selector {
  3.   margin: 0;
  4. }
  6. /* Better */
  7. .selector {
  8.     margin: 0;
  9. }

2.2 空格

【强制】 选择器 与 {之间必须包含空格；

示例：

  1. /* Not so great */
  2. .selector{
  3. }
  5. /* Better */
  6. .selector {
  7. }

【强制】 >、+、~ 选择器的两边各保留一个空格;

示例：

  1. /* Not so great */
  2. main>nav {
  3.     padding: 10px;
  4. }
  5. label+input {
  6.     margin-left: 5px;
  7. }
  8. input:checked~button {
  9.     background-color: # 69C;
  10. }
  12. /* Better */
  13. main > nav {
  14.     padding: 10px;
  15. }
  16. label + input {
  17.     margin-left: 5px;
  18. }
  19. input:checked ~ button {
  20.     background-color: # 69C;
  21. }

【强制】 属性名 与之后的 : 之间不允许包含空格， :与 属性值 之间必须包含空格；

示例：

  1. /* Not so great */
  2. margin :0;
  4. /* Better */
  5. margin: 0;

【强制】 列表型属性值 书写在单行时，,后必须跟一个空格；

示例：

  1. /* Not so great */
  2. font-family: Arial,sans-serif;
  3. box-shadow: 0 0 2px rgba(0,128,0,.3);
  5. /* Better */
  6. font-family: Arial, sans-serif;
  7. box-shadow: 0 0 2px rgba(0, 128, 0, .3);

2.3 选择器

【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行；

示例：

  1. /* Not so great */
  2. .post, .page, .comment {
  3.     line-height: 1.5;
  4. }
  6. /* Better */
  7. .post,
  8. .page,
  9. .comment {
  10.     line-height: 1.5;
  11. }

2.4 属性

【强制】 属性定义必须另起一行；

示例：

  1. /* Not so great */
  2. .selector { margin: 0; padding: 0;}
  4. /* Better */
  5. .selector {
  6.     margin: 0;
  7.     padding: 0;
  8. }

【强制】 属性定义后必须以分号结尾；

示例：

  1. /* Not so great */
  2. .selector {
  3.     margin: 0
  4. }
  6. /* Better */
  7. .selector {
  8.     margin: 0;
  9. }

[⬆]