CSS选择器样式

时间:2010-01-02 19:23:51

标签: css coding-style formatting css-selectors

如果有让我知道的话,我没有在这里看到任何关于它的快速搜索。

这是我写的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指定元素的性能问题。

2 个答案:

答案 0 :(得分:2)

我认为这实际上取决于选择器的用途。

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

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

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

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

答案 1 :(得分:1)

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