CSS特异性的最佳实践？

Question

我正在创建一个联系表单,该表单将包含在几个不同的站点上.

联系表格的样式和网站的样式都将包含在内,我无法很好地预测网站的样式.我希望联系表单的样式很容易被网站的样式所覆盖,但我不希望联系表单的样式被意外地过度统治.

例如,如果站点开发人员想要更改提交按钮的颜色,则应该可以在不使用!important或某些特定#id #id element .class #id element.class类型的选择器的情况下轻松完成.

但是,另一方面,如果网站开发人员使用选择器编写样式,input { background: yellow; }或者#site-wrapper input { background: yellow; }我不希望它过度规则我的联系表单样式引用类,.contact_input { background: white; }

所以我的问题是,在这种情况下最佳做法是什么？我正在考虑在我的表单上添加一个ID并将其添加到每个选择器,因此我的选择器将成为#contactform .contact_input { background: white; }我认为这将有助于避免冲突,但我想知道是否有更好的方法来做到这一点,因为这在页面渲染方面似乎有点无效.也许这不是什么大不了的事,但我只是想把它扔出去看看人们的想法.

Answer 1

这是一个相当困难的问题，因为选择器本身及其在工作表中的位置都很重要。而且，编写 CSS 的真正方法并不只有一种，这一事实也无济于事。

我想如果你使用 ID 和标签选择器会是最好的。另外使用属性选择器：

#contact-form input { ... }
#contact-form input[type=email] { ... }
#contact-form select { ... }

但是您应该提到，强烈建议将该表放在其他表的顶部，例如：

<link type="stylesheet" href="/styles/contact-form.css" />
<link type="stylesheet" href="/styles/main.css" />

为什么采用这种方法？

通常开发人员会希望整个网站上的表单看起来都一样，这就是为什么他会使用标签名称选择器：

input  { ... }
select { ... }

这些选择器较弱，#contact-form input因此它们不会覆盖任何内容。然而，有时有必要覆盖一些规则，因此开发人员将使用#contact-form input选择器，这在这种情况下是很自然的。

如果作为建议附加了工作表，则表示开发人员的样式将覆盖您的样式，尽管两者都具有具有完全相同强度的选择器。这就是规则的位置很重要的原因。