CODEWITHSUNDEEP
css
Aaron Salazar
Aaron Salazar

Reputation: 4527

CSS Files and Unwanted Overriding

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?

Upvotes: 4

Views: 3319

Answers (4)

Divyaa01
Divyaa01

Reputation: 1

I found out by trial and error that the easiest way to fix that was to add an id to the entire jsx file and in css just use that id for the entire code. eg: #id_name{ //your entire css }

Upvotes: 0

Christoph
Christoph

Reputation: 51181

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:

Upvotes: 3

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

I would suggest to a common class add into body tag of that particular page & target using that particular class. If you tools like LESS or Compass you can easily achieve the aim.

.pageOne{ /*All the styles for this perticular page*/
    .header{

    }
    .sidebar{

   }
}

When parse through LESS or Compass it will look like following.

.pageOne .header{}

.pageOne .sidebar{}

This way your page will get a namespace.

Upvotes: 0

Whymarrh
Whymarrh

Reputation: 13565

Assuming:

...
<link rel="stylesheet" href="this_page.css" />
<link rel="stylesheet" href="modal_1.css" />
<link rel="stylesheet" href="modal_2.css" />
...

Due to the cascading nature of CSS (sorry, I had to) using the same selector over and over overrides any previous styles. Thus, if modal_1.css and modal_2.css both apply style x to the body tag, for example, the second stylesheet will override the first.

The sad part is that there is no way out other than to, as you suggested, modify the two selectors to make them more specific.

Looking to the future, the best way to avoid overriding previously declared styles, is to always be specific about the particular element you are targeting, and it's proper place in the DOM. Note that LESS is simply a CSS preprocessor, which only allows you a different syntax for CSS.

Upvotes: 1

Related Questions