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

Question

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

上下文选择（Contextual selectors）

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

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

更模块化的方式

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

.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 可以用在侧栏也可以用于搜索列表页。

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

突出领域

假设你写一个标题的样式，像这样：

.title {
  font-size: 3em;
  font-weight: bold;
  color: red;
}

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

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

.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 网站上的相关介绍。