Best Practices for CSS Specificity? [closed]

Question

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

The styles of the contact form and the styles of the site will both be included and I can't very well predict the styles of the site. I want the styles of the contact form to be easily over-ruled by the styles of the site, but I don't want to styles of the contact form to be accidentally over-ruled.

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

But, on the other hand, if the site developer wrote styles using selectors like input { background: yellow; } or #site-wrapper input { background: yellow; } I don't want it to over-rule my contact form styles that refer to classes, .contact_input { background: white; }

So my question is, what would the best practices be in this situation? I was thinking of putting an ID on my form and adding that to every selector, so my selectors would become #contactform .contact_input { background: white; } and I think that would work in terms of avoiding conflicts, but I'm wondering if there is a better way to do it, because that seems a little ineffecient in terms of page rendering. Maybe it's not a big deal, but I just thought I'd throw it out there and see what people think.

Corrales

Great Question, I've got this problem with my own stylesheets and margins, I've been fudging it with a style element on the div – Brittenybrittingham

Answer 1

That's a quite hard cause both, the selector itself and its location in sheet do matter. Also the fact that there is no only one, true way of writing CSS doesn't help.

I guess it would be the best if you use ID and tag selector. Additionally use attribute selector:

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

However you should mention that it's strongly recommended to put that sheet on the top of others, eg:

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

---

Why that approach?

Usually a developer will want to forms look the same all over the website, that's why he will use tag name selector:

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

These selectors are weaker that #contact-form input so they won't override anything. However sometimes it's necessary to override some rules so the developer will use #contact-form input selector which is pretty natural in such case.

If sheets has been attached as a recommendation says developer's styles will override yours, despite the fact that both have selectors with exactly same strength. That's why the location of the rules matter.

Useful

Thanks. This is the best answer so far. I understand the cascade and specificity quite well, but I'm sure the explanation could help for some. I'm probably going to go with selectors like '#contact-form input' as I mentioned earlier, but I want to see what others say. Unfortunately I don't think I can easily control which order the stylesheets will be linked in this case, but that is a very good point that I had forgotten to consider. – Corrales

Answer 2

I think you've answered your own question on this one:

#contactform .contact_input { background: white; }

CSS!

Samovar

Answer 3

your best bet is to use a schema somewat similar to the following:

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

that way your styles are unique {JSCF for Josiah Sprauge Contact Form} and specific and specified as important...

Sammy

I am using unique classes, I guess my examples were bad. I'm actually using .ds_contact_ as a prefix for my classes. The only issue with this, is that there are also site styles such as #wrapper input {} that would over-rule that. – Corrales

Answer 4

#site-wrapper input { background: yellow; } [...] I don't want it to over-rule my contact form styles that refer to classes, .contact_input { background: white; }

You basically can't, if you use those selectors: #ids are more specific than .classes, and that's it. I would suggest you drop the #site-wrapper selector bit from the first rule, since it's meant to be generic.

Enidenigma

I'm not the one writing the #site-wrapper selector. Basically there are ~4k sites that already have selectors like that, and I'm trying to avoid conflicts with those rules. (It's not realistic to rewrite the stylesheets for 4k websites overnight.) – Corrales

Answer 5

I guess you should adopt kind of "namespace" pattern.

E.g. start all your styles with #ds_contactform and make them as specific as you can without messing with semantics and convinient maintenance of the code.

I don't think that using specific selectors (with an #id or even several ids) is ineffecient whatsoever.

P.S. And I also recommend Andy Clarke's fantastic article CSS: Specificity Wars.

Saury

Unfortunately, Google PageSpeed would disagree with you about those selectors being inefficient. Also, making selectors "as specific as you can" is generally a bad idea when multiple developers are working on the same project because it turns into specificity battles where one developer tries to outdo the others' rules and pretty soon you'd end up with messy, unmaintainable stylesheets full of !important declarations and inefficient selectors. That's what I'm trying to avoid. – Corrales

If you are incorporating a block, which should be independent, it's not really bad. From your question I understood that contact form is in fact such an independent block. Thanks for the PageSpeed reference though. I will look at it closely. – Saury

Answer 6

You may consider of using BEM methodology, It has really awesome class naming styles which solves specificity issues in many ways.

Dilatory

Answer 7

If you use !important, it will always override the style with respect to an ID or a class. Have a look at this link of further information;
http://www.electrictoolbox.com/using-important-css/

You can have a look at this link in order to get more information on specificity; http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Barrio

If I use !important, no one else can override my styles. For the most part, !important should be used only as a last resort, if at all. – Corrales