Как переопределить стили bootstrap?

Question

[Иосиф Гудман]

Вопрос собственно говоря в заголовке. У меня не получается адекватно переопределить Bootstrap классы. Переопределить получается только в 2 случаях:

1. Я приписываю правилу так называемый: !important.

2. Или же я задаю конкретному элементу уникальный идентификатор, но это крайне нерационально, ведь этот функционал должны реализовывать классы.

Еще такой момент, когда у меня всё же получается реализовать переопределение определенных свойств элемента(например: цвет), то потом уже перестают работать другие css свойства, например: hover.

Но как мне кажется, это всё танцы с бубном. По идее механизм каскадности должен ведь работать по другому. Если я переопределил только одно свойство, то меняется лишь оно одно, а не эффекты данного элемента, но здесь не так.

Пытался по-понятней объяснить. Надеюсь получилось.

Comments

[WapSter]

У bootstrap есть исходник в scss, в них производят кастомизацию

[Froggyweb]

css.yoksel.ru/specifity Сколько весят селекторы?
но классы бутстрап так переделывать не надо. Либо кастомизировать через SCSS дибо использовать как обертки либо писать свои классы с переопределением.
Смотря что ты хочешь получить. Нужен код и пример

[Иосиф Гудман]

Froggyweb, классы с переопределением я естественно пишу, но прокатывает только с идентификаторами(видимо приоритетность решает)))
Читаю в ответах про какой-то scss.
Сейчас буду разбираться, что за зверь такой
Хотя, как мне кажется, было бы круто тупо через свои дополнительные классы переопределять, но почему-то не получается

Answer 1

[Alex Khayev]

просто создаешь свой класс с нужными свойствами и прописываешь. Только учти, приоритет наследования задается не только "более поздним" переопределением класса.

например: .container > .button будет всегда иметь больший вес, чем просто .button, в каком бы порядке ты их не определял. Почитай про вес классов.
Соотв. чтобы заработало переопределение, нажимаешь F12 и смотришь, как задан стиль для нужного тебе объекта. Задаешь своему классу аналогичный вес и все работает.
Вот пример, каждый из переопределенных вариантов работает. Или же, если позволяет ситуация, можно в классах не указывать какой-то из бутстраповских классов, чтобы уменьшить стандартный вес

https://jsfiddle.net/hasalex/dtgwxs07/11/

Comments

[Иосиф Гудман]

спасибо за развернутый ответ. Буду теперь знать

[carboncheg]

очень понятно объяснил! спасибо!