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.
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.
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.
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.
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!
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" />
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.
I think you've answered your own question on this one:
#contactform .contact_input { background: white; }
CSS!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With