Кто может проверить верстку / сборку лендинга на flexbox / сделать код ревью?

Question

[jupyter]

Коллеги, привет!
Сверстал лендинг на flexbox. Прошу вас (у кого есть время и желание) сделать код ревью.
Скажите что сделал хорошо, что не очень, а что совсем плохо. Приветствую конструктивную критику.
Также, просьба посмотреть блок .timeline: сквозь круглые фото идет тонкая серая линия. С ней проблема. Делаю псевдоэлементом - но при масштабировании она съезжает в сторону. Скорее всего ее надо делать через абсолютное
позиционирование, но у меня на блоке displey: flex. Буду признателен за совет как правильно сверстать эту полоску.

Ссылка на репозиторий:
https://github.com/DmitryBecker/golden_flexbox_gulp

Спасибо.

Comments

[Ranwise]

jupyter сделайте демо на github page

[Spaceoddity]

Ну да, серьёзно? Вы думаете кому-то захочется возиться со сборкой галпа и препроцессорами чтобы просто посмотреть код? Зато модно (ну уже не очень - ярн надо юзать), стильно, молодёжно))
Соберите хоть билд какой...

[Сергей delphinpro]

Я общие замечания сделаю, без оглядки на конкретный макет (я его даже смотреть не буду).

https://github.com/DmitryBecker/golden_flexbox_gul...
За это по рукам обычно бьют. Правильный путь — normalize.css.

https://github.com/DmitryBecker/golden_flexbox_gul...
Не должен body в верстке участвовать. Сделайте отдельный контейнер.

https://github.com/DmitryBecker/golden_flexbox_gul... У всех кнопок марджин. А если нет? Не должно быть у кнопок (и вообще у блоков, раз уж вы на БЭМ замахнулись) внешних отступов. Здесь тоже, и еще много где:
https://github.com/DmitryBecker/golden_flexbox_gul...

https://github.com/DmitryBecker/golden_flexbox_gul... три одинаковых элемента примиксованы к одинаковым блокам. Отличие лишь в картинке, которое и следовало вынести в отдельные стили, одно правило background-image.

https://github.com/DmitryBecker/golden_flexbox_gul... BR в верстке обычно не используют, за редким исключением. Это не тот случай.

https://github.com/DmitryBecker/golden_flexbox_gul... пустые ссылки, нет ни текста, ни aria-label (в подвале тоже)

https://github.com/DmitryBecker/golden_flexbox_gul... кнопка в форме не кнопка

https://github.com/DmitryBecker/golden_flexbox_gul... здесь бардак с именами классов

Итого:
В целом нормально, прослеживается определенная структура и упорядоченность в верстке. Но все это не доведено до полного осмысления, вроде бы заметен бэм подход, а на деле он то есть, то нет. Можно придраться к оформлению scss кода в части использования возможностей препроцессора (&), но тут наверное дело вкуса. По крайней мере стили разбиты по файлам и не перемешаны, что уже хорошо.

[sim3x]

jupyter,
Если хотите ревью сасс - собирать не нужно
Если верстки - собирать нужно

[Spaceoddity]

Сергей delphinpro,

Не должно быть у кнопок (и вообще у блоков, раз уж вы на БЭМ замахнулись) внешних отступов

Это как? А как же тогда блоки позиционировать?))

За это по рукам обычно бьют. Правильный путь — normalize.css.

Ага, зато как потом удобно в вебинспекторе посмотреть стиль элемента - пока продерёшься через всю эту простыню normalize.css

[Сергей delphinpro]

Spaceoddity, Позиционировать от контекста. Как именно — зависит от выбранной методики. Если это БЭМ, то элементами, если это Атомик, то утилитарными классами, и т.д.

На второе отвечать не буду, потому что глупость написали.

[Spaceoddity]

Сергей delphinpro,

Если это БЭМ, то элементами

Что??? Т.е. вместо того чтобы использовать возможности специально для этого предназначенного языка разметки, предполагается вводить в структуру дополнительные сущности не несущие вообще никакой функциональности (которые задолго до этого как раз вынесли в css как псевдоэлементы)? Мда... БЭМ всё глубже дно пробивает))
А если это нормальный "pure css", а не очередной велосипед от "гиганта отрасли"? В котором работа отступов изначально задумывалась для адекватного позиционирования (когда надо - схлопываем, когда не надо - нет).
По-второму, ну кто бы сомневался..
P.S. Можете не отвечать. Негоже флуд под вопросом разводить.

[Сергей delphinpro]

Spaceoddity,
Вы совершенно не поняли о чем я написал.
Ответьте на один вопросик: по вашему нормально спорить, не разбираясь в предмете? Поучитесь еще годик-другой, тогда возможно, нам с вами будет о чем подискутировать.

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

[Spaceoddity]

