Giving CSS declaration more priority to ensure it always work

[runningdemo]

I encounter a bug when making a third part widget. In this widget, I have to use cleanslate to write more defensive CSS to protect my widget's style from been overwritten by the client's CSS. Take a CSS reset rule from cleanslate for example:

.cleanslate div {
    position:static !important;
}

This CSS rule will absolutly win element.style.position = 'relative' in CSS specificity and break the way 'element-resize-event' works. So I made this pull request to fix this issue.

Love to hear your thought.

[JLarky]

@liaa you can still do something like

.cleanslate div.myElementClass {
    position:relative !important;
}

and just myElementClass to the div you are tying to add element-resize-event since it has more specificity than original widget css it will solve the issue you are having

[runningdemo]

@JLarky You are right partially. The method you offer can ensure the div I am trying to add element-resize-event to have position: relative. But can't ensure the element created by element-resize-event have expected CSS style. Take a look at this file.

[JLarky]

@liaa yes, but that doesn't mean that you can't create similar css for it .cleanslate .myElementClass object {} and I was under impression that cleanslate was only working with divs, not object

[runningdemo]

@JLarky Thank you for your reply. I think your solution works. FYI: Cleanslate sure have overwritten the object style.

[eaglus]

Does anybody still needs this PR? I think, it is very specific use-case, and we don't need it here.