Задать вопрос
@avprinciple
html

Верстка по BEM. Файловая структура. Как присваивать классы независимому блоку?

Структура папок
/src
  /blocks
     /header
     /logo


Файл logo.html в отдельной папке logo (block).
<div class=logo>
  <img class="logo__image" src='/'>
</div>


Этот независимый блок logo - нужен в header.html
Я подключаю через Gulp-plugin в файле header.html 

<div class=header>
  <h2 class="header__title"></h2>
  @@icnlude('../blocks/logo/logo.html')
</div>


И тут, например, нужно чтобы в header, logo выглядело немного иначе. То есть миксую класы, добавляю .header__logo =

Но добавляю я этот класс (header__logo) в папке - независимому блоку "logo".
Потому что в файле header.html, я просто импортирую logo.

<div class="logo header__logo">
  <img class="logo__image" src='/'>
</div>


А если logo нужен в footer, в footer-e свои классы, я добавлю .footer__logo =
Опять же я добавляю класс в файле logo.html

Это неправильно, так как они - классы (их стили) будут конфликтовать.
И как тогда правильно делать? Копировать код из папки/блока logo и вставлять уже в header.html / footer.html / any.html, и уже им присваивать нужный класс?
Или в scss/css писать: 
.header .logo {
  logo style for header
}

.footer .logo {
  logo style for footer
}


Как верно?
  • Вопрос задан
  • 1212 просмотров
1 комментарий
Подписаться 6 Простой 1 комментарий
Решения вопроса 1
Zraza
@Zraza
Помог ответ? Отметь решением!
Дисклеймер: Я не гуру БЭМа и давно не заглядывал в их доки. Данные стоит перепроверить.

На мой взгляд, есть 3 варианта, которые не противоречат методологии:
1) Кладем .logo внутрь элемента .header__logo, стилизуем header__logo. Всё просто, не требует ничего специального.
2) Вешаем .header_logo на .logo . Шаблонизатор (в данном случае - галп плагин) должен уметь прокидывать пропсы к подключаемым файлам, т.е. должно выглядеть типа `@include('../blocks/logo/logo.html', {"className": "header__logo"})`. По БЭМу блок может быть элементом другого блока
3) Переопределяем стили типа `.header .logo`. БЭМ, насколько я помню, тоже позволяет переопределять стили в зависимости от контекста.
4) Делаем модификатор, например `logo--highlited`, который уже стилизуем в рамках блока. Так же шаблонизатор должен это уметь.

Единственно-правильного способа, как мне кажется, нет.
Для позиционирования я, обычно, применяю 1-й способ. Для изменений стиля/цветов только в данном конкретном контексте - 2 или 3.
Если изменение требуется не только в контексте одного блока, а где-то еще - то 4.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
@Free_ze
Пишу комментарии в комментарии, а не в ответы
Вообще-то блоки независимы именно потому, что они должны выглядеть одинаково в разных частях страницы. Если блок должен иметь какой-то особый внешний вид "по месту", то это должны быть разные блоки. БЭМ не допускает селекторы вида: .блок1 .блок2 {...}

Если сам блок допускает какие-то режимы своего отображения (скажем, раскрывающееся меню может раскрываться в разные стороны), то это может задаваться с помощью БЭМ-модификаторов блока, но не снаружи.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Ещё заказы