Сергей delphinpro, мне нравится такая позиция в дискуссии - "я умный, ты дурак". Вот и вся аргументация, собственно.
У меня тоже опыта хватает. Про какие базовые вещи вы ведёте речь? Где это написано что margin для блочных элементов (сознательно употребляю такую терминологию, это вы зачем-то тянете в спор всякие "модные штуки") deprecated?
"margin: 0 auto" - уже зло?))
теперь кошерно "align-self: center;"?

[Сергей delphinpro]

Spaceoddity, я говорил не о "блочных элементах".

[Spaceoddity]

Сергей delphinpro, я знаю, я специально сделал ремарку. За то, что все как одержимые носятся с этой методологией - Яндексу надо руки оторвать (как и Твиттеру за Бутстрап). Речь изначально шла про вёрстку, вы стали судить с позиции этой, давайте будем откровенны - очень специфичной методологии. Она абсолютно не реализует свои преимущества во многих проектах, куда её тянут с криками "вы сами рано или поздно придёте к этому".
Вы куратор тэга css. Что вы думаете по поводу каскадирования? Или надо всё верстать независимыми блоками?

[Сергей delphinpro]

Spaceoddity, но ведь это вы прицепились к БЭМу =))
Я лишь упомянул его, как один из вариантов.
Попробуем еще раз, снова.

Порядок и система в стилях должны быть. С этим, надеюсь, не будете спорить.
Какую методологию вы выберете - не суть важно. Вернемся к пресловутой кнопке, о которой я написал замечание.
.button { margin-top: 40px; ... }
Это очень плохо. Для примитивной единственной страницы — допустимо, для сайта — нет. Кнопки разные, по разному расположены, и нельзя в базовый стиль кнопки писать такое правило, чтобы потом не переопределять его везде где надо и не надо.

Лирическое отступление для полного понимания:
Читая слово "кнопка" подразумевайте любой блок на страницах.

Используя бэм, мы примиксуем в кнопке элемент родительского блока

<div class="super-block">
  <button class="button super-block__button"></button
</div>
.super-block__button { margin-top: 40px; }

Используя AtomicCSS мы напишем утилитарный класс, что то типа:

<button class="button mt40"></button>
.mt40 { margin-top: 40px; }

Используя OOCSS мы опять же разделим стили структуры и стили оформления.
И т.д.

В любом случае базовые стили кнопки будут содержать лишь ее оформление, но не положение на странице. И у вас не возникнет лишних проблем, когда заказчик вдруг скажет: "а давайте вот сюда тоже кнопочку втюхаем".

Это вам заодно и ответ о независимых блоках. С ними верстка более гибкая, ее сложнее сломать. И на всякий случай уточню, чтобы избежать лишних вопросов: независимые блоки — это не только лишь БЭМ. Я бы даже сказал, это вовсе не БЭМ. БЭМ реализует эту идеологию, но имплементации могут быть разными.

Что вы думаете по поводу каскадирования?

Что тут думать? Богатство возможностей CSS прекрасно. И им стоит пользоваться. Я не впадаю в крайности.

[Spaceoddity]

Сергей delphinpro, ну вот это уже действительно более-менее логично. В глобальные стили, такое действительно не пишут, кроме... а если это действительно фишка дизайн такая? Почему у всех кнопок не может быть жёстко заданного отступа сверху? Вполне логично и стройно. А отступы, как раз благодаря схлопыванию и дадут нам это фиксированное расстояние (если overflow: hidden не злоупотреблять) вне зависимости от контекста вставки этой кнопки. Если уж где-то и приспичит изменить этот отступ - ну переопределим стиль контекстным селектором. Вместо того, чтобы каждый раз для каждого блока прописывать этот марджин.

[jupyter]

Сергей delphinpro, Спасибо за подробный комментарий.

normalize.css - да, наверное вы правы. Но нормалайс вводить не буду, нулевые отступы перенесу просто в файл стилей. Хотя странно, в html academy на курсе фроненда к scaffolding.scss вопросов не было:

То же самое про body...до сих пор не могу понять почему он в верстке не может участвовать...много где видел что участвует...
Margin у кнопок - согласен - мой косяк. Тут вопросов нет.
Что касается БЭМ и наименования классов - буду еще допиливать.
Но у меня остался еще один вопрос:
блок .timeline: сквозь круглые фото идет тонкая серая линия. С ней проблема. Делаю псевдоэлементом - но при масштабировании она съезжает в сторону. Скорее всего ее надо делать через абсолютное
позиционирование, но у меня на блоке displey: flex. Буду признателен за совет как правильно сверстать эту полоску.

[jupyter]

Сергей delphinpro, еще к вопросу о body. В yandex спокойно пишут что можно на body стили устанавливать. Где противоречие? Они же рекомендуют вообще не использовать normalize.css.

[Сергей delphinpro]

jupyter, насчет body я неточно написал — имел ввиду, что этот элемент не должен участвовать в раскладке страницы, быть частью сетки. Любые другие стили — пожалуйста.