Хорошая ли практика писать медиа-запросы в классе?

Question

.wrapper {
  margin: 100px 100px 80px 100px;

  @media (min-width: 992px) and (max-width: 1199px) {
    margin: 50px 40px 50px 40px;
  }
  @media (max-width: 768px) {
    margin: 20px 20px 20px 20px;
  }
}

Answer 1

Из плюсов - компонент становится независимым, его можно применять во всех проектах с минимумом действий для интеграции. Из минусов - будет много одних и тех же media queries для всех таких компонентов, как итог - больше CSS. Если использовать JS-фреймворки вместе с ленивой загрузкой компонентов, когда код компонента загружается только в тот момент, когда компонент понадобился, такой подход приемлемый, т.к. если брать CSS отдельного компонента (в особенности если CSS как и код компонента минифицирован), он загрузится достаточно быстро. Вообще этот подход достаточно популярен. Без ленивой же загрузки, не рекомендую использовать его, т.к. общий вес CSS будет многократно увеличен - лучше один раз написать media-queries под нужные точки, и внутри написать стили для адаптивности. К примеру я в таких случаях создаю adaptive.scss и пишу туда всю адаптивность, затем импортирую его в главный файл, и конечно это всё потом минифицируется.

БЛОГ НА HUSL

Хорошая ли практика писать медиа-запросы в классе?

Ответы (1 шт):