2 способа писать @media-query используя Sass в компонентах Vue.js?

Question

[CJRoman]

Всем привет.

Есть 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-компоненты?

Comments

[alvvi]

А зачем во втором варианты миксины?

[game802]

странно, но я верстаю и я тоже за второй вариант, так как он более яснее и понятнее, и лучше (во всех смыслах этих слов).

[CJRoman]

Илья Ростопка, Затем же, что и в первом.
Вот код миксина

@mixin respond-to ($device) {
  @if $device == mobile {
    @media (max-width: 768px) { @content; }
  }
  @else if $device == tablet {
    @media (min-width: 768px) { @content; }
  }
  @else if $device == desktop {
    @media (min-width: 1024px) { @content; }
  }
  @else if $device == hd {
    @media (min-width: 1200px) { @content; }
  }
}

[ⓒⓢⓢ]

Суть вопроса ясна, но мне тоже не понятно, почему сравниваются "голые" запросы с миксинами, если говорим о легко читаемости и сравнить одинаковые подходы:

.some-class {
  font-size: 14px;
}
@import handhelds;
@import medium-screens;
@import wide-screens;

.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; }
}

upd. Миксины заменил на импорт. Не очень то и мешает чтению, но опять же, всё зависит от стандартов в компании\заказчика

[alvvi]

CJRoman, ну так очевидно же, что можно и без миксина обойтись, сравнение некорректное.

[ⓒⓢⓢ]

Такой подход немногословен, нет повторения одного и того же класса в разных частях файла, можно (почему бы и нет?) использовать любую вложенность и не очень-то это и ухудшит читаемость

Да просто в каждом адаптивном блоке будет дополнительно по 2-5 sass строк миксинов

.block1 {
  float: left;
  width: 250px;
  @include respond-to(handhelds) { width: 100% ;}
  @include respond-to(medium-screens) { width: 125px; }
  @include respond-to(wide-screens) { float: none; }
}
.block2 {
  float: left;
  width: 250px;
  @include respond-to(handhelds) { width: 100% ;}
  @include respond-to(medium-screens) { width: 125px; }
  @include respond-to(wide-screens) { float: none; }
}
.block3 {
  float: left;
  width: 250px;
  @include respond-to(handhelds) { width: 100% ;}
  @include respond-to(medium-screens) { width: 125px; }
  @include respond-to(wide-screens) { float: none; }
}

Answer 1

[tema_sun]

Я за второй. Но делать надо так, как договорились с командой.

Answer 2

[alvvi]

Если честно, не понимаю в чем приемущества первого варианта, для меня он неудобен и менее логичен чем использование вложенности. Среди доводов ваших верстальщков не нашел каких-то критических, если использовать БЭМ вложенности в любом случае не уходит дальше двух уровней, да и читабельность даже при 4 уровнях вполне нормальная, если на наполнять код костылями и излишне сложными селекторами.

Answer 3

[Богдан Духевич]

Что за ересь? Что за верстальщики советуют 1й способ - динозавры? Ау, с добрым утром, мы в 2017-м уже!
Естественно второй способ лучше. Особенно в контексте SASS и Vue.

П.с. Блин, ну насмешили вопросом, ей богу. Очень сочувствую Вам, что приходиться работать с такими ископаемыми верстальщиками. Видимо они уже достигли своего предела, бедняги.

Answer 4

[Ankhena]

Я за первый - мне так виднее картина целиком, не что происходит с отдельным блоком, а в чем суть всех перестроений.
Но по большому счету без разницы, как договорились. В инструментах разработчика все видно хоть так, хоть сяк. Ctrl+F по проекту/стилям тоже работает прекрасно.

Answer 5

[Арсений Матыцин]

Поздновато, но не суть. Ваши верстальщики ебобо.

Верстальщик со стажем в 10 лет.