6.8 可扩展模块化架构CSS代码规范（1）——SMACSS（I）

针对上一节提到的目标、误区，我们需要一套对应的CSS编写方式，用前人总结的最佳实践来作为指导方针，并且这种方式不应该根据项目的变化而变化。关于CSS的架构方式，比较重要的三个分别是：OOCSS，BEM和SMACSS。Drupal选择了SMACSS，他是Drupal8的CSS架构标准。Zen、Omega、Zurb Foundation主题都采用了SMACSS的方式来架构CSS。它的作者是Jonathan Snook，你可以在http://smacss.com找到更多详细资料，以下只做简单介绍。

SMACSS描述了如何编写灵活可扩展的CSS代码的方法，它的核心思路是将CSS规则进行合理的分类。一共分为以下五类：

1. Base

2. Layout

3. Module

4. State

5. Theme

这里的Module和Theme和Drupal中的对应名词没有关系。对此，Zen的作者曾经吐槽说：看来，Jonathan Snook在提出SMACSS概念的时候一定考虑过一个问题，就是，我怎样才能搞昏那帮玩Drupal的人。见https://www.drupal.org/node/1921610#comment-7099982

Base：

这一类样式属于默认样式，大部分情况下都是单一的元素选择器，也包括属性、伪类、子元素、后代选择器。它不包括类选择器和ID选择器。如：

html, body, form { margin: 0; padding: 0; }

input[type=text] { border: 1px solid #999; }

a { color: #039; }

a:hover { color: #03C; }

它的主要功能一般是设置标题大小、默认链接样式、默认字体样式、页面背景等。并且在这一组中不应该使用!important 。前端中经常使用的CSS Resets 和 Nomalize都应该属于这一组。

Layout：

Layout规则一般用来指定页面中比较大的部分，如Header, Sidebar, Content, Footer等。这些在Drupal中往往被做成区域（region）。他们可以被细分成更小的区域，这些则被划分到Module类中。Layout规则是唯一允许并推荐使用ID选择器的分组。但是如果使用网格系统的话，类选择器也是被允许的。一般来说layout使用单一选择器，可以是ID也可以是Class。如：

#header,

#footer {

  /* Some CSS properties */

}

#sidebar-first,

#sidebar-second {

  /* Some CSS properties */

}

#content {

  /* Some CSS properties */

}

某些使用多个选择器组合起来的情况：有时需要根据用户的选择变换页面元素的样式——这种情况下，可在 layout 的父级元素上指定派生／上下文选择器（通常是在body上指定）。

用上级元素样式影响下级元素样式：

#article {

    float: left;

} 

#sidebar {

    float: right;

} 

.l-flipped #article {

    float: right;

} 

.l-flipped #sidebar {

    float: left;

} 

此处.l-flipped被指派给上级元素，比如body，从而使得 article 和 sidebar可以互换位置。 

两种样式混用：

#article {

    width: 80%;

    float: left;

}

#sidebar {

    width: 20%;

    float: right;

}

.l-fixed #article {

    width: 600px;

} 

.l-fixed #sidebar {

    width: 200px;

} 

这里使用.l-fixed 类来改变布局，从流式布局（使用百分比进行定义）改为固定布局（使用像素进行定义）。

另外，需要指出的是，在Layout组中，ID选择器的命名没有特殊规定，但是类选择器都使用“l-”作为前缀，以示区别。