Это ответ на вопрос @ sazr на мой комментарий.
Если вы считаете, что нужно , чтобы использовать !important, тогда ваш CSS очень сложный и часто имеет слишком много верхнего уровня.правила, которые влияют на слишком много вещей.Иногда это происходит из-за того, что вы пытаетесь создать универсальный CSS, который применяется по всей вашей странице, иногда это происходит потому, что вы создаете правила, которые имеют такое большое значение для специфичности, что вы не можете найти другой способ заставить стиль, который вы хотите использоватьваш элемент.
Изучение того, что такое специфика и как она работает, является самой важной вещью для разработчика CSS.Если вы по-настоящему не понимаете этого, то вы обречены на !important для решения проблем, которые ускользают от вас.
Посмотрите на эту таблицу, которую я взял отсюда: http://www.standardista.com/css3/css-specificity/
Обратите внимание на изображение, связанное с !important.Это ядерный вариант, и его следует использовать в качестве крайней меры. Хотя я использую его в каждом правиле для @media print, чтобы не беспокоиться о моих распечатках.
Использование некоторого интервала имен в вашем CSS поможет уменьшить смертельную спираль, которая может бытьвызвано слишком большим количеством неспецифических селекторов или слишком большим количеством селекторов, которые настолько специфичны, что вы больше не можете переопределять эти правила.
Выбор, подобный следующему:
#page1 .outershell .innershell .form button {
background-color: green;
}
имеет специфичность 1,3,1
Если у вас есть такая раскладка:
<div id="page1">
<div class="outershell">
<div class="innershell">
<form class="form">
<button>Click me</button>
</form>
</div>
</div>
</div>
И вы хотите изменить цвет фона кнопки на красный, тогда вам нужно создать новый селекторс более высокой специфичностью.
Это не сработает
.form button {
background-color: red;
}
Поскольку его специфика составляет только 0,1,1
#page1 .form button {
background-color: red;
}
Это имеет значение только 1,1,1
Поэтому вам нужно использовать два селектора идентификаторов, селектор четвертого класса или селектор второго элемента.Или вы можете поместить точно такой же селектор после первой, а затем все ваши кнопки после этого объявления будут красного цвета.
Но это не изменит никаких других кнопок на красный.Так что с этим макетом:
<div id="page1">
<div class="outershell">
<div class="innershell">
<form class="form">
<button>Click me</button>
</form>
</div>
<div class="secondshell">
<button>Not me</button>
</div>
</div>
</div>
кнопка "Not me" не будет красной или даже зеленой.
То, что я делаю
Я никогда не использую селекторы IDесли только я не должен переопределить существующий CSS.
Я не использую !important, кроме @media print, и я использую его для всего, что есть в выводе на печать.Таким образом, я знаю свою специфику вывода на печать и не беспокоюсь, что какой-то другой селектор CSS испортит мои распечатки.
Я избегаю глубоких селекторов.Большинство моих селекторов имеют значение специфичности от 0,1,0 до 0,2,0 или 0,1,2
Я использую атрибуты для значений состояния и селекторы атрибутов, чтобы уменьшить количество JS, которое мне нужно написать, что позволяет CSS выполнять всю работу за меня.
BEM на помощь
OK.Некоторые люди не любят БЭМ.Но это спасло мою жизнь от сложностей CSS.У меня не было ни одной проблемы специфичности CSS с тех пор, как я начал ее использовать, за исключением случаев, когда имеешь дело со старым CSS, и даже тогда я нахожу, что его легко исправить.
BEM - это не только CSS, но и форматирование вашегоDOM разумным образом помогает CSS работать для вас, вместо того, чтобы вам приходилось работать на него.
Использование этого DOM:
<style>
.form-box--btn {
background-color: red;
}
</style>
<div>
<div>
<div class="form-box">
<form class="form-box--form">
<button class="form-box--btn">Click me</button>
</form>
</div>
<div class="other-thing">
<button class="form-box--btn">Me too</button>
</div>
</div>
</div>
Я ЗНАЮ , что мойдве кнопки красные.И пока все, кто работает над этой страницей, соглашаются следовать правилам, мы никогда не сталкиваемся с проблемой изменения цвета кнопки.
Я знаю, что это упрощенный пример, но читая больше о специфике, БЭМ и именах.Интервал расскажет вам намного больше, чем я могу в этом посте.
Небольшое легкое чтение
Вот несколько ссылок, которые больше говорят о специфике, БЭМ и интервале имен: