CSS Files and Unwanted Overriding

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?

Hmm, I like the idea of using `!important`. Still seems like a hack but at least it will let me take control of a selector without messing with order of precedence. — Aaron Salazar, Mar 14 '12 at 16:09
If you need to use `!important`, you either have no clue about CSS or have a bad style of writing CSS. Even worse: having both. — Christoph, Mar 14 '12 at 16:14
...or just new and don't understand why. Please help me understand (although I probably already know the answer). — Aaron Salazar, Mar 14 '12 at 16:18
Here is a good description of why you shouldn't use `!important`: http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css — Aaron Salazar, Mar 14 '12 at 16:26

Christoph · Accepted Answer · 2012-03-14T16:29:01.243

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:

Avoid duplicate styles as much as you can.
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).

Seriously, thank you for helping me understand. Although, it seems obvious now. ;) — Aaron Salazar, Mar 14 '12 at 16:40

score 1 · Answer 2 · answered Mar 14 '12 at 16:08

1

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.

answered Mar 14 '12 at 16:08

Whymarrh

13,139
14
57
108

`
...
` In example: modal1 styles the `p` and modal2 styles the `span`. Both styles may not be compatible. -- These styles are not editable by the user, so the best bet would be to overwrite such rules in this_page.css and include it at last (as Christoph mentions). – Smamatti Mar 14 '12 at 16:15
"cascading nature of CSS"? Ya, I know but I was just thinking that this can't be a unique problem and that maybe there was some other way of dealing with it. Agreed, the *only* way to do it *right* is to make the selectors more specific. Thank you for this. – Aaron Salazar Mar 14 '12 at 16:16
Sorry, wording it that way just felt natural. – Whymarrh Mar 14 '12 at 16:22

score 0 · Answer 3 · answered Mar 14 '12 at 16:14

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.

CSS Files and Unwanted Overriding

3 Answers3

Linked