关于ID和Class的CSS最佳实践？

Question

我一直在深入研究有关CSS的SitePoint书籍.

让我了解这些例子的是使用ID作为CSS选择器.

我已经完成了一些CSS设计,我总是发现使用Class作为选择器更容易,更通用.

也许它是一个.Net的东西,因为我们并不总是控制元素的ID ...

这里最好使用CLASS或ID作为选择器吗？

Answer 1

我猜他们总是在示例中使用id,因为它不那么含糊.你知道他们正在特别谈论那个元素及其风格.

一般来说,经验法则是你应该问自己:"现在还是在未来的任何时候,是否有不止一个要求相同风格的元素？",答案甚至是"可能",然后再做一类.

Answer 2

不要忘记,类和ID不是互斥的.没有什么可以阻止你两者兼得!这有时非常有用,因为它允许项目继承常见样式以及同一类的其他元素,并使您可以精确控制该特定项目.另一个方便的技术是将多个类应用于同一个对象(是的,class="someClass someOtherClass"完全有效)例如:

<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}

div.wide {
width: 40em; 
}

div.narrow {
width: 10em; 
}

div#oddOneOut {
float: right;
}
</style>

<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>

从理论上讲,也可以将CSS仅应用于属于多个类的项目,例如div.box.narrow {something: somevalue;}但不幸的是,并非所有浏览器都支持此类.更新2011:多个类选择器现在具有接近通用的浏览器支持,因此请继续使用它们!

Answer 3

不要忘记您可以链接到具有ID的元素.除了其他好处之外,这对于可访问性非常重要.对于标题,导航,主要内容,页脚,搜索表单等布局元素,这是一个很好的理由,您应该始终使用ID而不是Class(或与Class一起使用).

Answer 4

另一个有用的资源是关于级联顺序的W3C规范:id选择器的权重是选择器的十倍class.如果您计划根据不同的方案或状态更改覆盖样式,这一点尤为重要.初始选择器越具体,在额外声明中覆盖它的工作就越多.