БЭМ (Блок, Элемент, Модификатор) — это методология, предлагающая использовать компонентный подход к веб-разработке. Основная идея БЭМ — это разделение интерфейса на независимые блоки, которые затем можно переиспользовать в различных частях проекта.
Пример структуры блока в БЭМ может выглядеть следующим образом:
```
blocks/
└── my-block/ # Папка блока
├── my-block.pug # Разметка блока (Pug/Jade шаблон)
├── my-block.scss # Стили блока (SCSS файл)
└── my-block.js # Логика блока (JavaScript файл)
```
Для переиспользования блока вы можете следовать этим шагам:
1. **Атомизация**: Убедитесь, что ваш блок абстрагирован и самодостаточен, то есть он не зависит от других частей кода, кроме своих зависимостей (например, общих стилевых файлов или JavaScript-библиотек).
2. **Шаблоны (Pug)**: Используйте миксины или инклюды Pug для интеграции разметки блока в другие части проекта. Пример миксина:
```pug
//- my-block.pug
mixin my-block(content)
.my-block
| #{content}
```
3. **Стили (SCSS)**: Импортируйте SCSS файл блока в главный SCSS файл проекта или в SCSS файлы других блоков, которые будут использовать данный блок.
```scss
// main.scss
@import 'blocks/my-block/my-block';
```
4. **JavaScript**: Если у блока есть JavaScript-логика, позаботьтесь о том, чтобы этот js-файл инкапсулировал логику и мог быть инициализирован независимо. Вы можете использовать модули JavaScript (ES6), Webpack, Browserify или другие модульные системы для подключения JavaScript-файлов.
```javascript
// my-block.js
class MyBlock {
constructor(element) {
this.element = element;
// инициализация
}
// методы блока
}
// Инициализация всех экземпляров блока
document.querySelectorAll('.my-block').forEach((element) => {
new MyBlock(element);
});
```
5. **Сборка**: Настройте сборщик проекта (например, Gulp, Webpack) таким образом, чтобы он автоматически обрабатывал все файлы вашего проекта, собирая их в готовый к деплою вид.
По сути, вы используете структуру файлов и папок для организации компонентности вашего проекта. Переиспользование блоков достигается за счет простого копирования папки блока в нужное место и интеграции его стилей и логики через импорты и инклюды в соответствующих файлах проекта.
Обратите внимание, что когда вы используете блок в другом месте, вам может потребоваться настроить параметры для миксинов, передать разные стили через модификаторы и инициализировать JavaScript-функционал, если это необходимо.