CSS Best-Practice：选择器或类/ ID？

Question

CSS中真正的最佳做法是什么：使用ID和类或选择器？

我提交了一个表单，一旦表单被提交以设置结果/成功提交页面的样式，我就想知道什么是CSS中使用ID和类或使用选择器的最佳实践？

Answer 1

基本上，类应该用于可能或可能重复的公共页面对象。只有当页面上有一个您在页面上没有其他位置的唯一元素时，才应使用ID。

解释这个问题的一种方法是：

• ID =一个人的身份证明（ID）对一个人来说是唯一的。
• Class =班上有很多人。

CLASSES和ID没有浏览器默认值

默认情况下，向元素添加类名或ID不会对该元素执行任何操作。

这是一个让我初学者陷入困境的事情。您正在一个站点上工作，并确定应用特定的类名可以解决您遇到的问题。然后你跳到另一个有相同问题的网站，并试着用相同的类名修复它，认为类名本身有一些神奇的属性，只是发现它不起作用。

类和ID本身没有任何样式信息。他们需要CSS来定位它们并应用样式。

ID具有特殊的浏览器功能

类在浏览器中没有特殊功能，但ID确实有一个非常重要的技巧。这是URL中的“哈希值”。如果您有http://yourdomain.com#comments之类的网址，浏览器将尝试找到ID为“评论”的元素，并自动滚动页面以显示该元素。重要的是要注意，浏览器将滚动它所需的任何元素以显示该元素，因此如果你做了一些特殊的事情，比如常规体内的可滚动DIV区域，那个div也会滚动。

这是一个重要原因，因为ID非常独特是很重要的。所以你的浏览器知道在哪里滚动！

元素可以有两个

没有什么可以阻止你在一个元素上同时拥有ID和Class。事实上，这通常是一个非常好的主意。例如，WordPress评论列表项的默认标记：

<li id="comment-27299" class="item">

它有一个应用于它的类，你可能想要在页面上设置所有注释的样式，但它也有一个唯一的ID值（由WordPress动态生成，非常好）。此ID值对直接链接很有用。现在我可以直接链接，轻松地在特定页面上做一个特定的评论。

注意：请注意，Javascript非常关注

JavaScript人员可能已经更加适应了类和ID之间的差异。 JavaScript依赖于只有一个具有任何特定的页面元素，否则常用的getElementById函数将不可靠。对于那些熟悉jQuery的人，您知道向页面元素添加和删除类是多么容易。它是jQuery的本机和内置函数。注意ID不存在这样的函数。操纵这些值不是JavaScript的责任，它会导致比它值得多的问题。

如果您不需要它们，请不要使用它们

正如您所看到的，类和ID非常重要，我们每天都依赖它们来完成我们需要做的样式和页面操作。但是，你应该明智地和语义地使用它们。

这意味着要避免这样的事情：

<a href="http://css-tricks.com" class="link">CSS-Tricks.com</a>

我们已经知道这个元素是一个链接，它是一个锚元素！这里没有特别需要应用类，因为我们已经可以通过其标记应用样式。

还要避免这种情况：

<div id="right-col">

此处适当使用ID，因为页面可能只有一个右列，但名称不合适。尝试并描述元素的上下文，而不是它的位置或外观。这里的“侧边栏”ID更合适。

Answer 2

选择取决于HTML的结构。如果多次使用某种样式，请使用类。如果样式仅用于特定标记，请使用ID。关于选择器，诀窍是尽可能缩短它们。

Answer 3

当您在网页上或网站上设置多个元素（例如所有p标记）时，应使用类。每页只能使用一次ID来设置一般布局，例如包装器，容器等。

Answer 4

对唯一元素使用ID，并使用类更一般地应用样式。

表单应使用ID，因为它们通常都是唯一的。其中的任何内容都可以使用类，如果需要，您可以组合ID和类来专门定位它们。

HTML：

<form id="member-signup">
    <div class="align-left">
        <input type="text" class="large" />
    </div>
</form>

CSS：

#member-signup {
    width:600px;
    float:left
}
.align-left {
    text-align:left;
    float:left;
}
input.large {
    width:300px;
}
#member-signup input.large {
    width:450px;
}

Answer 5

使用HTML5的语义，选择器是最初用于基于布局的样式的自然方式。 类非常适合为元素添加天赋和模板的最小“逻辑标志”。 为您的特殊元素保存ID，如稀松布覆盖，页面名称和包装。 在页面上应该只有一个id实例;在编写代码生成的标记时应始终牢记这一点。每页多个ID可能会导致以后出现一些令人讨厌的错误;简单的错误，但有时很难发现。