在CLASS或ID之前提到HTML TAG元素（良好或不必要的CSS实践？）

Question

基本上，我想知道什么是最好的，以避免未来的问题和CSS代码混淆......

命名这样的CSS礼节：

div#content 
ul#navigation
div.float-left

（这真的没必要吗？）

或只是

#content
#navigation
.float-left

我没有大型项目的经验，所以我希望有人能告诉我哪种方法可以更好地使用，而HTML和CSS会更长。

Answer 1

这取决于你想要发生的事情。

#content

将适用于id =“content”的所有内容，但

div#content

仅适用于＆lt; div＆gt; id =“content”。

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

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

Answer 2

必要时使用显式标记，并在必要时使用常规选择器。另外一个好处是，当您使用标记名时，选择适当元素的速度可能会很快。此外，这将有助于您在查看标记时知道什么是：

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

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

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

Answer 3

我更喜欢以下内容：

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

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

#specialSection.navoption{...}

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