Правильно ли я понял суть БЭМа?

Question

Станислав Ботев @StasBotev

Gabin

Правильно ли я понял суть БЭМа?

Верстаю потихоньку сайт для себя самого. Читаю то одно, то другое. Узнал про БЭМ и решил применить его принципы на практике. Посмотрите код, правильно ли я использовал идею Блоки-Элементы-Модификаторы?
Страничка На домен не обращайте внимания. Если есть косяки по вёрстке или стилям, пожалуйста, подскажите, чтобы уяснял ошибки сейчас и исправил.

Вопрос задан более трёх лет назад
506 просмотров

1 комментарий

Подписаться 1 Оценить 1 комментарий

Решения вопроса 1

9 комментариев

Станислав Ботев @StasBotev Автор вопроса

Спасибо за скорый ответ!
Любой должен иметь название?
должен означать БЭМ? Т.е. первым должен идти "блок", затем "элемент", потом уже "модификатор"? Нельзя "блок-элемент-элемент"?
Следовательно, я неправильно понял суть, буду штудировать дальше.
Сайт хостится на конструкторе, где нет возможности подключать свои .css, поэтому прописываю в файле. В будущем куплю хостинг.
Три с минусом? Для меня это похвала. Восьмой день учусь вёрстке.

Написано более трёх лет назад
Сергей Горячев @webirus
Любой должен иметь название?

БЭМ расчитан на то, чтобы в дальнейшем можно было без проблем его поддерживать.
Вот тебе пример, ты завтра решишь все заголовки h2 сделать красного цвета, но один захочешь оставить черным.
Если у h2 будет класс pageTitle например, ты сможешь использовать просто модификаторы pageTitle--red, pageTitle--black.

должен означать БЭМ? Т.е. первым должен идти "блок", затем "элемент", потом уже "модификатор"? Нельзя "блок-элемент-элемент"?

Нет, именно так и должно быть, "блок__элемент--модификатор" (либо "блок--модификатор"), собственно, так это и было задумано.
Но никто не запрещает миксовать таким образом.

<div class="header"> <div class="header__item logo"> <div class="logo--dark"></div> </div> </div>

Как видишь, у меня средний див является и блоком logo и элементом header__item.
Каждый из них нужен для определения своих стилей.
Написано более трёх лет назад
alvvi @alvvi

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

Написано более трёх лет назад
Сергей Горячев @webirus

Илья Ростопка: А если нужно будет сделать еще один логотип, скажем через полгода, в подвале сайта, но он будет отличаться по размеру. Что ты будешь делать? Обертку копировать? Логичнее выносить самостоятельные элементы в блоки.

Написано более трёх лет назад
alvvi @alvvi

Sergey Goryachev: если я вынесу их в блоки, то как их позициноировать, ведь блок не должен иметь внешнюю геометрю? Создавать новые элементы у родителя?

Написано более трёх лет назад
Сергей Горячев @webirus
Илья Ростопка: Выше же пример конкретно написан.

<div class="header"> <div class="header__item logo"> <a href="#" class="logo__link"></a> </div> </div>

элемент header__item как обертка. logo это блок. внутри лого что-то должно же быть. например a.logo__link или img.logo__image. совсем пустой logo это по всем канонам неправильно.
Написано более трёх лет назад
alvvi @alvvi
Sergey Goryachev: ладно, видимо нужно привести свой пример, чтобы вы поняли, о чем я говорю
<div class="header"> <div class="header__item slider"> <img class="slider__img" /> <span class="slider__thumbnail">Hello World</span> </div> </div>

Вот, по сути header__item определяет внешнюю геометрию для слайдера. А теперь допустим, что ничего кроме внешней геометрии блоку slider и не надо и никаких общих свойств у slider__img и slider__thumbnail естественно нет. Вроде бы с точки зрения БЭМ-а все отлично, но класс slider то получается остался без стилей.
Написано более трёх лет назад
alvvi @alvvi

Sergey Goryachev: так он не пустой с точки зрения html, он пустой в CSS, потому что не имеет стилей оформления, а за его геометрию отвечает другой класс, элемент его родителя.

Написано более трёх лет назад
Сергей Горячев @webirus

Илья Ростопка: И пусть остается. Ничего страшного. Зато если нужно будет, всегда можно будет добавить, не трогая разметку.

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Средний
Какие есть способы организовать редкое добавление статей на сайт?
- 1 подписчик
- 18 часов назад
- 99 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать авто подтверждение?
- 2 подписчика
- 21 час назад
- 130 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как реализовать анимацию текста при выходе за границу блока?
- 2 подписчика
- вчера
- 109 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему не работает ссылка в HTML?
- 2 подписчика
- вчера
- 130 просмотров
1

ответ
CSS

Простой
Как зафиксировать блок с позиционированием от родительского контейнера?
- 2 подписчика
- вчера
- 116 просмотров
1

ответ
HTML

Простой
Почему не подключается спрайт SVG?
- 1 подписчик
- вчера
- 70 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как определить величину перекоса transform skew?
- 1 подписчик
- 15 апр.
- 64 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как исправить прыгающий контент у сайта?
- 2 подписчика
- 15 апр.
- 214 просмотров
1

ответ
HTML

+1 ещё

Средний
Как сделать чтобы было по 2 блока на строке, а не сразу все 4?
- 2 подписчика
- 15 апр.
- 72 просмотра
1

ответ
CSS

+1 ещё

Простой
Как сделать анимированное закрытие модального окна bootstrap?
- 1 подписчик
- 14 апр.
- 65 просмотров
0

ответов
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Тестирование фич с прописанными критериями приемки+проведение регресса

18 апр. 2024, в 09:52

1000 руб./в час

Верстка сайта из Figma

18 апр. 2024, в 09:51

30000 руб./за проект

Разработать мини-приложение Windows 7-11, Linux,Macos

18 апр. 2024, в 07:22

45000 руб./за проект

Нет не поняли. Я бы вам посоветовал забыть все, что вы якобы знаете про бэм, и поробовать еще раз. Вот неплохая статья https://habrahabr.ru/post/203440/ и ещё

Answer 1 · 2017-04-10 15:57:21

Не вижу БЭМа совсем. От слова вообще.
Что за дивы без классов <div></div>? Почему у заголовков нет класса <h2>Мои навыки:</h2>?
По БЭМ каждый тег на странице должен быть с классом, который является либо блоком, либо элементом.
https://frontender.info/MindBEMding/

main_section-first_images
Это что? Элемент с модификатором, у которого есть элемент?

Разделение "блок__элемент" с двумя нижними подчеркиваниями.
Разделение "блок--модификатор", "элемент--модификатор" с двумя дефисами (новая версия).
Или по первому варианту Яндекса с одним дефисом.

Стили не надо писать в самом файле, лучше подключать через link.
Тут есть небольшая оговорка, касающаяся оптимизации, стилей для первого экрана, но в данном случае, это не важно.

В целом, на три с минусом можно оценить данную верстку.
Но повторюсь, к БЭМу это не имеет никакого отношения.

Правильно ли я понял суть БЭМа?

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

Минуточку внимания

Войдите на сайт