CSS specificity guidelines?

Question

I am creating a contact form that will be included on several different sites.

Contact form styles and site styles will be included, and I cannot accurately predict site styles. I want the contact form styles to be easily redirected by the site styles, but I do not want the contact form styles to be accidentally exceeded.

For example, if the site developer wants to change the color of the submit button, it should be easy to do without using !important or some overly specific type of selector #id #id element .class #id element.class .

But, on the other hand, if a site developer wrote styles using selectors like input { background: yellow; } input { background: yellow; } or #site-wrapper input { background: yellow; } #site-wrapper input { background: yellow; } , I do not want him to rebuild the styles of my contact form related to classes .contact_input { background: white; } .contact_input { background: white; }

So my question is: what are the best practices in this situation? I was thinking about putting an identifier in my form and adding this to each selector, so my selectors will become #contactform .contact_input { background: white; } #contactform .contact_input { background: white; } , and I think this will work in terms of conflict prevention, but I wonder if there is a better way to do this because it seems a little inefficient in terms of page rendering. Maybe it doesn’t matter, but I just thought that I would throw it away and see what people think.

Answer 1

This is a pretty difficult reason both for the selector itself and for its location on the sheet. Also, the fact that there is only one true way to write CSS does not help.

I think it would be better if you used the ID and tag selector. Also use the attribute selector:

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

However, you should mention that it is highly recommended to put this sheet on top of others, for example:

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

---

Why is this approach?

Typically, the developer will want the forms to look the same throughout the site, so he will use the tag name selector:

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

These selectors are weaker than #contact-form input , so they will not override anything. However, sometimes it is necessary to override some rules, so the developer will use the #contact-form input selector, which in this case is quite natural.

If sheets were added as a recommendation, says that the styles of the developers redefine yours, despite the fact that both have a selector with the same strength. That is why the provision of the rules holds.

Answer 2

I think you answered your own question:

#contactform .contact_input { background: white; }

CSS!

Answer 3

it is best to use a scheme similar to the following:

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

Thus, your styles are unique {UAF for the Josiah Sprauge contact form}, and specific ones are indicated as important ...

Answer 4

#site-wrapper input { background: yellow; } #site-wrapper input { background: yellow; } [...] I do not want this to exceed the rules of the styles of my contact form that apply to classes, .contact_input { background: white; } .contact_input { background: white; }

Basically you cannot if you use these selectors: #id more specific than .class es, and what it is. I suggest that you discard the #site-wrapper selector from the first rule, as it should be shared.

Answer 5

I suggest that you should take the "namespace" pattern.

eg. run all your styles with #ds_contactform and make them as specific as possible without messing up the semantics and convenient code maintenance.

I do not think that using special selectors (C # id or even multiple identifiers) is inefficient at all.

PS And I also recommend Andy Clark's fantastic CSS article : Specificity Wars .

Answer 6

You can use the BEM methodology. It has truly amazing class naming styles that solve specific problems in many ways.

Answer 7

If you use! important, it will always redefine the style with respect to the identifier or class. Take a look at this link for more information.
http://www.electrictoolbox.com/using-important-css/

You can take a look at this link to get more information about the specifics; http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/