Войти с помощью github
Форум /

В треде про использование БЭМ на небольших проектах Николай Громов пожаловался, что написание BEMJSON требует больше времени, чем написание HTML с помощью emmet.

И хотя время на набор кода не кажется чем-то существенным ни в процентном соотношении со временем на обдумывание или отладку, ни в абсолютных значениях, подумалось, что потратить несколько часов на написание аналога emmet для BEMJSON — это неплохой способ провести вечер ;)

Так появился пакет bemmet, который умеет разворачивать аббривиатуры вроде b1>__e1*2>b3_theme_islands+_state_active{hello} в BEMJSON:

{
    block: 'b1',
    content: [
        {
            block: 'b1',
            elem: 'e1',
            content: [
                {
                    block: 'b3',
                    mods: { theme: 'islands' },
                    content: {}
                },
                {
                    block: 'b1',
                    mods: { state: 'active' },
                    content: 'hello'
                }
            ]
        },
        {
            block: 'b1',
            elem: 'e1',
            content: [
                {
                    block: 'b3',
                    mods: { theme: 'islands' },
                    content: {}
                },
                {
                    block: 'b1',
                    mods: { state: 'active' },
                    content: 'hello'
                }
            ]
        }
    ]
}

Через опции можно конфигурировать кастомный нейминг — под капотом используется bem-naming. Метод stringify() поддерживает опции про индентацию и кавычки — используется stringify-object.

Попробовать bemmet в действии можно с помощью online-демки. Вы также можете сразу установить его в свой редактор с помощью плагинов для Sublime Text и Atom.

Буду благодарен, если кто-нибудь сделает плагины и для других редакторов.

Приятного использования!