我又在这些小事上浪费时间了。我问自己——现在也问你——的问题是:做 CSS 选择器/HTML 标记的“最佳方式”是什么？
我是不惜一切代价避免使用类，让 HTML 保持纯净和美观，还是在任何我想设置样式的地方添加类？
例如，如果我想为我网站的各种表单按钮设置样式，我应该去吗
input[type="submit"] { /* styles */ }
或者我是否为所有这些添加一个“表单按钮”类并执行
.form-button { /*styles */ }
在这个微不足道的例子中，人们可能不会想太多，但如果我想将第三个链接的样式设置为不同的——语义的，而不是表象的——列表，我可以做到
.navigation ul:nth-of-type(2) a:nth-of-type(3) { /* styles */ }
与只给那个链接一类“不同链接”并使用
.different-link { /* styles */ }
据我了解，在 2013 年，所有计算设备及其运行的浏览器都应该足够快，以至于技术上次优的 CSS 选择器不应该对最终用户产生任何影响。
所以最后，这似乎真的是一个问题:“我是让 HTML 变得困惑(使用类)还是让 CSS 变得困惑(使用长篇大论的选择器)？”
有什么意见吗？
HTML和CSS的关注点分离
尽管从 HTML CSS 外部化应该被认为是独立的，但实际上在您插入 HTML 元素特定选择器的情况下并不是这样。在您的选择器与实际 HTML 元素相关的情况下，它们的层次结构使您的 CSS 与 HTML 源代码紧密相关。这会使您的 CSS 不灵活，并且可能比应有的更大。
因此 CSS 类。只要您使用类，只要它们定义了足够的属性，这些定义就可以附加到任何 HTML 元素。虽然您的 HTML 确实由于附加属性而变大了，但语义并没有改变。
为什么是.form-button优于 input[type=submit]那么呢？
因为您可能会更改您的 <input type=submit />至 <button type=submit>这是一个容器，为 UI 设计师提供了更多的设计自由。如果您使用 CSS 类，那么您可能不会对其属性进行太多更改，但如果您使用标签名称，则必须彻底检查并修改 CSS 文件。
另一个例子是其他类型的输入，即取消按钮。如果它在视觉上与提交按钮相同，设计师可能会说提交是主要操作，取消是次要操作，因此它应该显示为一个简单的链接。使用类将再次导致更少的维护。
为什么 classes-only CSS 也不是 Elixir ？
某些元素可能具有其他元素所没有的特定 CSS 属性。以(无)有序列表为例。在这种情况下，编写基于标签的选择器来定义适用于特定 HTML 元素的 CSS 样式确实有意义。但是为了避免选择页面上所有相同类型的元素，建议将 CSS 选择器定义为基于标签和基于类的选择器的组合。这可以说是 CSS 类选择器约束，在这种情况下是有意义的。
建议仅将通用样式属性与基于类的选择器分开，并将特定样式添加到带有约束的基于标签+类的选择器(LESS/SCSS 语法):
/* generic */
.navigation {
background-color: #999;
margin: 0;
.item {
display: inline-block;
padding: 10px;
}
}
/* specific to UL */
ul.navigation {
list-style: none;
}
这给了你最大的自由度，最大限度地提高了可维护性。
结论:基于类的选择器是首选提示:OOCSS
是的。大多数时候。通过这种方式，您将能够编写面向对象的 CSS(article on SmashingMag、GitHub repo)，同时减少代码重复和异常。它将提高您的 CSS 可维护性。
Important note: As with any code you shouldn't over-engineer your CSS either. I've showed you how you can provide flexible style definitions, but you shouldn't always follow these rules. You should provide just enough flexibility at the beginning and refactor as needed while you go. But keep yourself on the classes side most of the time.