jetfx
@jetfx

Как заставить стили медиазапросов перебивать вложенные правила(стили) Less?

Использую такую фишку препроцессора Less как вложенность стилей. Очень часто для удобства задаю стили вложенных HTML-элементов также во вложенном виде, чтобы можно было прямо из файла стилей понимать структуру страницы.

Пример:
<div class="event">
    <h2 class="event__caption">Игра в футбол</h2>
    <p class="event__description">Сегодня состоится товарищеский матч по футболу</p>
</div>

.event {
    width: 300px;
    height: 100px;
    
    .event__caption {
      color: blue;
    }

    .event__description {
      color: green;
    }
  }


Однако есть проблема, когда занимаюсь адаптивной версткой. Вложенные стили таких элементов после компиляции превращаются в длинные комбинированные селекторы, которые оказываются более специфичными, чем стили из медиазапросов. Соответственно, если, например, в медиазапросе переопределить цвет для заголовка карточки события .event__caption { color: red}, новый цвет не сможет перебить старый. Разумеется, стили медиазапросов подключались мной после скомпилированных стилей Less. Сейчас решаю данную проблему добавлением !impotant к стилям из медиазапросов. От вложенности Less отказываться не хочется, так как удобно. Подскажите, пожалуйста, есть ли более правильный метод решения данной проблемы? Чувствую, у меня получился костыль.
  • Вопрос задан
  • 45 просмотров
Решения вопроса 1
Seasle
@Seasle Куратор тега CSS
\( ゚ヮ゚)/
.event {
  width: 300px;
  height: 100px;
  
  &__caption {
    color: blue;
  }

  &__description {
    color: green;
  }
}

@media screen and (max-width: 768px) {
    .event {
        &__caption {
            color: red;
        }
    }
}

или
.event {
  width: 300px;
  height: 100px;
  
  &__caption {
    color: blue;
    
    @media screen and (max-width: 768px) {
      color: red;
    }
  }

  &__description {
    color: green;
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
пиши так, чтобы вложенности не было:
.event {
    width: 300px;
    height: 100px;
    
    &__caption {
      color: blue;
    }

    &__description {
      color: green;
    }
  }
Ответ написан
sharomet
@sharomet
Front-End
Судя по коду, вы используете БЭМ и что то с ним напутали (тут вложеность вообще ненужна):
БЭМ:
.event {
    width: 300px;
    height: 100px;
    &__caption {
      color: blue;
    }

    &__description {
      color: green;
    }
}


спокойно перебиваем в css:
@media(max-width: 767px) {
.event__caption { color: red}
}


Если уж очень нужно, то можно использовать !important - он перебьёт всё, но его нужно использовать только в крайних случаях. А лучше вообще не использовать.

@media(max-width: 767px) {
.event__caption { color: red !important}
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы