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

发布于 2021-08-03 20:42:36 字数 2233 浏览 1098 评论 0

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

上下文选择(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 网站上的相关介绍。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

瑾兮

暂无简介

0 文章
0 评论
21332 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。