使用缩进使CSS更具可读性？ （使CSS中的父母和子女更容易识别）

Question

我一直在使用以下CSS结构来指导自己：

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

这种结构清楚地告诉我谁是父母和孩子。

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

所以它可能是这样的：

#nav { }
#special-link { }

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

另一种解决方案是：

#nav { }
   #special-link { }

压痕

你如何解决这个CSS难题？

Answer 1

我会说你过早地进行了优化。我读了同一篇文章，最后他说这些指导书是在十年前编写的，当时计算机在发动机罩下的动力要少得多。现在，我真的认为这不重要 - 与你运行的任何JavaScript相比，你的CSS会闪电般快。选择可读的选项。

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

Answer 2

查看CleverCSS - 我发现它非常易读......但这可能是因为我是Python开发人员。此外，它导致普通的CSS样式表。