在CSS中使用HTML标记名称,类或ID？

Question

在为页面设计HTML和CSS时,我应该何时使用

img.className

与

.className

与

#idName

还是其他一些变种？

有指导方针或建议吗？

答案摘要

谢谢所有的回答者 - 这里有一些很棒的东西!

• 使CSS尽可能具体
• 使用OO方法
• order:#id,tag,tag.className,.className
• 何时使用每个选择器,还要进行类/ ID比较
• 根据目的给出选择者名称,而不是它们的样子
• 对较小的代码使用高级选择器,只为异常/覆盖保留CSS类
• 管理ASP.NET munging ID

Answer 1

通常,您应该与项目要求一样具体.

没有一般规则,这取决于所讨论的风格.

很多人会建议你保持最低的特异性,理论上这允许最大程度的重复使用,但这在现实世界的情况下是绝对有毒的,在这种情况下你有多个开发人员都在处理.foo可能看起来像的不同版本.你不想要的继承造成的污染会导致大规模膨胀,试图在本地撤销或在重构中耗费时间.

我总是提供的最佳指导是尝试用OO术语来思考CSS:类选择器或多或少地映射到接口,标签映射到类,ID选择器映射到实例.因此,决定你想要应用的风格是否真的适用于那个东西,所有类似的东西,或任何想要它的东西.

我也强烈建议您让在包装元素使用高级别ID,这样就可以以类似的方式命名空间写选择(即#foo .bar,#foo .baz这里#foo是唯一的页面或设置页面设计的),它可以让你既特异性的水平,这降低跨设计污染和一般性,让您充分利用级联CSS重用.

两全其美.

Answer 2

这取决于预期的语义，正如其他人所说，尽可能具体。

• #idName用于页面上的唯一元素。很好的例子是#header和#footer
• TAGNAME用于通用页面样式。
• TAG.classname和.classname用于上述规则的例外/覆盖。

并且不要忘记使用高级选择器。一个不好的例子：

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    .in_the_menu { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1 class="in_the_menu">My Menu</h1>
</div>

同样可以通过以下方式实现：

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    #mainMenu H1 { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1>My Menu</h1>
</div>

第二个示例去掉了“mainMenu”div 中 H1 元素上多余的“class”属性。这有两个重要的好处：

1. HTML 代码更小更干净
2. 您不太可能忘记添加 class 属性

如果你好好照顾你的 CSS，并使用适当的高级选择器，你几乎可以完全忽略 CSS 类。并且只为异常/覆盖保留它们。

以绘制带有标题的框为例：

#content H2{
   border: 1px solid #008789;
   padding: 0em 1em;
   margin: 0.2em 0em;
   margin-bottom: 1em;
   font-size: 100%;
   background: #cccb79
}

#content H2 + DIV{
   margin-top: -1em;
   border-left: 1px solid #008789;
   border-right: 1px solid #008789;
   border-bottom: 1px solid #008789;
   margin-bottom: 1em;
}

现在，只要你遵循H2了DIV在#content元素，你有一个漂亮的盒子。otherDIVs和H2s 被单独留下：

<div id="content">

    <h2>Hello Box!</h2>
    <div>Some text</div>

    <div>Some more text</div>

    <div>Some more text</div>

    <h2>And another title</h2>

</div>

如果你掌握了这些规则，你几乎不需要类，并且可以单独使用 ID 和 TAG 名称。作为额外的好处，您的 HTML 将更易于阅读和维护。