Организация файловой структуры

Все БЭМ-проекты имеют схожую файловую структуру. Привычное для разработчиков расположение файлов облегчает навигацию по проекту и упрощает переключение между проектами.

В БЭМ блок первичен, а технологии  — вторичны. Поэтому код проекта хранится по-блочно: каждому блоку соответствует свой набор файлов, необходимых для его реализации. Такой подход ускоряет разработку и отладку кода, обеспечивает оптимальный runtime: позволяет включать в сборку только необходимые файлы, точечно вносить правки и повторно использовать код.

В методологии БЭМ приняты несколько схем организации файловой структуры проекта:

• nested

• flat

• flex

Выбор схемы зависит от предпочтений разработчика.

Принципы организации файловой структуры БЭМ-проекта

• Проект состоит из уровней переопределения

• Реализация блока состоит из отдельных файлов

• Файлы объединяются по смыслу, а не по типу

Проект состоит из уровней переопределения

В проекте всегда есть один уровень переопределения. Максимальное количество уровней не ограничено.

Пример

project/
    common.blocks/      # Уровень переопределения с блоками проекта
    library.blocks/     # Уровень переопределения c блоками библиотеки

Реализация блока состоит из отдельных файлов

Каждой технологии реализации соответствует отдельный файл. Имена файлов реализации совпадают с именем блока.

Например, если внешний вид блока input задан с помощью CSS, то код будет сохранен в файле input.css.

Пример

project
    common.blocks/
        input.css       # Реализация блока input в технологии CSS
        input.js        # Реализация блока input в технологии JavaScript

Код модификаторов и элементов также хранится в отдельных файлах блока. Такой подход позволяет подключать только те модификаторы и элементы, которые необходимы для данной реализации блока.

Пример

project
    common.blocks/
        input.css             # Реализация блока input в технологии CSS
        input.js              # Реализация блока input в технологии JavaScript
        input_theme_sun.css   # Реализация модификатора input_theme_sun
        input__clear.css      # Реализация элемента input__clear в технологии CSS
        input__clear.js       # Реализация элемента input__clear в технологии JavaScript

Файлы объединяются по смыслу, а не по типу

Каждому блоку соответствует директория с именем блока, в которой находятся файлы реализации блока.

В некоторых схемах файловых структур директории блоков не используются. Тогда файлы блока группируются с помощью пространства имен, заданного именем блока.

Пример

project
    common.blocks/
        input/                                 # Директория блока input
            input.css                          # Реализация блока input в технологии CSS
            input.js                           # Реализация блока input в технологии JavaScript
        popup/                                 # Директория блока popup
            popup.css                          # Реализация блока popup в технологии CSS 
            popup.js                           # Реализация блока popup в технологии JavaScript

Чтобы улучшить навигацию в проекте, модификаторы блока со множественными значениями также можно объединять в отдельные директории.

Пример

project
    common.blocks/                             # Уровень переопределения с блоками 
        input/                                 # Директория блока input
            _type/                             # Директория модификатора input_type
                input_type_search.css          # Реализация модификатора input_type в технологии CSS
                input_type_pass.css            # Реализация модификатора input_type в технологии CSS
            input.css                          # Реализация блока input в технологии CSS
            input.js                           # Реализация блока input в технологии JavaScript
        popup/                                 # Директория блока popup

Схемы

Nested

Классическая схема организации файловой структуры БЭМ-проектов:

• Блоку соответствует одна директория.

• Код модификаторов и элементов находится в отдельных файлах.

• Файлы модификаторов и элементов хранятся в отдельных директориях.

• Директория блока является корневой для поддиректорий его элементов и модификаторов.

• Имена директорий элементов начинаются с двойного подчеркивания (__).

• Имена директорий модификаторов начинаются с одинарного подчеркивания (_).

Пример

project
    common.blocks/                             # Уровень переопределения с блоками 
        input/                                 # Директория блока input
            _type/                             # Директория модификатора input_type
                input_type_search.css          # Реализация модификатора input_type в технологии CSS
            __clear/                           # Директория элемента input__clear
                _visible/                      # Директория модификатора input__clear_visible
                    input__clear_visible.css   # Реализация модификатора input__clear_visible в технологии CSS
                input__clear.css               # Реализация элемента input__clear в технологии CSS
                input__clear.js                # Реализация элемента input__clear в технологии JavaScript
            input.css                          # Реализация блока input в технологии CSS
            input.js                           # Реализация блока input в технологии JavaScript

Схема nested используется в файловой структуре БЭМ-библиотек:

• bem-core

• bem-components

Flat

Упрощенная схема организации файловой структуры:

• Директории для блоков не используются.

• Опциональные элементы и модификаторы реализованы в отдельных файлах или в основном файле блока.

Пример

project
    common.blocks/
        input_type_search.css                  # Модификатор input_type_search в технологии CSS
        input_type_search.js                   # Модификатор input_type_search в технологии Javascript
        input__clear.js                        # Опциональный элемент блока input
        input.css
        input.js
        popup.css
        popup.js
        popup.png

Flex

Максимально гибкая схема, является объединением двух схем flat и nested. Для блоков с разветвленной файловой структурой применяются правила схемы nested. Для простых блоков используется схема flat.

Особенности:

• Блоку соответствует отдельная директория.

• Элементы и модификаторы могут быть реализованы в файлах блока или в отдельных файлах.

Пример

project
    common.blocks/
        input/                                 # Директория блока input
            _type/                             # Директория модификатора input_type
                input_type_search.css          # Реализация модификатора input_type в технологии CSS
            __clear/                           # Директория элемента input__clear
                _visible/                      # Директория модификатора input__clear_visible
                    input__clear_visible.css   # Реализация модификатора input__clear_visible в технологии CSS
                input__clear.css               # Реализация элемента input__clear в технологии CSS
                input__clear.js                # Реализация элемента input__clear в технологии JavaScript
            input.css                          # Реализация блока input в технологии CSS
            input.js                           # Реализация блока input в технологии JavaScript
        popup/                                 # Директория блока popup
            popup.css
            popup.js
            popup.png