@paper_castle
Фрилансер

Как правильно внедрять БЭМ?

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

1. Как корректно/адекватно совмещать именование с Bootstrap?
Используем что-то вроде block__element_mod col-md-6, но выглядит как-то не комильфо. Использовать "оБЭМленную" версию бутстрапа или есть какие-то соглашения на такой случай?
2. При использовании em пришел к выводу, что для действительно независимого использования блоков нужно каждый раз определять font-size в px на уровне блока и наследоваться уже от него. Нормальный ли такой подход, мб есть более адекватные варианты?
3. При верстке "мегайдизайнерских" лейндингов нередко сталкиваюсь с тем, что у одинаковых по сути блоков в разных местах используются разные шрифты. Переопределять шрифты как модификатор соотв. элемента?
И вытекающий момент - соотвественно все модификаторы (от разных блоков) в будущем добавляются к той же секции стилей блока?
4. При работе с существующими проектами, особенно на CMS используется уже полно готовых классов, в некоторых случаях, классы идут из ядра (напр. меню в WP, да и многое в нем же). Т.е. по хорошему для соблюдения одного стиля в этом случае придется писать доп. код. формирования шаблона с нужными мне классами? Или тот самый случай, когда "работает-не трожь" ?)
5. За основу использую классический вариант именования, но периодически встречаю two-dashes-style.
Популярен все-таки классический вариант?
  • Вопрос задан
  • 589 просмотров
Пригласить эксперта
Ответы на вопрос 3
@AlexS94
Попытаюсь ответить вам по пунктам, так как сам в своё время задавался теми же вопросами.

1. Если говорить об удобстве - читаемость хромает, но на прямую в разрез с методологией это не идёт. Если существует "оБЭМленый" Bootstrap и он ничем не уступает - используйте. Это по-настоящему продуманная и современная библиотека компонентов, соответствующая стандартам доступности. Отдельных соглашений на такие случаи не знаю.

Для себя решил отказаться от Bootstrap, чтобы глаз нервно не дёргался, при взгляде на "винегрет" из разных именований. Компенсирую это разработкой библиотеки собственных компонентов, руководствуясь тем же Bootstrap и лучшими практиками.

2. Касательно использования em: рекомендую ознакомиться с этой статьёй
Пришло время попрощаться с единицей измерения px
Для блоков отдельно назначать font-size в px не нужно. Попробуйте правильно использовать rem, взяв за константу, что он должен быть по умолчанию 16px. Если нужно будет - отвечу подробнее.

Лично я использую em в медиа-выражениях и в случае крайней необходимости в блоках.

3. В случае чистого БЭМ - создайте блок с одним шрифтом и другим и используйте его как микс.

4. Если честно, стараться использовать готовые решения CMS можно, но я бы не рекомендовал. Когда работал с WP, всё время кастомизировал классы и вывод шаблона. На Битрикс с этим проще, можно даже собственный класс назначить для WISYWIG редактора.
Вопрос в том можете ли вы себе позволить такую кастомизацию или нет. Если это требует сверх ресурсов - оно того не стоит.

5. Я использую альтернативное именование, которое прижилось лучше всего в англоговорящих странах .block__element--modifier. На мой взгляд оно читаемее.

Вообще для расширения "БЭМ кругозора" рекомендую ознакомиться с этими статьями
More Transparent UI Code with Namespaces
Battling BEM CSS: 10 Common Problems And How To Av...

Я в своей работе на данный момент использую расширенный БЭМ, так называемый BEMIT (BEM + ITCSS). Для обычных сайтов - этого хватает с головой, в случае современного реактивного фронтенда требует обсуждения с командой и более глубоко понимания в проектировании АНБ (абсолютно независимый блок).

Надеюсь, что смог вам помочь, так как сам на решение этих вопрос вопросов потратил продолжительное время.
Ответ написан
profesor08
@profesor08
Ну вот, желание использовать БЭМ, породило кучу проблем. Нет БЭМ - нет проблем!

Используй styled-components или модульные стили. Если нет возможности, то используй scss, там нет проблем, которые навязывает БЭМ и героически решает. Если используешь чистый CSS, то не используй, а используй scss.
Ответ написан
@ijakparov
1. Оставляйте как есть
2. На блок не должна влиять "внешняя среда"
3. Бить по голове дизайнеров чтобы так не делали. Да делать модификаторы под шрифты.
4. Не трогай
5. -- у буржуев, _ в СНГ. В целом используй что привычней.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы