Systematically Resolve Conflicting Styles in CSS

Systematically resolve conflicting styles in css

Have you tried this Firefox extension, Dust-Me Selectors (http://www.brothercake.com/dustmeselectors/)? It makes removing redundant styles much easier.

Otherwise, I'd probably pop all the styles into one file, trying to group together similar rules, and then use Dust-Me to remove the unused ones.

How do i resolve the CSS stylesheet reference conflict? Is localization possible?

You need to implement all scripts and css related to those libraries:
For bootstrap you can see the "Getting Started" section
here

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

The same for font-awesome here

How do I refactor my CSS?

Split your css into separate files.

1. Put in one file the CSS reset (if you use one)
2. Then create a global.css file where you will put global styles that
   apply to many-all pages
3. Then create individual files for your individual pages

Then start styling your pages. Every time you find a style rule that is reusable on many pages make it a CSS class and put it in the global.css file. Avoid using css ID's. You will find that you more often reuse things or will reuse in the future. In this case you use of course CSS classes.

Eventually you will find out that in your global.css you will find mostly CSS classes rules and html tag rules.

In your individual page CSS files you will find specific styles for each page.

That should give you a good first level of organization in your CSS. You can try to keep this separation through the whole development process, and for releases merge the CSS files into one and minify it.

How to prevent conflicts between css rules

I think that the following might work for you.

If this is your HTML:

<div class="project">
    <div class="item">item outside widget</div>
    <div class="my-second-widget"><span class="item">item</span></div>
</div>

try this CSS:

.item {
    color:red;
}
.my-first-widget {
}
.my-first-widget .item {
    color: blue;
    font-size:16px;
}
.my-second-widget {
}
.my-second-widget .item {
    color: inherit;
    font-size:14px;
}

.project {
}

See demo at: http://jsfiddle.net/audetwebdesign/3eLpU/

Set color: inherit on .my-second-widget .item, which will force the nested .item to inherit the color value from .my-second-widget (if it is set), or the color value of .project (if it is set) or ultimately, the body (set or default value).

If the top level .item rule is present, it will be applied outside of .my-second-widget.

JQueryUI Dialog display issue

Just updated to the latest UI CSS and worked like a champ... Thanks for your help Will

---

Related Topics