在CSS中引用类的最佳实践

Question

如果您的HTML页面中包含某个元素的类，例如<div class="myClass">，那么最好在CSS中将其引用为.myClass或div.myClass吗？

Answer 1

div.myClass使样式声明更具体。换句话说，它需要更高的优先级。因此，当你有许多开发人员加入项目而人们添加类似没有明天的类时，指定它以避免CSS冲突有时是一件好事。换句话说，如果你有Bob添加：

.myClass {
  color: red;
}

和莎拉补充道：

div.myClass {
  color: blue;
}

当你得到时，莎拉的班级将胜过鲍勃的班级：

<div class="myClass">Sarah FTW</div>

您可以通过使用ID指定它来使其更具体，但这超出了您的问题范围。 ：）

Answer 2

除非你打算给某些东西（非div）一个“myClass”这个类并以不同的方式设置它，否则你应该选择.myClass。

例如，如果所有.error都是color:red，但div.error也是background:red，您可以将文件设置为包含.error和div.error的样式。 {{1}}。

Answer 3

我认为最好永远不要扩大范围超出你的意图 - 如果你只是将这个类应用于div，请使用div.myClass。这至少有两个好处：

• 如果您使用.myClass，然后意外创建了一个.myClass，您将.myClass样式应用于myClass类的所有链接，从而导致您不必要的调试麻烦。
• 您的CSS将更具可读性。您或其他查看它的人将能够看到myClass应用于div，并且不必仔细搜索每个HTML文档以查看它的用途。

Answer 4

与仅使用.myClass相比，使用div.myClass会降低性能。始终在可能的情况下直接定位元素，这适用于所有内容。不是获取父元素然后使用它来定位会影响性能的子元素，而是尽可能使用ID和类。

CSS性能并不是大多数Web开发人员考虑的事情，这是一种耻辱，因为写得不好的CSS很容易锁定Web浏览器并导致最终用户出现各种问题。