ID和类的CSS最佳实践?

我一直在关注CSS的SitePoint书。

让我感到震惊的是,使用ID作为CSSselect器。

我已经做了一些CSSdevise,我总是发现使用Class作为select器更容易,更通用。

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

在这里最好的做法是使用CLASS或ID作为select器?

我猜他们总是在示例中使用id,因为它不太模糊。 你知道他们正在专门讨论这个元素及其风格。

一般来说,经验法则是你应该问自己:“现在还是将来,任何时候都有不止一种元素需要相同的风格?”,答案甚至可能是“可能”一类。

不要忘记,类和ID不是相互排斥的。 没有什么可以阻止你有两个! 这有时是非常有用的,因为它允许项目与同一类的其他元素一起inheritance常规样式,并且可以精确控制该特定项目。 另一个方便的技术是将多个类应用于同一个对象(是的,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:多个类select器现在有接近通用浏览器的支持,所以继续使用它们!

不要忘记,你可以链接到一个有ID的元素 。 这对于可访问性以及其他好处非常重要。 这是为什么像页眉,导航,主要内容,页脚,search表单等布局元素,你应该总是使用一个ID而不是一个类(或与一个类一起)。

另一个有用的资源是关于Cascading Order的W3C规范 : idselect器被赋予十倍classselect器的权重。 如果您打算根据不同的场景或状态更改覆盖样式,这一点尤其重要。 初始select器越具体,在其他声明中必须做的越多的工作才能覆盖它。

这种做法取决于你想要select的“决议”。

当我想改变整个元素时,我使用类。 ID给我一个更加细化的控制,有时是必要的。

IDselect器具有很高的特异性,这通常是您在CSS中所需要的。 越紧,你就可以得到CSS来准确地满足CSS渲染器在build立规则时所需要做的工作。

devise任务,并以面向对象的方式这样做 – 使用对象类的类,你的意思是目标实例的ID,和标签参考接口(如果你这样做,要小心!)。 这是我能想到的最好的做法。

编辑:是啊MS真的用ASP.NET感谢CSS!谢谢你们!

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

基本上,它归结为语义。

 div.header 

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

 div#header 

这告诉我你正在谈论你的网站布局的单一“标题部分”。

编辑:这是一个关于纯CSSdevise的半旧文章…如果你只是扫描CSS的例子,你会看到为什么我在那里使用ID: 如何:纯CSSdevise

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

实际上,id属性只能用于每个文档,而class属性可以用在文档上的多个元素上。

检查W3C规范以及这个问题上的CSS-Discuss页面。

我更喜欢使用Class作为select器,所以我可以在同一页面使用多个元素。 使用id作为select器,不允许这样做,因为id必须是唯一的。

请参阅:

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

不要在CSSselect器中使用ID: http : //oli.jp/2011/ids/

如果您不必担心速度或兼容性,只使用类,几乎从不使用ID。

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

仅在必须使用ID的情况下,例如href ='#name'或某个库需要您使用。