Как с такой структурой повторно использовать БЭМ блок?
БЭМ ведь предполагает повторное использование блоков, только не пойму как можно с такой структурой без бэка повторно использовать блок(изменив при этом контент блока).
├── src │ ├── blocks │ ├── fonts │ ├── img │ ├── js │ ├── styles │ ├── views │ └── .htaccess |
├── src │ ├── blocks │ ├── fonts │ ├── img │ ├── js │ ├── styles │ ├── views │ └── .htaccess
каждый БЭМ-блок имеет свою папку внутри src/blocks/modules
папка одного БЭМ-блока содержит в себе один Pug-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)
Pug-файл блока импортируется в файл src/views/index.pug (или в необходимый файл страницы, откуда будет вызываться блок)
SCSS-файл блока импортируется в файл src/blocks/modules/_modules.scss
JS-файл блока импортируется в src/js/import/modules.js
Дополнительно:
Погугли миксины в pug.
mixin block(b1,b2)
If b1
…..
else if b2
……
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для повторного использования БЭМ блока на сайте, вам следует следовать определенным шагам:
1. Создайте отдельный файл для вашего БЭМ блока. В этом файле определите структуру блока, его элементы и модификаторы.
2. Используйте метод include в вашем CSS файле, чтобы подключить файл с вашим БЭМ блоком. Например, если вы используете препроцессор Sass, вы можете написать следующий код:
@import 'path/to/your/block/file';
3. Далее, в вашем HTML файле, используйте классы БЭМ блока для стилизации соответствующих элементов. Например, если ваш блок называется "header" и у него есть элемент "logo", вы можете написать следующий код:
<header class="header"> <div class="header__logo">Logo</div> </header>
4. При необходимости, используйте модификаторы БЭМ блока для изменения его внешнего вида. Например, если у вас есть модификатор "dark" для блока "header", вы можете написать следующий код:
<header class="header header--dark"> <div class="header__logo">Logo</div> </header>
Следуя этим шагам, вы сможете эффективно повторно использовать свой БЭМ блок на сайте, что упростит поддержку и развитие вашего проекта.