Что менее времязатратно в адаптации наследование или строгая изоляция?

Question

[Anonimmus]

Доброго времени суток) я лишь поинтересоваться решил)) прошу лишь адекватной беседы.

На днях пригласили в филиал студии на подмогу. Так вот дизайнер в моем филиале вырисовывает все разрешения 320 545 768 1024 1450 и выше 1600. По умолчанию 1920. В верстке приходится прописывать брейкпоинты и подгонять под дизайн все элементы. (это чуть левее, это не похоже итд) Такой подход мне не нравится много рутины, но получается красивенько. 100 часов на магазин.

В филиале же, который открылся недавно (процессы еще не налажены) - дизайнер не заморачивается и рисует вид мобильного и пк версии.
По времени в филиале страницы интегрируются и верстаются в два раза быстрее, итог резиновый сайт по 50-60 часов

Вопрос а как у вас?
Во многих обуч.роликах дизайн особо от пк версии не отличается разве что лишь компановкой блоков и бургер меню.

Дополню вопрос, что здесь будет эффективно изолированные блоки (удобно при больших колвах брейкпоинтах)
Блок {
Стилизация
Элемент {}
}
Блок 2 {
Стилизация
}
или же матрешка (как блок с наследованиями и дополнениями как в бэм)
Класс{ стил } класс_крассный {модиф}
Класс{ наслед} класс_черный итд {модификатор}

Comments

[Ankhena]

А в каком виде вам предоставляют дизайн сайта?

Также как и вам. Разные дизайнеры по-разному.
И я могу этому только радоваться.

Но вопрос удалят.
Во-первых, потому что опросы тут запрещены.
Во-вторых, потому что его нужно конкретизировать, чтобы было понятно, в чём вопрос-то.

[Anonimmus]

ChairfaceChippendale, есть что сказать говори. Не трать не мое не свое время.

[Kirgus]

Anonimmus, ни моё, ни своё*

Answer 1

[Алексей Дубровин]

Для себя я разработал такую стратегию работы:
1) Договариваемся с дизайнером конкретно в этом случае по отступам.(Мы должны знать что и на каких устройствах как отображается. И это не только про медиа запросы.
2) Я использую БЭМ, тк как тоже уже вывел свой стандарт и есть много наработок, которые позволяют быстро их использовать. Мне достаточно удобно читать.
3) По поводу медиа запросов, отступов и прочее. Пример будет на CSS, в своей работе я использую SASS и что-бы привести код как к примеру ниже, приходилось много танцевать с бубном.

/* Определяем базовые отступы.*/
:root{ 
--main-padding:10px;
}
/* Если нам нужно изменить отступ от медиа запроса для всех элементов. */
@media screen and (max-width:1600px){
:root{
--main-padding:20px;
}
}
/* Если нам нужно будет в конкретном элементе изменить отступ под определённый медиа.*/
@media screen and (max-width:1600px){
 .unique{
--main-padding:23.3px;
}
}

Работает это так. Переменные наследуются всем дочерним элементам. Тк же тут есть переопределение. Что позволяет быстро и удобно редактировать то что надо.
Тк же переменные могут хранить значение других переменных.
Обычно в root я храню все базовые дефолтные значение.
Потом в конкретных элементах я создаю свою переменную, в которой я ссылаюсь на корневую.

Comments

[Одиночка Айс]

23.3px;

лол

[Юрий]

Одиночка Айс, смех смехом, а я в макетах линии по 0.25 пикселя встречал ))

[Алексей Дубровин]

Юрий,
Это для примера специфичности)
Если в дизайне такие размеры то нужно говорить по мужски.

[Алексей Дубровин]

Александр, никак

[Алексей Дубровин]

Александр,
Нууу я прям даже не увижу эту линию)
Если уважать людей с цветовыми и глазными дефектами вопрос о том, что линия меньше 1px в принципе не возникает.

[Anonimmus]

Алексей Дубровин,
Бэм юзаю. Scss также. Уже дошло до того что я отдельно вырисовываю типографику.
Добавляю пару модификаторов и два одинаковых блока могут быть разными и верными на разных сайтах.

Спасибо за совет, я попробую модифицировать по вашей аналогии свои наработки