не работают медиа запросы в sass верстая по бэм
столкнулся с такой проблемой верстая макет по БЭМ и делая медиазапросы в sass файлах:
@media (max-width: 1200px)
.interview
padding-right: 30px
и код не работает в панели разработчика как зачеркнутый
@media (max-width: 1200px)
.brif .interview
padding-right: 30px
и код работает
то есть чтобы стили применились мне нужно указать не только этот класс а еще один, более старший. хотя в видео у чувака все работает и с одни классом применяется. код как у него 1 в 1 но у меня почему-то такой баг
и это не единожды вот еще примеры:
@media (max-width: 1200px)
.interview
&__title
font-size: 18px
margin-bottom: 16px
не работает
.brif .interview
&__title
font-size: 18px
margin-bottom: 16px
работает
@media (max-width: 768px)
.cards
justify-content: center
не работает
@media (max-width: 768px)
.price .cards
justify-content: center
работает
кто может подсказать в чем причина и проблема? сам я начинающий заманался не могу найти ответ
Ответы (1 шт):
Дело все из-за приоритетности. Поменяйте местами код или дайте больше вес селектору.
Подробнее:
Каждый селектор имеет свою массу. Самая большая масса происходить от id, маленькая от названия тега. Есть масса одинаковая, выбирается тот, какой находится в файле ниже.
Чтобы увеличить массу, достаточно указать больше информации (родителя, второй класс(если имеется) ило название тега.
Например:
.cards можно заменить на: div.cards или же .cards[class]
Немного информации:
1. Не важно сколько классов будет, вы не сможете переопределить селектор содержащий id, без использования !important или прописав в атрибут style.
2. Прописывать в !important и style только в случае, если никак иначе нельзя сделать.