Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best Practices for CSS Specificity? [closed]

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.

like image 523
Jo Sprague Avatar asked Dec 15 '10 17:12

Jo Sprague


People also ask

What is the correct order of CSS specificity?

Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.

Which CSS rule has the most specificity?

Inline styles added to an element (e.g., style="font-weight: bold;" ) always overwrite any normal styles in author stylesheets, and therefore, can be thought of as having the highest specificity.

What are the 3 CSS rules?

Inheritance, the Cascade, and Specificity are the big three. Understanding these concepts will allow you to write very powerful stylesheets and also save time by writing fewer CSS rules.

What is the important rule in CSS and why should you generally avoid it?

The !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!


2 Answers

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.

like image 179
Crozin Avatar answered Sep 28 '22 21:09

Crozin


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

#contactform .contact_input { background: white; }

CSS!

like image 25
Bill Keller Avatar answered Sep 28 '22 22:09

Bill Keller