Структура БЭМ проекта на файловой системе

Проект, реализованный на БЭМ состоит из одного или нескольких уровней переопределения и кода страниц.

Приведённые ниже примеры структуры не жёсткие и могут быть изменены в зависимости от потребностей проекта.

Страница

Совокупность файлов, которые определяют внешний вид и поведение конкретной страницы.

Пример

pages/
    index/
        index.css
        index.js
        index.bemhtml
        index.bemdecl
        index.bemjson

Страница состоит из описания блоков, которые на ней используются (.bemdecl) и конкретного их расположения (.bemjson). Это исходный код страницы. Из него генерируются все необходимые для отображения файлы (.css, .js, etc)

Исходный код страницы

index.bemdecl

TODO: написать пример страницы с использованием b-page, b-menu и b-link

Пример index.bemdecl

module.exports = [
    {
        name : 'b-page',
        elems : [
            { name : 'head' },
            { name : 'title' }
        ]
    },
    {
        name: 'b-link',
        mods: [
            {
                name : 'isBEM',
                vals : [
                    { name : 'yes'}
                ]
            }
        ]
    }
]

index.bemjson

TODO: написать пример страницы с использованием b-page, b-menu и b-link

Пример index.bemjson

({
    block: 'b-page',
    content: {
        block: 'b-link',
        url: 'http://yandex.ru',
            content: 'Самая посещаемая страница Рунета'
        }
})

Генерируемые файлы

index.css

TODO: написать пример index.css с использованием b-page, b-menu и b-link

Пример index.css

@import url(lego/b-page/b-page.css);
@import url(lego/b-menu/b-menu.css);
@import url(lego/b-menu/_layout/b-menu_layout_horiz.css);
@import url(lego/b-menu/_layout/b-menu_layout_vert.css);
@import url(lego/b-menu/_layout/b-menu_layout_vert.css);

index.js

TODO: написать пример index.js с использованием b-page, b-menu и b-link

include(lego/b-menu/b-menu.js);
include(lego/i-counter/i-counter.js);

Уровни переопределения проекта

Проект состоит из уровней переопределения. Количество уровней переопределения зависит от проекта, всегда есть минимум 1 уровень.

TODO: картинка с уровнями и технологиями

Реализация блока может быть на нескольких уровнях. Для каждой страницы можно настроить своё используемое множество уровней. Финальная реализация блока на странице собирается со всех уровней для этой страницы.

Расположение уровней на проектах

Только блоки проекта

project/
    blocks/
        b-head/
            b-head.css
            b-head.bemhtml
        b-foot/
            b-foot.css
            b-foot.bemhtml
        b-sidebar/
            b-sidebar.css
            b-sidebar.bemhtml

Блоки проекта и отдельных страниц проекта

project/
    blocks/
        b-head/
            b-head.css
            b-head.bemhtml
        b-foot/
            b-foot.css
            b-foot.bemhtml
        b-page/
            b-page.bemhtml
        b-sidebar/
            b-sidebar.css
            b-sidebar.bemhtml
    pages/
        index/
            blocks/
                b-head/
                    b-head.css             # переопределили вид шапки на заглавной странице
        about/
            blocks/
                b-about-text/              # добавили новый блок
                    b-about-text.css
                    b-about-text.bemhtml

Блоки фреймворка и проекта

project/
    framework/
        b-menu/
            b-menu.css
            b-menu.bemhtml
        b-page/
            b-page.css
            b-page.bemhtml
    blocks/
        b-head/
            b-head.css
            b-head.bemhtml
        b-foot/
            b-foot.css
            b-foot.bemhtml
        b-page/                           # переопределение шаблонов b-page из уровня framework'а
            b-page.bemhtml
        b-sidebar/
            b-sidebar.css
            b-sidebar.bemhtml

Блоки фреймворка, проекта и страниц

project/
    framework/
        b-menu/
            b-menu.css
            b-menu.bemhtml
        b-page/
            b-page.css
            b-page.bemhtml
    blocks/
        b-head/
            b-head.css
            b-head.bemhtml
        b-foot/
            b-foot.css
            b-foot.bemhtml
        b-page/                           # переопределение шаблонов b-page из уровня framework'а
            b-page.bemhtml
        b-sidebar/
            b-sidebar.css
            b-sidebar.bemhtml
    pages/
        index/
            blocks/
                b-head/
                    b-head.css             # переопределили вид шапки на заглавной странице
        about/
            blocks/
                b-about-text/              # добавили новый блок
                    b-about-text.css
                    b-about-text.bemhtml

Блоки проекта, страниц и темы

project/
    blocks/
        b-head/
            b-head.css
            b-head.bemhtml
        b-foot/
            b-foot.css
            b-foot.bemhtml
        b-page/                           # переопределение шаблонов b-page из уровня framework'а
            b-page.bemhtml
        b-sidebar/
            b-sidebar.css
            b-sidebar.bemhtml
    pages/
        index/
            blocks/
                b-head/
                    b-head.css             # переопределили вид шапки на заглавной странице
        about/
            blocks/
                b-about-text/              # добавили новый блок
                    b-about-text.css
                    b-about-text.bemhtml
    themes/
        black/                             # не раскладываем файлы по директориям, кладём их рядом
            b-head.css
            b-foot.css
            b-sidebar.css
        yellow/
            b-head.css
            b-foot.css
            b-sidebar.css