1

Okay, this is a gross oversimplification, but I have a javascript application to help people develop webpages. It has its interface superimposed over the page that is being developed, and it all works fine, apart from one thing.

If the div class used in the interface is used by the webpage that is being developed, the interface' embedded stylesheet overrides the properties of the webpage!

This happens on jsfiddle, the embedded css is takes precedence over the external css.

JSfIDDLE

external css:

.color {
    color: green;
}

Index.html:

 <style> 
    .color {
       color: blue;
    }
</style>
<div class="color"> Text to be coloured </div>

When run, the text is blue. If someone could make the text turn green, I think it would demonstrate how to overcome the problem.

Obviously, one way to fix this would be to change the interface classes and rules to something like this: 

<style> 
  .color_interface {
     color: blue;
   }
</style>
<div class="color_interface"> Text to be coloured </div>

And make them unique, but the project has hundreds of css rules, and I'm just wondering if there's a better way, and a safer way (there's still a small chance someone has a rule "color_interface") to do nullify css rules, so they won't contaminate the page.

I'm thinking the only way to do it is probably a 'reset' stylesheet concerning my rules, setting them all back to their defaults. Is there a way to do this dynamically with jquery, maybe?

Improve this question
3
  • 1
    Are you aware that the JSFiddle internal CSS is very wrong? Commented Aug 20, 2013 at 12:09
  • Sorry about that, amended Commented Aug 20, 2013 at 12:13
  • Not yet - but browsers will eventually implement the all property which does exactly what you want Commented Aug 20, 2013 at 12:15

3 Answers 3

Reset to default
2

What you're witnessing is CSS by design. Specifically, specificity.

If your goal is to release some kind of library that can be used publicly and you want to avoid naming conflicts, I think a fair practice is to simply namespace your selectors, e.g., .starkers-color { color: blue; }. That won't necessarily avoid specificity issues, but it should prevent against having your selectors overridden by implementors.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Think this is probably what I'm going to have to do!
0

If you inspect the JSFiddle page you'll see that the reason for it not working is that your inline style definition is placed in the body where it has no effect.

The CSS rules you specify is instead placed as an inline style in the head element.

To your problem: Again, referring to JSFiddle, would it be possible to load the page in development inside an iframe? This would mean you get the separation you require.

Improve this answer

2 Comments

Yeah sorry should have checked my jsfiddle, it's fixed now.
Didn't even spot your mistake and imagined that the error was due to the placement of <style> rather than anything else... Realy thought it had no place outside of <head>... You learn something each day.
-1

This is because the order of the CSS when rendering. Your include is at the top of the page but your style tags are below that, meaning your style tags will alway take precedence over you include at the top. You could try adding an important to you css includes but this is majorly hacky and could create a whole load of new issues.

Improve this answer

1 Comment

In this particular example it has nothing to do with ordering and everything to do with specificity. Inline (document-level) style declarations always take precedence over external stylesheets when the specificity for a given selector is equal.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.