2017-06-15

css

CSS-Sass-Style-Guide

用更合理的方式写 CSS和Sass

术语

规则声明

“规则声明”是指给具有附带属性组的选择器（或一组选择器）的名称。以下是一个例子：

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

选择器

在规则声明，“选择器”，其是在DOM树中的元件将用定义的属性设置样式决定的位。选择器可以匹配HTML元素，以及元素的类，ID，或它的任何属性。这里有选择的一些例子：

.my-element-class {
  /* ... */
}
[aria-hidden] {
  /* ... */
}

属性

最后，属性是给定规则声明所选元素的风格。属性是键值对，规则声明可以包含一个或多个属性声明。属性声明如下所示：

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

CSS

格式化

使用软标签（2个空格）进行缩进
喜欢在类名中用驼峰命名或破折号。
- 如果您使用BEM（下面的OOCSS和BEM），下划线和驼峰命名(首字母大写)都可以。
不要使用ID选择器
在规则声明中使用多个选择器时，给每个选择器自己的行。
在开始大括号{ 之前放置一个空格（在规则声明中）
在属性中，放置一个空格，但不是之前的:字符。
把关闭大括号 } 的规则声明在新的一行
在规则声明之间放置空白行

例子

//**糟糕**
.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 {
  // ...
}

注释

Prefer line comments (// in Sass-land) to block comments.
Prefer comments on their own line. Avoid end-of-line comments.
撰写详细的注释：
- 使用z-index
  -可用于浏览器兼容性的hacks

OOCSS and BEM

由于以下原因，我们鼓励OOCSS和BEM的组合：

它有助于在CSS和HTML之间创建清晰，严格的关系
它可以帮助我们创建可重用的，可组合的组件
它允许 less 嵌套
它有助于构建可扩展的样式表

OOCSS, 或“面向对象的CSS”，是一种编写CSS的方法，它鼓励您将样式表视为“对象”的集合：可重复使用的可重复的片段，可以在整个网站中独立使用。

Nicole Sullivan’s OOCSS wiki
Smashing Magazine’s Introduction to OOCSS

BEM, 或“块元素修饰符”是HTML和CSS中的类的命名约定。它最初由Yandex开发，具有大量的代码库和可扩展性，可以作为实施OOCSS的一套坚实的指导方针。

CSS Trick’s BEM 101
Harry Roberts’ introduction to BEM

我们推荐使用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 { }

.ListingCard is the “block” and represents the higher-level component
.ListingCard__title is an “element” and represents a descendant of .ListingCard that helps compose the block as a whole.
.ListingCard--featured is a “modifier” and represents a different state or variation on the .ListingCard block.

ID 选择器

虽然可以通过CSS在CSS中选择元素，但通常应该被认为是反模式。 ID选择器对您的规则声明引入了不必要的高度特异性，并且它们不可重用。

有关此主题的更多信息，请阅读CSS Wizardry’s article处理特异性的文章。

JavaScript hooks

避免绑定到你的CSS和JavaScript这两种同一类。混为一谈两人经常导致在最低限度，时间重构时，开发人员必须交叉引用每次被改变上课期间浪费，并且在最坏的情况，开发商害怕做出改变，害怕破坏功能。

我们建议创建要绑定的JavaScript特定类，并加上前缀 .js-:

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

边框

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

//**糟糕**
.foo {
  border: none;
}
//**良好**
.foo {
  border: 0;
}

Sass

Syntax

使用.scss语法，从不使用原始.sass语法
订购您的常规CSS和 @include 逻辑上的声明（见下文）

Ordering

属性声明

列出所有标准属性声明，不是@include或嵌套选择器的任何东西。

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

@include 声明

分组@include最后可以更容易地读取整个选择器。

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

嵌套选择器

嵌套选择器，如有必要，最后一次，没有任何事情发生。在您的规则声明和嵌套选择器之间以及相邻的嵌套选择器之间添加空格。对您的嵌套选择器应用与上述相同的准则。

.btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);
  .icon {
    margin-right: 10px;
  }
}

Variables

例子：

1 2	$my-variable $_my-variable

Mixins

应该使用Mixin枯竭代码,添加清晰,或抽象的复杂性一样命名良好功能。Mixin,不接受任何参数可以是有用的,但是请注意,如果你没有压缩载荷(如gzip),这可能导致不必要的代码重复在生成的风格。

Extend directive

@extend应该避免因为它直观,具有潜在危险的行为,特别是当使用嵌套的选择器。甚至延长顶级占位符选择器可以导致问题如果选择器的顺序最终改变后(例如,如果他们在其他文件和文件加载顺序变化)。gzip应该处理的大部分储蓄你会获得通过使用@extend,你可以干你的样式表和mixin。

Nested selectors

不要选择三层以上的选择器！

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

当选择器变得这么长时，你可能会编写CSS：

强大的耦合到HTML（脆弱）—OR—
过于具体（强大） —OR—
不可重用

再次：从不嵌套ID选择器！

如果你必须使用一个ID选择器在第一时间(你应该尽量不要),他们不能嵌套。如果你这样做,你需要重新审视你的标记,或找出为什么如此强烈的特异性是必要的。如果你正在编写格式良好的HTML和CSS,你应该不需要这样做。

道心博客

观世间百态，聆俗世妙音