这是我要编写的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指定元素存在性能问题.
几乎每个站点都有一个或几个样式表,这些样式表可以“蒙皮”该站点-字体,文本颜色,链接颜色/悬停,行距等,并且您不希望这些选择器非常具体.同样,如果您有一个在许多页面中重复使用的组件或元素,并且始终需要看起来相同-就像我们在此处说的标签-那么如果您使用基于ID的选择器将很难维护.
如果ID指向特定页面上的特定元素,我将始终在选择器中使用ID.没有比尝试弄清楚为什么您的规则由于与其他某些规则冲突而似乎不起作用的原因更令人沮丧的事情了,如果一切都是类,那么这可能会发生很多.另一方面,我认为按原样嵌套ID(#container #h)是多余的,因为ID的目的是唯一的.如果在同一页面上有多个具有相同ID的元素,那么您可能会遇到各种各样的问题.
当选择器提供一些表示的“结构”概念时,确实会使CSS稍微容易理解,但是老实说,我认为这与关注点分离的想法背道而驰.出于完全正当的理由,#navi可能会移到#h之外,现在即使#navi的内容没有任何变化,也必须有人为#navi更新样式表.
正如Darrell指出的那样,有些主观,但这是我的两分钱.
