用更合理的方式写 CSS 和 Sass

译文 GitHub 链接，欢迎各位指正。

翻译自 Airbnb CSS / Sass Styleguide

目录

术语

规则声明

我们把一个（或一组）选择器和一组属性称之为 “规则声明”。举个例子：

.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，也可以使用下划线（参见下面的）。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时，每个选择器独占一行。 在规则声明的左大括号 {前加上一个空格。 在属性的冒号 :后面加上一个空格，前面不加空格。 规则声明的右大括号 }独占一行。 规则声明之间用空行分隔开。 Bad

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

Good

.avatar {  border-radius: 50%;  border: 2px solid white;}.one,.selector,.per-line {  // ...} 

注释

建议使用行注释 (在 Sass 中是 //) 代替块注释。 建议注释独占一行。避免行末注释。 给没有自注释的代码写上详细说明，比如： 为什么用到了 z-index 兼容性处理或者针对特定浏览器的 hack

OOCSS 和 BEM

出于以下原因，我们鼓励使用 OOCSS 和 BEM 的某种组合：

可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。 可以帮助我们创建出可重用、易装配的组件。 可以减少嵌套，降低特定性。 可以帮助我们创建出可扩展的样式表。

OOCSS，也就是 “Object Oriented CSS（面向对象的CSS）”，是一种写 CSS 的方法，其思想就是鼓励你把样式表看作“对象”的集合：创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。

参考资料：

Nicole Sullivan 的 OOCSS wiki Smashing Magazine 的 Introduction to OOCSS

BEM，也就是 “Block-Element-Modifier”，是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。

CSS Trick 的 BEM 101 Harry Roberts 的 introduction to BEM 示例

  
Adorable 2BR in the sunny Mission
  
    
Vestibulum id ligula porta felis euismod semper.

      
查看更多关于AirbnbCSS/Sass指南_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114620