All geek questions in one place

CSS files and unwanted overrides

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

My problem is that both of these modal CSS files contain several common selectors, so they mix styles with each other.

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

My questions, however, now that I'm on my knees on this page, is there a way to prevent these CSS conflicts by not modifying the CSS modal pages as they stand now? Are there any tools that can help, such as LESS ? What is the best practice to prevent this from happening again?

+4
source share
3 answers

A better solution would be to refactor these css files according to your needs.

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

LESS / SASS are great tools to help you write CSS faster and more conveniently. I use SASS for private work and really recommend it. They cannot help you, though with problems like you, atm.

EDIT:

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

  • Avoid duplicating styles as much as possible.
  • if you cannot avoid this, try resolving this:
+3
source

Assuming that:

 ... <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 overrides any previous styles over and over again. Thus, if modal_1.css and modal_2.css apply the x style to the body tag, for example, the second stylesheet will override the first.

The sad part is that there is no other way out than, as you suggested, changing 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 specific element you are targeting and its proper place in the DOM. Note that LESS is just a CSS preprocessor that allows you to use different CSS syntax.

+1
source

I would suggest a general class to add to the body tag of this particular page and the target using this particular class. If you have tools like LESS or Compass, you can easily achieve the goal.

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

When analyzing through LESS or Compass, it will look as follows.

.pageOne.header {}

.pageOne.sidebar {}

This way your page will get a namespace.

0
source

Source: https://habr.com/ru/post/1401415/

More articles:


All Articles