search

NoName4Me / yo-FE

👉https://github.com/yo-notes
5 stars 2 forks source link

Airbnb CSS / Sass编码规范 #1

Open NoName4Me opened 6 years ago

NoName4Me commented 6 years ago

Airbnb CSS / Sass编码规范

这可能是最合理的编写CSS和Sass代码的方式了

译自：https://github.com/airbnb/css

目录

  1. 术语
  2. CSS
  3. Sass

术语

规则声明

“规则声明”指的是赋予某个选择器（或一组选择器）一组属性。例如：

.listing {
  font-size: 18px;
  line-height: 1.2;
}

选择器

在规则声明里，“选择器”决定了其定下的属性会用来设置DOM树中的哪一个（或多个）元素。选择器可以匹配HTML元素、元素的class、ID以及元素的其它属性，下面是选择器示例：

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

属性

属性是用来给被选中的元素定义样式规则的，它是键-值对，一个规则声明可以包含一个或多个属性声明，例如：

/* some selector */ {
  background: #f1f1f1;
  color: #333;
}

⬆ 返回目录

CSS

格式化

糟糕的

.avatar{
    border-radius:50%;
    border:2px solid white; }
.no, .nope, .not_good {
    // ...
}
#lol-no {
  // ...
}

良好的

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
  // ...
}

注释

OOCSS和BEM

我们推荐组合OOCSS和BEM，理由如下：

OOCSS，是“Object Oriented CSS”（面向对象CSS），是一种编写CSS的方式，它鼓励你将样式想象成一个“对象”的集合，这种可复用的、可重复的代码片段就可以在整个网站中独立使用。

参考：

BEM，“Block-Element-Modifier”（块元素修饰器）的缩写，是HTML和CSS中类的 命名约定。最初由Yandex发明，考虑了大型代码和扩展性问题，可以作为实施OOCSS的指导方案。

参考：

我们推荐一个使用PascalCased“块”的BEM变体，当与组件（如：React）一起使用时很有用。下划线和短划线仍然用于修饰符和子元素。

示例

// ListingCard.jsx
function ListingCard() {
  return (
    <article class="ListingCard ListingCard--featured">

      <h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>

      <div class="ListingCard__content">
        <p>Vestibulum id ligula porta felis euismod semper.</p>
      </div>

    </article>
  );
}
/* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

ID选择器

尽管在CSS里可以使用ID来选中一个元素，但是它很反模式。ID选择器会给你的规则声明引入不必要的高级别特殊性（specificity），而且它们是无法复用的。

想了解更多这个主题，可以阅读CSS Wizardry's article中关于特殊性（specificity）的处理。

JavaScript钩子

避免把同一个类绑定在CSS和JS代码中，如果这么做了，那开发者在重构代码时，除了要浪费时间去交叉寻找每一个要修改的类，甚至可能会因为担心影响功能而不敢轻易做修改。

我们推荐创建专为JS绑定而使用的类，以.js-作为前缀：

<button class="btn btn-primary js-request-to-book">Request to Book</button>

边框

使用0而不是none来指明某个样式没有边框。

译者注：两者并没有优劣，只是个人喜好或团队统一问题。

糟糕的

.foo {
  border: none;
}

良好的

.foo {
  border: 0;
}

⬆返回目录

Sass

语法

属性声明顺序

  1. 属性声明

    列出非@include或嵌套选择器的所有标准属性声明

    .btn-green {
  background: green;
  font-weight: bold;
  // ...
}

  2. @include声明

    @include放在最后读起来会比较容易。

    .btn-green {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);
  // ...
}

  3. 嵌套选择器

    嵌套选择器，如果必要的话，放在最后面，规则声明和嵌套选择器之间空行，相邻的嵌套选择器之间也是。将上述规则也用在嵌套的选择器上。

    .btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}

变量

使用短划线分割（比如$my-variable），而不是驼峰或snake_cased（译者注：下划线）。如果变量是只用于一个文件内，那么变量名里加一个下划线前缀（比如$_my-variable）是可以接受的。

Mixins

Mixins可以用来让你的代码遵循DRY原则（Don't Repeat Yourself），可以让代码更清晰、抽象复杂度（类似于封装良好命名的函数）。Mixins可以不接受参数，但是需要注意，如果你不压缩payload（比如gzip，译者注：这里可能说的是打包编译时的配置），最终的样式文件可能会有不必要的重复代码。

扩展指令

@extend应该被避免，它不够直观而且还有潜在风险，尤其当与嵌套选择器一起使用时。及时扩展最顶层的选择器也可能引入问题，如果选择器的顺序可以改变的话（比如在不同的文件中，而且加载顺序有变化）。@extend的优点，gzip都可以覆盖到，而且你可以配合使用minxins来DRY你的代码。

嵌套选择器

选择器嵌套不要超过三层！

.page-container {
  .content {
    .profile {
      // STOP!
    }
  }
}

如果你的选择器嵌套的很深，那么你很可能在这样编写CSS代码：

再次强调：不要嵌套ID选择器！

如果你一定要使用ID选择器（当然还是建议你最好不要用），它们都不应该被嵌套。如果你此时正在这样做，那么你可能需要重新审视一下你的代码，或者搞清楚为什么需要这么高优先级（的选择器）。如果你编写了架构良好的HTML和CSS，你可能从来都不需要使用ID选择器甚至嵌套它。

⬆返回目录

NoName4Me commented 6 years ago

http://getbem.com/