关于ID和类的CSS最佳实践?

我想他们在示例中总是使用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年更新: 多个类选择器现在具有近乎通用的浏览器支持,所以继续使用它们吧!

别忘了你可以 链接到具有ID的元素 这对于无障碍环境以及其他好处非常重要。对于页眉、导航、主要内容、页脚、搜索表单等布局元素,您应该始终使用ID而不是类(或与类一起使用),这是一个很好的理由。

另一个有用的资源是 W3C spec on Cascading Order : id 选择器已给出 十倍 重量 class 选择器。如果您计划根据不同的场景或状态更改覆盖样式,这一点尤为重要。初始选择器越具体,在其他声明中重写它所需要做的工作就越多。

这种做法取决于你试图选择的“分辨率”。

当我想更改一大堆元素时,我会使用类。ID为我提供了更精细的控制,这有时是必要的。

ID选择器具有很高的特异性,这通常是CSS中所需要的。你越能让CSS精确地应用于它需要的东西,CSS渲染器在建立规则方面所做的工作就越少。

按任务设计,并以面向对象的方式实现——使用对象所在的类 是 类式ID,用于定位实例,并将标记引用视为类似接口的东西(这样做时要小心!)。这是我能想到的最好的做法。

编辑:是的,MS确实用ASP构建了CSS。NET谢谢大家!

当你总是谈论你网站的一个单独的(并且永远是单独的)分区时,你应该使用一个“id”。

基本上,这归结为语义。

div.header

这是告诉我,你允许多个“标题”在你的网站。也许这些是副标题。

div#header

这告诉我,你说的是你的网站布局的单一“标题部分”。

编辑:这是一篇关于纯CSS设计的半旧文章。..如果你只扫描CSS示例,你就会看到我为什么在里面使用ID: How To: Pure CSS Design

我更喜欢使用类作为选择器,这样我就可以在同一页面上与多个元素一起使用它。使用id作为选择器是不允许的,因为id必须是唯一的。

ID用于唯一标识元素,类用于将元素标识为元素类的一部分。

实际上,id属性应该只在每个文档中使用一个,类属性可以在文档上的多个元素上使用。

检查 W3C spec 以及 CSS-Discuss 关于这个问题的页面。

请参阅:

不要在CSS中使用ID选择器: http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/

不要在CSS选择器中使用ID?: http://oli.jp/2011/ids/

只使用类,如果你不必担心速度或兼容性,几乎永远不要使用ID。

使用ID是不好的,就像在Visual Basic代码中使用全局变量一样。原因是ID必须是唯一的,这会在代码的不同独立部分之间引入不必要和糟糕的依赖关系。使用类似.page1.tab1>.field1更好,因为您不必担心tab1内field1的唯一性或page1内tab1的唯一。使用ID时,您必须保留ID的注册表,以保持控制并避免冲突。

仅在必要时使用ID,例如href='#name'或某些库要求您使用ID。