模块化CSS更要避免选择器嵌套

我们之前介绍了选择器嵌套过深将会带来的有关风险。该基本规则可以很好的帮助你避免一些错误选择器的嵌套。但实际上,采用此概念有一个很大的好处,让你的选择器更为干净。但当你避免嵌套主要选择器时,又将会发生什么呢?

本文由大漠根据John W. Long的《Avoid nested selectors for more modular CSS》所译,整个系列共分四章,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明原作者相关信息http://thesassway.com/intermediate/avoid-nested-selectors-for-more-modular-css

——作者:John W. Long

——大漠

我们之前介绍了选择器嵌套过深将会带来的有关风险。该基本规则可以很好的帮助你避免一些错误选择器的嵌套。但实际上,采用此概念有一个很大的好处,让你的选择器更为干净。但当你避免嵌套主要选择器时,又将会发生什么呢?

##上下文选择(Contextual selectors)

首先我们来谈谈这个为什么是一个好主意。一个关于CSS最强的东西是不同的样式基于不同上下文元素来控制的能力。例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.post {
margin: 2em 0;
.title {
font-size: 2em;
font-weight: normal;
}
}
.sidebar .post {
margin: 1em 0;
.title {
font-size: 1.2em;
font-weight: bold;
}
}

上面的代码是实现不同基础上博客的样式,不管是不是在侧边栏内。

起初,这种做法似乎是一个很好的主意,你在侧边栏和主内容区域内使用一套相同的HTML代码,得到不同的风格效果。

但是,当你在侧边栏要实现博客列表的索引或者类似的效果时,会发生什么呢?哎,我们内容相关的代码都必须依赖于上下文来更新的。

现在Sass提供了很多强大功能,在不同环境之下可以共享相同的样式风格。但与以往更加复杂,而且增加了一定的成本。如果你比较关心如何编写具有可维护性的代码,你将会不惜一切代价避免这些复杂性。

##更模块化的方式

我们使用更模块化的方式来写这些样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.post {
margin: 2em;
.title {
font-size: 2em;
font-weight: normal;
}
}
.summary {
margin: 2em;
.title {
font-size: 1.2em;
font-wieght: bold;
}
}

这样编写就更好。我们现在获取了更通用的样式,而且不需要依内容上下文来写样式。我们有两个单独的CSS模块。“post”和”summary”。“summary”可以用在侧栏也可以用于搜索列表页。

但我们可以进一步完善这些代码。标题样式依然依靠上下文内容来决定样式。他需要声明一个更通用的样式规则,方便你随时调用。

##突出领域

假设你写一个标题的样式,像这样:

1
2
3
4
5
.title {
font-size: 3em;
font-weight: bold;
color: red;
}

如果你不想让定义好的title样式影响其他标题元素样式。现在来看一个例子,虽然这个例子有点做作,但现实中这样的用法是非常的常见。在我的项目中常发生这样的事情,如果别的同事在别的地方增加了新的样式,有时候我的样式就发生问题。特别是大型的项目常发生的事情。

那么在同一时间如何能更加透明化优化我们的代码呢?像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.page-title {
font-size: 3em;
font-weight: bold;
color: red;
}
// Posts
.post {
margin: 2em 0;
}
.post-title {
font-size: 2em;
font-weight: normal;
}
// Summaries
.summary {
margin: 1em 0;
}
.summary-title {
font-size: 1.2em;
font-weight: bold;
}

这样好多了,这最大限度减少了其他样式规则与刚刚定义的样式发生冲突,并且有助于确保于我们的CSS模块在上下文中看起来是一样的。

##上下文和模块化

这里的关键词是上下文。如果你想要让你的模块不受影响,应该尽量避免上下文的样式风格。有时候,上下文在一定时间范围内是有用的。响应式设计和皮肤制作往往需要他们。但是选择上下文样式时,应该是你故意的。如果你无为的使用它们,可能会造成你的代码非常难维护,偶尔还会有别的问题暴露出来。

另外值得一提的是,如果你发现你自己经常使用嵌套,你应该考虑如何去除他们,来简化你的代码。

##总结

希望你不会对这些想法有太多的争议。如果你更多的兴趣了解CSS模块化方面的东西,我强烈建议你看看Jonathan Snook介绍的关于这方面的电子书或者看看Harry Roberts在CSS Wizardry网站上的相关介绍。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文出处:http://thesassway.com/intermediate/avoid-nested-selectors-for-more-modular-css

中文译文:http://www.w3cplus.com/preprocessor/intermediate/avoid-nested-selectors-for-more-modular-css.html