Блог

Главная - Вопросы по программированию - Как избежать влияния CSS со стороны сторонней библиотеки?

Как избежать влияния CSS со стороны сторонней библиотеки?

#css #angularjs

#css #angularjs

Вопрос:

У меня есть проект angular, в котором используется библиотека с именем smDateTimeRangePicker, она включает приведенный ниже код:

Ссылка здесь

 .action {
  height: 30px;
  margin-bottom: 0;
  position: absolute;
  bottom: 0;
  width: 100%; }

Однако в моем проекте есть код, который также включает action class

 <div flex class="action cell">

И на это влияет приведенный выше CSS, как этого избежать?

Этот вопрос рассматривался по этим пунктам ниже:

  • Существует способ избежать влияния CSS между проектом и библиотекой.
  • Библиотека использует плохую практику, она должна избегать влияния на проект. Это ошибка библиотеки и должна быть исправлена.
  • Это влияние обычно происходит, поэтому мне нужно изменить свой проект, чтобы избежать конфликта

Комментарии:

1. единственный способ заставить их работать — сделать один .action приватным, а другой общедоступным

2. привет, Стеф, используй!важно переопределить все правила, которые библиотека имеет для класса action

3. следуйте рулям специфики CSS, чтобы избежать этого. css-tricks.com/specifics-on-css-specificity /…

4. Разве вы не можете использовать другой класс внутри проекта?

5. @Weedoze использование другого класса может привести к огромным изменениям в моем проекте

Ответ №1:

Переименуйте свой класс действий проекта во что-то другое — самый чистый способ. В противном случае вам придется прибегнуть к исправлениям, которые считаются плохой практикой, например !важно, однако они все равно выполняют свою работу.

Комментарии:

1. Я не уверен, что если на проект влияет третья сторона, это хороший выбор для изменения проекта? Кроме того, трудно переопределить css, например, какое значение вы установили для bottom, чтобы переопределить 0?

2. В идеале вы знаете, какие третьи стороны вы собираетесь использовать, и убедитесь, что у вас не было никаких столкновений ранее. Переименование в этом случае заключается в том, чтобы иметь доброкачественный CSS, свободный от взломов. Я бы переименовал ради корректности и удобства обслуживания в будущем.

Ответ №2:

это случается со мной довольно часто, поэтому, чтобы решить эту проблему, я просто добавляю один родительский класс на свою страницу или в этот конкретный раздел

 <div class="my-unique-class">

    ---
        <div class="action">
            ---
        </div>
    ---

</div> 

.my-unique-class .action {
  height: 30px;
  margin-bottom: 0;
  position: absolute;
  bottom: 0;
  width: 100%; 
}

Комментарии:

1. Этот фрагмент кода находится в библиотеке, поэтому вы не можете его изменить.

2. в этом случае вам нужно либо изменить класс ur, если это возможно, либо использовать специфику CSS для перезаписи этого конкретного css

Ответ №3:

Вы можете избежать такой ситуации, увеличив специфику ваших правил css. Для этого есть несколько способов:

  1. Включите все сторонние CSS-файлы перед вашим пользовательским файлом, чтобы правила css с тем же приоритетом (в вашем случае) могли переопределить правило в стороннем CSS-файле.
  2. Приведенное выше решение должно работать в большинстве случаев, но есть вероятность, что сторонний CSS может иметь более высокий приоритет, поэтому вы можете увеличить вес своего css, добавив class в свой родительский тег как:

 .parent > .action {
  / * Some CSS Code */
}  
 <section class="parent">
  <div flex class="action cell"></div>
</section>

В MDN есть отличная статья о специфике CSS здесь

Ответ №4:

Если вы не можете изменить имя своего класса, вы можете сделать свои стили уникальными для вашего элемента, выполнив:

 .action.cell {

/*your styles here*/

}

Оставляя пробел между действием и ячейкой, вы говорите, что оба класса находятся в одном элементе. Кроме того, убедитесь, что вы загружаете свою таблицу стилей после сторонней таблицы стилей, чтобы ваши стили применялись поверх их.

Ответ №5:

Если у вас есть правило CSS, вы можете использовать !важно перед точкой с запятой:

 background: black !important ;

Оно помечает ваше правило как «важное» и не может быть изменено ни одним файлом CSS.

Только встроенный CSS может перезаписать его:

 style="background: blue !important"