CSS 选择器样式

Question

我在这里没有看到任何关于它的快速搜索，如果有请告诉我。

这是我编写的 CSS 选择器示例。

div#container div#h h1 { /* styles */ }
div#container div#h ul#navi { /* styles */ }
div#container div#h ul#navi li.selected { /* styles */ }

我喜欢写我所有的 CSS。这让我不再让样式四处飘荡，而且我可以在技术上轻松地重用相同的类名。例如，我可能会在网站的多个元素上使用 .selected。

除非样式用于多个元素，否则我还在类/id 之前指定元素类型（div、ul 等）。我还在 id 之前指定元素，即使只有一个 id，因为它让我在阅读我的 CSS 时可以轻松了解元素。例如，我马上就知道 em#example 很可能具有斜体字体样式。

这不是关于 CSS 格式化的问题，而是关于编写选择器的问题。

我很想听听关于这种方法的意见，因为我已经使用了多年，并且正在重新评估我的定位。

虽然这有点离题，但我也为选择器库（例如 jQuery）编写了这样的选择器。虽然我还没有研究过 jQuery 的内部结构，以查看使用 ID 指定元素是否存在性能问题。

Answer 1

我认为这真的取决于选择器的用途。

几乎每个站点都有一个或几个“皮肤”站点的样式表 - 字体、文本颜色、链接颜色/悬停、行间距等，并且您不希望这些选择器非常具体。同样，如果您有一个在许多页面中重复使用的组件或元素，并且总是需要看起来相同 - 就像我们在 SO 上说的标签一样 - 如果您使用基于 ID 的选择器，维护起来会很痛苦。

如果它引用特定页面上的特定元素，我将始终在选择器中使用 ID。没有什么比试图弄清楚为什么您的规则似乎因为与其他规则发生冲突而不起作用更令人沮丧的了，如果一切都是类，这种情况可能会发生很多。另一方面，我认为像你一样嵌套 ID (#container #h) 是多余的，因为 ID 的目的是唯一的。如果您在同一页面上有多个具有相同 ID 的元素，那么您最终可能会遇到各种问题。

当您的选择器提供一些关于所表示的“结构”的想法时，它确实使 CSS 更容易理解，但老实说，我认为这与关注点分离的想法背道而驰。出于完全正当的原因，#navi 可能会移到#h 之外，现在有人必须更新#navi 的样式表，即使它没有任何改变。

Darrell 指出的有点主观，但那是我的两分钱。

Answer 2

虽然这个问题有点主观，但我不得不说我同意你的想法。我认为在阅读代码时在选择器之前定义元素更清晰，并且不易出错。