SMACSS中文翻译

# 代码格式

每个人都有自己的方式方法。你现在掌握的工具和技术可能是自己反复试验得来的，也可能是从别人那里学来的。我开始开发的时候，我使用的是Dreamweaver。Dreamweaver有很多特性，可以让我快速地构建静态HTML网站。当我看到我的一个同事使用Ultraedit，并且看到他使用Ultraedit很快的完成工作，我开始学习Ultraedit丰富我的工具集。这其实对于编码来说是一样的，我看到某种技术或者是别人使用的样式，我会将这些技术纳入我自己的工作体系。

在代码格式这一章，我会简单介绍我的代码格式，希望在我的代码能够被大家读懂。

# 单行与多行

有很长一段时间，我使用单行方法 (opens new window)来编写我的CSS。也就是说所有的规则属性我都写在同一行里。这样我可以快速扫描左侧的选择器，因为对我来说快速查看选择器可比排列整齐的属性重要多了。几年以前，规则集的属性列表大多数是比较小的，所以我可以找到我想要的选择器，而且所有属性都会显示在屏幕上。

随着CSS3的到来，属性有了无数的厂商前缀，上述方法很快就不能应付了。况且在一个大型团队中，一个选择器里的规则很可能是多个人编写的。

/* CSS3有太多的厂商前缀，如果属性都在一行里，会变得难以阅读 */
.module {
    display: block;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;

    border: 1px solid #333;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;

    font-size: 12px;
    text-transform: uppercase;
}

这个例子中，有11个属性被定义了，如果我们再定义一两个属性，可能还会规则集还会更大。如果所有这些属性都在一行里，那么我们只能在屏幕上看到一部分属性，其他属性需要我们滚动屏幕才能看到。这会让我们查看属性变得十分困难。

这个例子中还有一些需要注意的点：

  • 分号后面有一个空格
  • 每个属性前有四个空格（不是tab）
  • 属性按类型分类
  • 开始括号和选择器在同一行上
  • 颜色使用简短的格式

以上都是有好处的，当然使用完全不同的方法也没问题。这些只是让我感觉起来自然，且有意义的编写方法。

# 属性分组

有些人按照字母顺序来对属性进行分组，有些人根本不进行分组，还有些人可能使用一些比较随意的系统性分组。我就是最后一类人。不过注意这不是完全随意的，我其实是按重要程度分组的，但是如何区分样式的重要程度呢？

我按照以下顺序组织我的样式

  1. Box
  2. Border
  3. Background
  4. Text
  5. Other

Box包含了影响显示和位置的属性，例如，display, float, position, left, top, height, width等等。对我来说，这些是最重要的属性，因为它们能够影响文档的其他部分。

Border则包括了border，border-radius，以及不常使用的border-image。

Background排在第三。因为CSS渐变的出现，背景的定义可以变得非常复杂，而厂商前缀则会使得定义更加复杂。

/* CSS3定义多个背景 */
background-color: #6d695c;
background-image: url("/img/argyle.png");
background-image:
  repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
  repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
  linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
  linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;

我们虽然可以用CSS3渐变创造复杂的模式，但是却不得不定义冗长的背景声明，何况我们这个例子还没有包括CSS3的前缀，所以我们可以想象如果加上前缀，背景的定义会变得怎样的冗长。

Text包括font-family font-size text-transform letter-spacing以及其他影响显示类型的CSS属性。

其他不属于上述分类的属性一般都放在最后面。

# 颜色定义

提到颜色定义大家可能觉得没什么好讲的，不过我看到不同的开发者却有着不同的定义。一些人可能使用类似black，white这样的关键词，但是我却会尽可能地使用3位或是6位的哈希值。#000和#FFF不仅短，而且能和关键词对应。我也不会使用rgb或是hsl，因为和哈希值相比还是太长了。当然rgba和hsla没有哈希格式，我们只能使用它们。

← 资源 →