БЭМ ревью

Форум /

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

В качестве примера для верстки я взял одно старое Яндексовое тестовое задание - https://yandex.ru/jobs/vacancies/dev/dev_des/

Моя реализация - https://github.com/koloskof/bem-taxi

Буду благодарен!

8 years ago

tadatuta

Макет разбит на сущности вполне здраво. Но если придираться, то:

Ссылки стоило делать с помощью блока link — сейчас в шаблонах копипаст
Иконки могли бы быть частью ссылки, сейчас не кликабельны
service__name по задумке — это не просто ссылка, а link + dropdown со стрелочки (поэтому она не должна быть просто фоном, а отдельным элементом)
HTML-сущности (типа —) стоило бы заменить на UTF-8 символы

Ну и можно было бы доделать поведение: оживитить рейтинг и переключатель Откуда Куда (в процессе станет понятно, что и BEMJSON API рейтинга нужно чуть улучшить, а для переключателя потребуется кнопка, а не только иконка).

8 years ago

voischev

Не плохо. Тоже — если придератьс, я бы mix писал ниже block ))) блок тут важнее чем микс. А еще кажется местами слишком много блоков без которых можно было обойстись. Но это надо больше погружаться в задачи)

8 years ago

koloskof

Спасибо! Детали учту. Буду дальше совершенствоваться) Привыкаю к самому подходу/инструментам. Осталось несколько базовых вопросиков:

Может ли примиксовываться несколько блоков? Как будет выглядеть mix? Массив?
Стоит ли вытаскивать в отдельные блоки часто используемые миксы, чтоб их не дублировать? В коде у @tadatuta, как-то видел вынесенный .clearfix, который потом примиксовывается.
Что нужно написать в моем случае в .borschik, чтоб в сборке были .png файлы с моих блоков?
На одном из сервисов Яндекса я видел код вроде этого:

<div class="component">
    <div class="component__inner">
        <div class="component__content">
            <div class="component__name"></div>
            <div class="component__text"></div>
        </div>
    </div>
</div>

И был немного озадачен тем как может выглядит bemjson этой конструкции.

8 years ago

apsavin

Почему-то никто ничего не написал про имя блока "ad".

8 years ago

tadatuta

1) Может ли примиксовываться несколько блоков? Как будет выглядеть mix? Массив?

Да.

2) Стоит ли вытаскивать в отдельные блоки часто используемые миксы, чтоб их не дублировать? В коде у @tadatuta, как-то видел вынесенный .clearfix, который потом примиксовывается.

Да. Готовый блок clearfix есть в bem-core: https://ru.bem.info/libs/bem-core/v2.8.0/desktop/clearfix/

3) Что нужно написать в моем случае в .borschik, чтоб в сборке были .png файлы с моих блоков?

Уточни подробнее, что хочется получить в результате.

8 years ago

koloskof

@apsavin, отталкивался от того что ad = advertisement (это принципе даже не сокращение, а в ходу даже в речи). Или ты что-то другое имеешь ввиду?

8 years ago

koloskof

@tadatuta, хотелось бы чтоб в dist сборке отображались мои изображения http://joxi.ru/82Q7P0Ju387Xrd

8 years ago

tadatuta

https://github.com/koloskof/bem-taxi/pull/1

8 years ago

koloskof

Шикарно! Большое спасибо

8 years ago

apsavin

@koloskof да, на мой вкус, чем меньше двусмысленности, тем лучше, но это, разумеется, не очень важно.

8 years ago

tadatuta

Если писать явно advertisement, всякие резалки рекламы могут целиком выкосить узел (впрочем я и за ad бы не поручился).

8 years ago

yusk90

Всем привет. Сегодня на вебинаре на geekweekconf видел использование микса типа .page .page__home на тэге body, т.е. на одной дом-ноде и блок и элемент одновременно. Почему не используется модификатор? И раз такое дело, можно меня тоже поревьюить?)) Вот - https://github.com/yusk90/surfhouse, это собранный вариант, без исходников. Заранее спасибо!!

8 years ago

tadatuta

@yusk90

использование микса типа .page .page__home на тэге body, т.е. на одной дом-ноде и блок и элемент одновременно. Почему не используется модификатор?

Потому что это разные по смыслу вещи — там нет задачи помодифицировать page. Причина такого микса в этом конкретном случае в том, что с точки зрения шаблонов page — это вся обвязка страницы, включая, доктайп, теги <html>, <head> и т.д., а page__body — это только <body>. При этом с точки зрения использования, скажем, в JavaScript, нам удобно иметь класс page на <body>.

И раз такое дело, можно меня тоже поревьюить?

В целом более-менее похоже на правду, но такие штуки мы, конечно, не котируем ;) В плане JS я бы порекомендовал посмотреть в сторону https://github.com/hoho/jquery-bem

8 years ago

yusk90

Спасибо за ревью. Кстати, спасибо за доклад сегодняшний, очень интересно. А такой случай, опять же из моей верстки: Есть кнопки верхнего слайдера. там они стоят расположены рядом:

<button class="slider-control slider-control--prev-main" type="button"><i class="fa fa-chevron-left"></i></button>
<button class="slider-control slider-control--next-main" type="button"><i class="fa fa-chevron-right"></i></button>

и нижнего слайдера (инстаграм):

<button class="slider-control slider-control--prev-instagram" type="button"><i class="fa fa-chevron-left"></i></button>
<button class="slider-control slider-control--next-instagram" type="button"><i class="fa fa-chevron-right"></i></button>

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

8 years ago

tadatuta

Вроде и так нормально, но если у prev и next есть что-то общее между верхним и нижнем слайдерами, то можно это общее вынести в отдельный модификатор:

<button class="slider-control slider-control--prev slider-control--instagram" type="button">

Чтобы оставлять комментарии, необходимо авторизоваться.