4

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

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

4

5 回答 5

7

基本上，类应该用于可能或可能重复的常见页面对象。仅当页面上存在您在页面上其他任何地方都没有的唯一元素时才应使用 ID。

解释这一点的一种方法是：

  • ID = 一个人的身份 (ID) 对一个人来说是唯一的。
  • 班级 = 一个班级有很多人。

CLASSES 和 ID 没有浏览器默认值

默认情况下，向元素添加类名或 ID 对该元素没有任何作用。

这是一个让我成为初学者的东西。您正在一个站点上工作，并发现应用特定的类名可以解决您遇到的问题。然后你跳到另一个有同样问题的站点并尝试用相同的类名修复它，认为类名本身有一些神奇的属性，结果发现它不起作用。

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

ID 具有特殊的浏览器功能

类在浏览器中没有特殊功能，但 ID 确实有一个非常重要的技巧。这是 URL 中的“哈希值”。如果您有类似http://yourdomain.com#comments的 URL ，浏览器将尝试定位 ID 为“comments”的元素，并自动滚动页面以显示该元素。这里需要注意的是，浏览器会滚动它需要的任何元素以显示该元素，因此如果您在常规正文中做了一些特殊的操作，例如可滚动的 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 会更合适。

于 2013-02-25T00:35:35.580 回答
3

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

于 2013-02-25T00:16:55.507 回答
0

对唯一元素使用 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;
}
于 2013-02-25T00:18:39.087 回答
0

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

于 2013-02-25T00:14:48.210 回答
0

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

于 2013-02-25T00:32:11.113 回答