CSS规则集

2018-02-24 15:11 更新

在这里,极有可能颠覆每个人对书写 CSS 规则集的认知(根据众多规范整理而成,包括CSS Guidelines):

  • 相关联的选择器写在同一行;不相关联选择器分行书写;
  • 最后一个选择器和左开大括号({)中间书写一个空格;
  • 每个声明单独一行;
  • 冒号(:)后添加空格;
  • 所有声明的尾部都添加一个分号 (;);
  • 右闭大括号(})单独一行;
  • 右闭大括号(})添加空行。

示例:

// Yep
.foo, .foo-bar,
.baz {
  display: block;
  overflow: hidden;
  margin: 0 auto;
}

// Nope
.foo,
.foo-bar, .baz {
    display: block;
    overflow: hidden;
    margin: 0 auto }

添加与 CSS 相关的规范时,我们需要注意:

  • 本地变量在其他任何变量之前声明,并和其他声明用空行分隔开;
  • 不需 @content 的混合宏在放在其他声明之前;
  • 嵌套选择器在新行声明;
  • 需要 @content 的混合宏在嵌套选择器后声明;
  • 右闭大括号(})上一行无需空行;

示例:

.foo, .foo-bar,
.baz {
  $length: 42em;

  @include ellipsis;
  @include size($length);
  display: block;
  overflow: hidden;
  margin: 0 auto;

  &:hover {
    color: red;
  }

  @include respond-to('small') {
    overflow: visible;
  }
}

扩展阅读

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号