Как выставить приоритет стиля?

Question

[Андрей]

Есть сайт. К нему подключен мой styles.css

Там описаны стили для
<p>, <a>, <li>
и так далее.

К этому же файлу подключен с недавних пор bootstrap.min.css, в котором описаны стили для тех же тегов.
Стиль бутстрапа перекрывает мой стиль, из-за этого весь сайт выглядит криво-косо.

Пробовал писать !important, но ведет он себя не совсем адекватно. Не всегда срабатывает.
Пробовал подключать свой файл после bootstrap.min.css. Все равно не перекрывает.

Может быть есть какой-то способ оставить только нужные стили в bootstrap.min.css?
Если да, то как их выявить автоматически? Скрипт просмотра берет стилей 50, не меньше. Вручную это нереально долго.

Вопрос: как выставить приоритет моему styles.css?

Comments

[Yustas Alexu]

Вы пробовали вообще гуглить? Как переопределить стили бутстрапа?

[Андрей]

Yustas Alexu: Пробовал. Именно этого я не находил. Вы читали ответ? Там предлагается исправлять все параметры. Или править исходники бутстрапа. И то и другое я написал в своем вопросе. И то, почему так делать я не хочу.

[Yustas Alexu]

Андрей: Плохо читали ответ. В самом начале говорится о специфичности. Это как раз то, что нужно.

[Yustas Alexu]

Андрей: Все остальное это грязные хаки. Читайте про приоритет/вес/специфичность селекторов.

[Андрей]

Yustas Alexu: Я знаю о специфичности селекторов и читал эту статью. Перечитал ещё раз. Ответа на свой вопрос я не увидел. Я понимаю, что лучшим решением будет копирование в свой style.css только используемых стилей из бутстрапа. Но беда в том, что там на 1 селектор может идти 10 строк кода , разбросанных по всему файлу.

[Yustas Alexu]

Андрей: не надо копировать из файла. Копировать селектор надо из консоли браузера.

[Андрей]

Yustas Alexu: Точно. Спасибо большое. Почему-то до самого не дошло.

[Yustas Alexu]

Андрей: и переопределять надо только то, что нужно. Неужели это так сложно понять?

[Yustas Alexu]

Андрей: пожалуйста

[Андрей]

Yustas Alexu: Я это понял сразу. Я не знал как это сделать без огромной траты времени. Вы с консолью подсказали. Я почему-то до этого не додумался.

Answer 1

[iBird Rose]

1) подключить ваш style после бутсрапа
2) getbootstrap.com/customize здесь убрать галочки с Typography. ну и еще остальные можете поубирать и оставить только то для чего вам нужен бутсрап.

Comments

[Андрей]

1) Я написал, что пытался подключить позже. Смысла 0. Бутстрап все равно перекрывает.
2) Кастомизацию пробовал. Скрипт фотографий не мой. Как определить, что ему надо? По классам смотреть?

[iBird Rose]

Андрей Костин: кастомизируй правильно значит. для чего тебе бутсрап? если для сетки - то убери все галочки кроме Grid system

Answer 2

[Billy Milligan]

Уже сказали
1) подключить ваш style после бутсрапа
2) на сайте можно выбрать элементы которые вам нужны и в css будут только они
Если вам все же нужно их именно переопределить(это займет больше времени), а не переписать некоторые, то Каскадирование

То есть, если у вас:
.card {...}
То:
div.card{...}
Имеет > силу

Так что смотрите исходники и переопределяйте, потому что большинство стилей в bootstrap выглядят так

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

Comments

[Андрей]

Спасибо. Тоже думаю над этим вариантом. Но приписывать каскады к 200+ селекторам - это, мягко говоря, долго.

Answer 3

[Ghazsh]

Очень хорошо описано почему стоящие ниже стили не перекрывают те, что шли раньше описано здесь www.quizful.net/post/specificity-of-css-selectors
Есть смысл посмотреть, как указан стиль в бутстраповском файле и сделать свои правила более приоритетными.
Но, лучше взять только необходимые компонеты из BS. Скорее всего, кроме сетки вам ничего не надо, а вот пользователям приходится грузить лишние стили.