My !important styles will not override cleanslate's

[ablankenship10]

It doesn't seem like my styles are properly overriding the cleanslate rules even though I add !important to everything myself as well. This is within a React/Webpack built script where my styles are in LESS files and !important is added programmatically. I do not believe this is relevant to why this is happening as the outputted CSS looks to be correct.

My widget looks like this:

<div class="cleanslate">
    <div class="mywidgetClass">....</div>
    <div class="mywidgetClass">....</div>
</div>

The styles under myWidgetClass are all set with !important but cleanslate is still overriding them.

Is this the correct way to use this?

[premasagar]

Could you paste an example of a rule in the final CSS that gets overridden?

If you are including Cleanslate first, and your rules after, then something like .mywidgetClass p { color: red !important; } should work.

[ablankenship10]

Is it the order the style sheet loads or the order/hierarchy of the css classes used? Because I have no idea what order webpack includes stuff (I can look into forcing it, maybe its alphabetically?) If its the order of the classes though it should work. To me it wouldn't make sense that css classes would trump other different classes used throughout HTML in the proper order just because of the order they were included on the page.

<div class="cleanslate">
    <div class="someclass"></div>
</div>

someclass I would think should always override cleanslate classes in this case

<div class="someclass">
    <div class="cleanslate"></div>
</div>

cleanslate should always override in this case

<link href="stylesheet.css" />
<link href="otherstylesheet.css" />

otherstylesheet should only override classes or standard elements that are defined in both sheets. completely different classes defined in otherstylesheet should not take precedence just because of the order included here, it should then be based on the order the classes are used in the DOM.

(obviously not the fault of cleanslate if this is not actual functionallity of the browser but this is how I imagine it should work)

This is what my widget looks like in Chrome Dev tools:

http://imgur.com/a/pp7Cc

[premasagar]

The Cleanslate stylesheet uses two levels of selector: .cleanslate and .cleanslate TAG (e.g. .cleanslate li). In order to override them, as per CSS cascade rules, you will need to use !important and either:

• use more specific selectors - e.g. class, tag and something else (another class, tag, anything), or
• use selectors of the same specificity and include those rules after the Cleanslate rules.

If it helps, you could have your rules include the prefix .cleanslate in addition to .someclass or .mywidgetClass. E.g. .cleanslate.mywidgetClass p { color: red !important; } - then your rules will always be more specific, and this will override Cleanslate even if your rules are before the Cleanslate rules.