1

I'm building an html5/js/css application that will exist inside of a div on my client's existing html. I want to be sure that none of the client's CSS styles are inherited by my app.

Is there a best practice to reset this div and its descendant elements?

I'm thinking I'll use something like:

#my-id * { //styles }

I'm wondering if there is a better/best-practice approach? Thanks.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
shackleton
  • 701
  • 1
  • 12
  • 27

3 Answers3

3

That will be very difficult/likely impossible to ensure. The type of solutions that Starx is referring to assume no preset styles other than the browser defaults, and "reset" in that context refers to harmonizing the inconsistencies across various browser defaults.

But in your case, your client CSS may already contain highly specific selectors such as 

#someDiv .aClass a{float:left;}

... and applying those "CSS reset" solutions simply will not override this.

You can see that Truth's selectors also have lower specificity than this, and therefore will fail to ovetride the client's styles in such cases.

Your question is very similar: How to remove all inherited and computed styles from an element?

So the short answer is: there is no way to ensure this because you cannot "remove all inherited and computed styles from an element" ... update: ...unless you can anticipate and override every preexisting style declaration with new declarations having appropriate specificity.

ReinstateMonica3167040
  • 732
  • 9
  • 27
Faust
  • 15,130
  • 9
  • 54
  • 111
  • 1
    ... and this is why, for example, all the big social media companies (Google+, FB, Twitter) don't write their sharing buttons into your page when you include their widgets -- there'd be no way they could ensure the integrity of their intended styles (read: brand), so they *iFrame* them in. – Faust Apr 27 '12 at 21:09
  • That's very interesting. I hadn't considered specific selectors. I'm planning on "namespacing" my classes and ids (eg. "my-app-classname") to avoid conflicts but this is good to keep in mind. It seems likely that a predefined class will be inherited at some point in the document. Thanks. – shackleton Apr 27 '12 at 21:10
2

If you want to only recent this specific div, than what you have is fine. You forgot to reset the div itself though:

#my-id, #my-id * { /* styles */ }
Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
1

You are probably looking for Eric's CSS Reset as it one of robust resets out there.

But the reset rule is applied to the whole page, instead of the just the box. SO, modify the rules, by keeping #my-id infront.

Starx
  • 77,474
  • 47
  • 185
  • 261