Яндекс

Страхи

• Всё или ничего
• Кажется сложно!
• Только для больших проектов
• Не принесёт пользу в моём окружении

Методология — просто

• Полностью переписали методологический раздел
• Избавились от любых отсылок к нашей конкретной реализации
• Не навязываем ни строчки готового кода
• Не заставляем использовать
  • конкретные схемы подчеркиваний
  • или расположения блоков на файловой системе
• Объясняем зачем и какую пользу нанесет вашему проекту

Всё или ничего Модульная методология

• Соглашение по именованию
• Файловая система
• Сборка
• Декларации

Библиотеки блоков легко

• Всего два файла и используй
• Не зависят от бекенда
• Работают с любыми фреймворками

Декларативное описание состояния

.button {
    border-radius: 5px;
}

.button_disabled {
    opacity: .5;
}

Декларативное описание состояния

BEMDOM.decl('button', {








});

Декларативное описание состояния

BEMDOM.decl('button', {
    onSetMod: {




    }


});

Декларативное описание состояния

BEMDOM.decl('button', {
    onSetMod: {
        disabled: {


        }
    }


});

Декларативное описание состояния

BEMDOM.decl('button', {
    onSetMod: {
        disabled: {
            true: { this._onDisabled(); }

        }
    },
    _onDisabled: function() {}

});

Декларативное описание состояния

BEMDOM.decl('button', {
    onSetMod: {
        disabled: {
            true: { this._onDisabled(); },
            '': { this._onEnabled(); }
        }
    },
    _onDisabled: function() {},
    _onEnabled: function() {}
});

Уровни переопределения

.button {
    width: 200px;
    color: red;
}

Уровни переопределения

.button {
    width: 200px;
    color: red;
}

.button {
    height: 50px;
    color: green;
}

Инлайновые стили

<div style="font-size: 12px; font-weight: bold"></div>

Инлайновый HTML

<form class="form" action="/" method="post">
    <input class="form__input" type="search">
    <input class="form__button" type="submit" value="Отправить">
</form>

Семантическое дерево

form
    input
    button
        Отправить

BEMJSON

{
    block: 'form',
    content: [
        { elem: 'input' },
        {
            elem: 'button',
            content: 'Отправить'
        }
    ]
}

Сборка

• bem-tools
• ENB

Сборка

• bem-tools
• ENB
• github.com/gulp-bem

Итог

• Методология != реализация
• Можно использовать только методологию
• Библиотеки — подключил и работает
• Шаблонизатор не требует сборки
• БЭМ в JS можно писать хоть в JSFiddle.
• И вообще bem-tools умер в пользу модульной сборки ;)