可扩展、模块化CSS--应用性深度(翻译文)

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

当我们学习到css的内在运作时,我们知道是通过选择器来选择html的元素的。随着css的不断发展,我们用到的选择器如今已是很多。我们没添加一个样式,就意味着csshtml的联系更多。

让我们看看典型的一个css中块的例子。

我们如何紧密结合我们的CSS,HTML呢?
#sidebar div {
    border: 1px solid #333;
}

#sidebar div h3 { 
    margin-top: 5px;
}

#sidebar div ul {
    margin-bottom: 5px; 
} 

我们看看以上代码,大概就能知道这个页面大致结构。它有侧边栏,有超过1个章节的内容,有无序列等等。如果这个网址长时间没有变化,这个样式就是成功的。像我的博客网站就是这样的。但是在一个大型网站里头,这样做,无疑阻碍了样式复用,维护起来是个噩梦。
那么我们错在哪里了呢?

1.我们的样式太过依赖html的节点结构。
2.样式的使用选择器深度太多了。

缩小深度

Html是树形结构的,它有父节点和子节点之分。各层各代向联。比如body.article > #main > #content > #intro > p > b,它因为有6代所以有6个应用深度。.article #intro b这样写同样也会6个深度。
这种高度依赖Html结构的情况给我们复用样式带来了极大的挑战,比如回到刚刚侧边栏的例子里头,如果要新建一个页尾的样式,我们是不是应该对侧边栏的那些样式复制一遍呢?

#sidebar div, #footer div {
    border: 1px solid #333;
}

#sidebar div h3, #footer div h3 { 
    margin-top: 5px;
}

#sidebar div ul, #footer div ul {
    margin-bottom: 5px; 
} 

这里的根节点其实是div,所以我们这样写:

.pod {
    border: 1px solid #333;
}

.pod > h3 { 
    margin-top: 5px;
}

.pod > ul {
    margin-bottom: 5px; 
} 

这样做,很显然深度缩小了,即使它依然是依然Html结构的。同时这样做也有利于复用到其他地方。当然,我们应该尽可能的避免各个段落都在用class
这样做可以让这个样式模块形成一种模板,至于内容随意变更。比如,雅虎中的Mustache模板。

{{heading}}

    {{#items}}
  • {{item}}
  • {{/items}}

很多时候,我们在写代码是要考虑维护成本,可读性,代码性能等等。还有一个我们要不要尽可能的给标签加上class。如果你不是非得让元素变得灵活,加class是没有必要的。
我们队最后一个例子进行深化研究。如果模块中除了ul,还有ol,div之类的呢?我们可以这样写:

.pod > ul, .pod > ol, .pod > div {
    margin-bottom: 5px; 
} 

也可加class

class简化了样式书写
.pod-body {
    margin-bottom: 5px; 
} 

所以Html就是这样的:

An example Mustache template

{{heading}}

    {{#items}}
  • {{item}}
  • {{/items}}

这个例子里加上class可以让深度的缩小,同时单个选择器也会避免潜在的'特殊样式'的问题(所谓特殊样式是指,这个样式专属于模块模块或者布局)。
原文地址:https://smacss.com/

你可能感兴趣的:(可扩展、模块化CSS--应用性深度(翻译文))