Переопределить CDN CSS своим собственным

Каков наилучший способ переопределить правила CSS из таблицы стилей CDN?

Например, я хочу оформление текста на весь привязанный текст, я бы просто использовал:

a{text-decoration: underline !important;}

Так как начальная загрузка имеет:

a{text-decoration: none;}

Есть ли способ лучше?

Источник

3 ответа

Решение

Да, обычно есть лучший способ использовать альтернативу !important, Используйте более высокую специфичность. Другими словами, сделайте ваш селектор более конкретным, чтобы он переопределял селектор Bootstrap. Например, body a{text-decoration: none;}

Согласно связанной статье:

Вместо использования! Важно, вы считаете:

  • Улучшение использования каскадных свойств CSS
  • Используя более конкретные правила. Указывая один или несколько элементов до того, как элемент> вы выбираете, правило становится более конкретным и получает более высокий приоритет

Использовать только !important когда нет абсолютно никакого другого варианта.

Источник

Там нет необходимости для !important с таким селектором. Просто убедитесь, что ваши правила следуют правилам начальной загрузки, и все будет в порядке.

<link rel="stylesheet" href="//bootstrap.cdn.url.wow.css">
<style>
  a {
    text-decoration: underline;
  }
</style>
Источник

При работе с таблицами стилей CDN (что я часто делаю) безопасным и надежным вариантом переопределения их правил своими собственными является использование !important,

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

Если !important должны были существовать по одной причине, я думаю, что это было бы так: переопределить CDN и другие сторонние стили, которые вы не можете контролировать.

РЕДАКТИРОВАТЬ (после небольшой обратной реакции;-)

Этот вопрос может быть сфокусирован исключительно на Bootstrap CDN. Другие ответы могут удовлетворить этот случай. Я не использую Bootstrap.

Мой опыт работы со сторонними CSS включает в себя в основном встроенные инструменты, такие как поиск, перевод, видео и слайд-шоу.

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

Иногда селектор CDN уже "исчерпан" для специфичности. Вот пример из виджета Google Translate:

#goog-gt-tt .translate-form .activity-form input.activity-submit.focus #goog-gt-tt .translate-form .activity-form input.activity-submit:active

Добавление специфичности к этому селектору возможно, но делает код еще более сложным и трудным для понимания.

Также важно: сторонние организации могут изменить специфику селектора в любое время, заставив вас изменить свою.

По этим причинам я обычно загружаю копию таблицы стилей CDN и выполняю !important,

(Добавление !important также помогает отличить ваши стили от CDN при проверке инструментов разработчика.)

Источник
Другие вопросы по тегам