在 CLASS 或 ID 之前提及 HTML TAG 元素（好的还是不必要的 CSS 实践？）答案

【问题标题】：Mentioning the HTML TAG element before a CLASS or ID (Good or unnecessary CSS practice?)在 CLASS 或 ID 之前提及 HTML TAG 元素（好的还是不必要的 CSS 实践？）
【发布时间】：2009-06-29 10:10:23
【问题描述】：

基本上，我想知道怎样才能最好地避免未来的 CSS 代码问题和混乱...

像这样命名 CSS 属性：

div#content 
ul#navigation
div.float-left

（真的没必要这么做吗？）

或者只是

#content
#navigation
.float-left

我没有大型项目的经验，所以我希望有人能告诉我在 HTML 和 CSS 变长时哪种方法更好用。

【问题讨论】：

标签： html css class

【解决方案1】：

这取决于你想要发生什么。

#content

将适用于 id="content" 的所有内容，但是

div#content

仅适用于 id="content" 的

。

这通常更多是类的问题，因为 ID 在页面上的所有元素中应该是唯一的。

所以底线是，如果您知道样式信息仅适用于某种类型的 HTML 元素，那么请包含元素标签。这可以防止样式被意外地应用到具有相同类（或 ID，但这很淘气）的不同元素上。

【讨论】：

【解决方案2】：

必要时使用显式标签，必要时使用通用选择器。额外的好处之一是使用标记名时选择正确元素的可能速度。此外，这将帮助您在查看标记时了解什么是什么：

h1.title { font-size:18px; }
h2.title { font-size:14px; }
p.title  { font-size:12px; }

在这种情况下，知道标签是什么不仅对我有帮助，而且为了区分多个类是绝对必要的。正如其他人所建议的那样，这实际上仅适用于 className，因为它们可以用于多个规则，而 ID 应该每页仅使用一次来表示页面上的特定元素。

因此，实际上，在必要时使用显式标记引用（注意我的多个 .title 类），以及当您在查看样式表时想要增加一些理解时。

【讨论】：

【解决方案3】：

我更喜欢以下：

/*IDs by themselves*/
#content{...}
#navigation{...}

/*Classes by themselves (unless the nesting is required)*/
.navoption{...}
.footerlink{...}

#specialSection.navoption{...}

这为重用提供了最大的灵活性，同时仍然为您提供了针对特定场景“优化”（或覆盖）选择器的选项。

【讨论】：