@slavapegaskin

Как правильно использовать БЭМ?

Всем привет! Помогите разобраться с соглашением по именованию классов в БЕМ, а именно со следующими вопросами:
1) Может ли элемент содержать другие элементы, т.е не <a> в <li>, а именно элементы с классами именованными в соответствии с соглашением по именованию классов БЕМ вложены в другие, если так можно выразиться, "элементы БЭМ"?
2) Правильно ли я понял, что блоки должны быть непосредственными потомками<body>?
3) Как мне правильно согласовать имена классов в CSS фреймворке Skeleteon, с именами "БЕМ-блоков"? (Или это делать не требуется и нужно лишь выделять отдельные сущности в виде блоков подмешивая к ним обычные названия классов)?
4) Нужно ли мне отдельно создавать css файл, чтобы определять где используется БЕМ-именование классов, а где обычное именование?
5) Можно ли применять стили к элементам, на основе контекста их употребления (например так: " .menu__item a")?
Вообщем-то и всё, спасибо всем за ответы.
P.S. И вы не могли бы привести примеры верстки (с применением соглашения по именованию классов по БЕМ), не просто ctrl+u в chrome, а именно чистый html без всякого js и css.
  • Вопрос задан
  • 461 просмотр
Решения вопроса 1
1. В методологии БЭМ не существует элементов элементов.
2. Да. Но так же можно начинать и с тега html.
3. Да, можно добавлять несколько классов. Так будет сохраняться масштабируемость css.
4. Да, так будет удобнее для последующего развития проекта.
5. Нет. Класс .menu__item уже должен быть у тега a.

Например:
https://jsfiddle.net/7msq3L8g/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Alex_Titov
1. Элементы блока вы можете вкладывать друг в друга как угодно. Не парьтесь о вложенности, БЭМ не про это. Главное, не создавайте элементы элементов.
2. Нет, совсем не обязательно. Блоком может быть например .btn - кнопка, расположенная где-то глубоко в других блоках.
3. Думаю, можно миксовать БЭМ-классы и классы фреймворков.
4. Лучше всего, на все БЭМ-блоки создавать отдельные CSS-файлы и подключать их в основной файл через import.
5. Только в крайних случаях, когда нельзя иначе. В вашем примере такой необходимости нет. Просто задайте ссылке класс .menu__link и все дела -:)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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