Всем привет.
Есть 2 способа писать @media-квери в Sass-файлах.
1 способ (За него топят верстальщики):
.some-class {
font-size: 14px;
}
@media (min-width: 768px) {
.some-class {
font-size: 16px;
}
}
@media (min-width: 1024px) {
.some-class {
font-size: 18px;
}
}
Доводы верстальщиков:
- при наличии даже небольшой вложенности из псевдоселекторов, псевдэлементов и классов-модификаторов, иных утилитных миксинов читаемость такого кода выше, большая вложенность - это плохо и ухудшает поддержку
- компоненты, судя по вашим словам (это о программерах), должны быть небольшие, а значит и стилей будет немного -> отпадает единственная существенная жалоба, что лень скроллить
- иногда бывает так, что какое-то поведения для нескольких блоков нужно только в одном интервале медиа и оно нетипично, например хедер в виде выпадашки на мобильных устройствах, при данном способе, такое легко реиспользовать, легко править спустя время, потому нетипичное поведение прописано для всего в одном месте, по второму способу, придется ковыряться в куче классов, чтобы понять, почему так работает
- это просто два варианта одного и того же, у обоих есть + и -
- верстальщиков, использующих этот подход, тупо больше, и именно они пишут css
И есть второй способ (за него топлю лично я и программеры):
.block {
float: left;
width: 250px;
@include respond-to(handhelds) { width: 100% ;}
@include respond-to(medium-screens) { width: 125px; }
@include respond-to(wide-screens) { float: none; }
}
Наши доводы: Такой подход немногословен, нет повторения одного и того же класса в разных частях файла, можно (почему бы и нет?) использовать любую вложенность и не очень-то это и ухудшит читаемость
И если при этом варианте придется ковыряться в куче классов, то при первом варианта придется ковыряться в куче @media-query
Какой способ лучше, учитывая, что используется Sass и Vue-компоненты?
Простой
