Question

我正在创建a contact form，它将包含在几个不同的网站上。

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

例如，如果网站开发人员想要更改提交按钮的颜色，则应该可以轻松完成，而不必使用!important或某种过于具体的#id #id element .class #id element.class类型的选择器。

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

所以我的问题是，在这种情况下最佳做法是什么？我想在我的表单上添加一个ID并将其添加到每个选择器，所以我的选择器将成为.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选择器，这种情况非常自然。

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

Answer 2

我想你已经在这个问题上回答了你自己的问题：

#contactform .contact_input { background: white; }

CSS！

Answer 3

您最好的选择是使用类似于以下的模式：

input.JSCF_formInput{
   color: white !important;
   ...
}

这样你的风格是独一无二的{JSCF for Josiah Sprauge Contact Form}，具体而且指定为重要......

Answer 4

#site-wrapper input { background: yellow; } [...]我不希望它过度统治我的联系表单样式课程，.contact_input { background: white; }

你基本上不能，如果你使用那些选择器：#id s比.class es更具体，就是这样。我建议你从第一个规则中删除#site-wrapper选择器位，因为它意味着泛型。

Answer 5

我猜你应该采用一种“命名空间”模式。

E.g。使用#ds_contactform启动所有样式并尽可能地使它们具体化，而不会弄乱语义和方便的代码维护。

我不认为使用特定的选择器（带有#id甚至是几个ID）是无效的。

P.S。我还推荐Andy Clarke的精彩文章CSS: Specificity Wars。

Answer 6

您可以考虑使用BEM方法，它有非常棒的类命名样式，可以通过多种方式解决特异性问题。

Answer 7

如果您使用！important，它将始终覆盖与ID或类相关的样式。请查看此链接的更多信息;
http://www.electrictoolbox.com/using-important-css/

您可以查看此链接，以获取有关特异性的更多信息; http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

CSS特异性的最佳实践？

7 个答案:

为什么这样做？