css - 使用缩进使 CSS 更具可读性？ (使 parent 和 child 在 CSS 中更容易识别)

Question

我一直用以下 CSS 结构来指导自己:

#nav { }
#nav li { }
#nac li a { }

这个结构清楚地告诉我谁是 parent 和 child 。

但是在最近的一篇文章(我认为是 CSS Trick)中有人说 CSS 是从右到左阅读的。所以我拥有的标签越多，速度就越慢(有时我认为没有必要编写选择器中涉及的每个标签)。

所以它可能是这样的:

#nav { }
#special-link { }

#special-link 是 #nav 的 child 。我知道这在一个简单的样式表中不是一个大问题，但在一个大的样式表中，我总是会对谁是父子关系感到困惑。

另一个解决方案是:

#nav { }
   #special-link { }

缩进

你如何解决这个 CSS 困境？

Answer 1

我会说你过早地优化了。我读了同一篇文章，最后，他说这些指导方针是十多年前写的，当时计算机在引擎盖下的功率要小得多。现在，我真的认为这无关紧要 — 与您运行的任何 JavaScript 相比，您的 CSS 将快如闪电。选择可读选项。

正如 Chris Coyier 所说，可以在不牺牲可读性的情况下使其更快的一种方法是避免后代，而支持子代。因此，不要使用 #nav li a，而是使用 #nav > li > a。这应该会提高速度并实际上传达更多信息，而不是更少。