Overriding Styles

Question

I'm creating a plugin and it has it's own css file (compiled from sass)

I was just wondering what the best way to approach would be regarding overriding styles.

For example, I set a H1 style for my plugin. How can I make it so that the user does not override this with their H1 style?

I know I could ask them to add my style sheet last but then my style would override theirs.

How should I approach this?

Answer 1

You can use unique id's or class for your elements.

or best way is

<div id="parentWrapper">
<!-- Your plugin's elements goes here -->
</div>

your stylesheet would be

#parentWrapper h1 {  // h1 definition 
}

#parentWrapper p {
}

.
.
.

Answer 2

The best way to avoid style collision is to ring-fence your plugin from what a user may be implementing in their own code by adding plugin specific classes to elements.

E.g. you would style h1 by adding a class called say myPlugin-h1

<h1 class='myPlugin-h1'></h1>

You could then either use your plugin to add these styles into the DOM, or require the user chooses where to add them (preferred).

That said..Typically plugins allow users to add a single class to a 'top level' element to denote it should have a plugin applied, and then the plugin stylesheet prefixes elements by this class, or assigns classes to child elements dynamically.

So, in your HTML you may have:

<div class='myPlugin'><!--
   content either dynamically added by your plugin or already present
--></div>

Then your plugin CSS would include .myPlugin h1

Answer 3

Just add a class to your h1 tag and that will do the trick. You do not need to add an !important tag to the <h1>, that will prevent the class to take it's course.

HTML

<h1>Hi</h1>
<h1 class="blue">This</h1>

CSS

h1{
    color:red;
}
.blue{
   color:blue;
}

And a working demo : http://jsfiddle.net/52Jd5/2/