可扩展、模块化CSS--布局样式规则(翻译文)

SMACSS is becoming one of the most useful contributions to front-end discussions in years

很自然的，CSS是用来解决元素在页面放置在哪里的问题。大体上来说，页面上大组件和相对较小组件的布局是有所区别的。小组件比方说是标注(callout),登录表单组件，导航组件这些往往会归类到头部或者尾部布局里。我更喜欢把相对小的组件当成模块，较小组件将作为模块在下一章节叙述。这章主要讲布局样式。

#header, #article, #footer {
    width: 960px;
    margin: auto;
}

#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}

布局样式同样也可以在是否复用的角度对其进行划分为主要和较小两个方面。主要的布局样式，如页眉和页脚，传统上是使用ID选择器的，但是要花时间考虑页面所有组件中常见的元素，并在适当的时候使用类选择器。
有些网站可能需要更加通用的布局框架，有些相对较小的布局样式使用类选择器替换ID选择器，这样可以在多个页面多次使用。
一般来说，布局样式拥有唯一ID或者类名。然而，因为不同因素，布局样式也要进行多变。比如说，同一布局样式可能在不同的用户体验上要做出有所不同，这个不同的表现也应该是布局样式的一部分。当然，同样这些不同的布局样式也是要被多次复用，并且也能够和其他的布局样式混合使用。

使用更高层次布局风格影响其他布局风格
#article {
    float: left;
}

#sidebar {
    float: right;
}

.l-flipped #article {
    float: right;
}

.l-flipped #sidebar {
    float: left;
}

在上面的布局例子中，使l-fiipped被用到更高的层次的元素比如说body元素并且能够使得article和sidebar内容调换，sidebar从左边移动到右边。

使用两种布局风格从流式布局转向固定布局
#article {
    width: 80%;
    float: left;
}

#sidebar {
    width: 20%;
    float: right;
}

.l-fixed #article {
    width: 600px;
}

.l-fixed #sidebar {
    width: 200px;
}

而在这个例子中，l-fixed被用来进行流式和固定两种布局的转换。
在布局的例子是另一个需要注意的我用的命名约定，声明使用ID选择器命名准确、没有特定的命名空间或者说是修饰，使用前缀的方式很显然让我们知道它是用来形容布局的。如果你要用布局样式，你就用ID选择器。如果你要在ID选择器上进行更多的修饰，是没有必要的。

使用ID选择器

可以清晰的讲，使用ID选择器绝对是有好处的，在一些情况下。它可以作为Javascript的钩子。然而，在性能表现上使用ID和类选择器，两种并没有差异，反而因为特殊命名而增加复杂性。

布局范例

理论是一回事，实际运用却是另外一回事。让我们看看现在的一些网站，了解到什么是布局样式，什么是模块样式。

CNN主页

CNN的网站布局模式在其他网站中也有同样的运用。比如，它有页眉，导航栏，内容栏和页尾。

布局

在撰写本文时,网站密切遵循这个分解并提供这些主要部分的ID属性。

我们的css结构大致这样
#header { … }
#primarynav { … }
#maincontent { … }

在这里，可能你还是有疑惑，这个布局太过简单，有没有更加详细的说明本章主题内容的例子呢？

CNN的featured部分

在上面的截图里，是一个网格布局的例子，它标记了一系列的div和子div。我更愿意用list来替换它。

featured的html代码

Featured

    
…
    
…
    …

在没有使用SMACSS的概念的情况下，你可能会这样写它的样式，也就是说使用ID来加到div中，从而修饰内容。

一种可能的css的写法
div#featured ul { 
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div#featured li {
    float: left;
    height: 100px;
    margin-left: 10px;
}

在我们使用这种方法来写样式时，有一些情况条件：

1.只有一个featured栏。
2.lists浮动在左边。
3.lists有100pixs高。

这些情况条件都是很有可能的。在一些小网站里头都会有这样结构：网站在一段时间里不太会改变或者更加复杂。可能大型网站有更高的几率就重构样式。
我们看到以上的样式代码例子，有很多地方可以做到优化。没必要使用ID选择器来限制标签选择器。既然list是子元素，那么可以使用>符号。
接下来，我们尝试重写这段代码，让它显得更加灵活。在布局这个角度，我们要知道它的成员之间的关系。我们没必要关心模块本身，也没必要关心这个布局的上下文是如何。

OL 或 UL的样式
.l-grid {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.l-grid > li {
    display: inline-block;
    margin: 0 0 10px 10px; 
    
    /* IE7 hack to mimic inline-block on block elements */
    *display: inline;
    *zoom: 1;
}

那么这样更改代码后，解决了什么问题呢？（当然不会是100%的解决）。

1.这个栅格布局现在可以用到任何地方去创造一个浮动样式布局。
2.我们减少应用深度到1（可以查看应用深度这一章节，查看它的意思）。
3.我们减少使用特殊的选择器。
4.高度要求被删除，其中特殊高度的行可以增高到最大。

相反的，这样做哪些方面是糟糕的呢？

1.使用的孩子选择器，ie6可能没办法兼容。
2.css的变得复杂了，而且代码更多一些。

在代码量上变得更多是很正常的。我们既然可以服用这个模块，同样也可以减少代码。
增加复杂性同样也是正常的，我们如果还在关注非常古老的浏览器，可能会遭到白眼。让选择器不那么复杂,也可以来扩展此布局,同时最小化特异性的影响。

原文地址：https://smacss.com/