Question

I have a simple HTML page that is referencing 3 CSS files. The first is a style sheet that is just for the page. The other two are for the styles of two unique modals. These modal CSS files were not created by me and they are happily being used separately on other pages throughout the site.

My problem is that both of these modal CSS files contain a few common selectors and so they are messing up each other’s styles.

I understand that the best way to fix this problem is to take one or both of the files and make their selectors unique. One way would be to namespace the selectors.

My questions is, however, now that I’m knee-deep in this page, is there anyway to prevent these CSS conflicts without changing the modal CSS pages as they currently stand? Are there any tools that can help such as LESS? What is the best practice for preventing this in the future?

Answer 1

The best solution indeed would be to refactor those css-files to your need.

However, an easier solution would be to include your stylesheet after those two third-party css-files and re-declare the styles for the common selectors, which automatically overrides the previous settings.

LESS/SASS are excellent tools to help you write CSS faster and more comfortable. I use SASS for private work and really recommend it. They can’t help you though with issues like you have atm.

EDIT:

Using !important is possible, but considered bad habit, as it was intended to give the user the possibility to override author-styles with his own. Instead of using !important what you should do is:

1. Avoid duplicate styles as much as you can.
2. if you can’t avoid this, try to resolve this by either:
   • cascading (=using the proper sequence to override previous styles)
   • using selector specificity (W3C-Spec).