Пользователь
0,0
рейтинг
12 декабря 2012 в 18:18

Разработка → Попробуй БЭМ на вкус! tutorial

Эта статья рассказывает о том, как создать проект с использованием БЭМ-технологий.
Мы шаг за шагом создадим страничку каталога товаров, пользуясь принципами БЭМ в CSS, возможностями писать декларативный JavaScript на фреймворке i-bem.js и с использованием шаблонизатора BEMHTML. Помогать делать всё это будут bem tools, в частности — инструмент для разработки bem server.

Онлайн магазин

Важно: в статье нет особенных подробностей, её цель — получить проект максимально быстро. Текст, раскрывающий больше информации, пройдёт следующим постом.

Что такое БЭМ?


Для начала небольшое лирическое отступление для тех, кто не в курсе, что обозначает эта аббревиатура.
БЭМ расшифровывается как «Блок, Элемент, Модификатор». Это методология разработки web-проектов, способ удобно делить интерфейс на отдельные штучки, применимый для любой технологии. Кроме того, БЭМ — это набор инструментов для автоматизации работы. И наконец, БЭМ — это возможность создания интерфейсных библиотек для быстрой и эффективной разработки.

Если ранее вы не сталкивались с БЭМ, вам стоит вначале просмотреть материалы сайта bem.info, а затем вернуться к этой статье.
Для тех, кому больше нравится видео, могу предложить запись доклада с WebConf Riga 2012 (на английском) или выступление Сергея Бережного (@veged) на РИТ 2011.

Необходимые инструменты


Чтобы пройти по всем шагам этого мануала, вам нужно установить bem tools. Это набор инструментов с command line интерфейсом для оперирования БЭМ-сущностями и сборки проекта. Инструкция по установке есть в описании репозитория.
На момент написания этой статьи была актуальна версия 0.5.21.

Создание собственного репозитория проекта


Проще всего создать свой проект простым копированием существующего репозитория с подходящей структурой. Для проекта с использованием полного стека БЭМ подойдёт репозиторий project-stub. На момент напиания статьи использовалась ревизия 5ac5d2d2567ca6d52d82f95b219bca6f49ef5cc4.

$ git clone git://github.com/bem/project-stub.git my-pretty-project
$ cd my-pretty-project/
$ git reset --hard 5ac5d2d2567ca6d52d82f95b219bca6f49ef5cc4
$ rm -rf .git
$ git init

Затем проект нужно собрать. Для этого запускается команда

make

Это занимает некоторое время, потому что именно в этот момент в директорию проекта устанавливаются все необходимые npm-пакеты.
В конце вы увидите следующее сообщение:

info: Server is listening on port 8080. Point your browser to http://localhost:8080/

На вашем компьютере запустился bem server — инструмент для разработки, который будет автоматически пересобирать ваш проект, если вы внесете в него изменения.

Внесение изменения в страницы


Сейчас на вашем проекте есть одна страница index.html, которую вы можете открыть в браузере.
Первый запрос к странице будет обрабатываться заметное время, потому что в этот момент bem server подгружает необходмые для её сборки библиотеки.

Структура проекта предполагает, что блоки будут размещены в директории desktop.blocks, а страницы — в директории desktop.bundles.
Вообще, строго говоря, desktop.bundles хранит «набор» блоков. Это могут быть частоиспользуемые блоки нескольких страниц (то, что обычно называют common), наборы, объединяющие несколько страниц (all, если объединены все страницы) или — самый простой случай — наборы блоков, каждый из которых соответствует одной странице. Здесь будет рассматриваться последний, простой вариант.

Вы можете отредактировать страницу, меняя файл desktop.bundles/index/index.bemjson.js.

Описание блока в bemjson


Сначала мы разместим на странице Шапку. В терминах БЭМ это блок head:

{ block: 'head' }

Здесь и далее полный код страницы на разных стадиях можно будет находить на Gist: https://gist.github.com/4175550.

Перезагрузив страницу, вы увидите что в ней появился соответствующий <div>.

<!DOCTYPE html>
<html class="i-ua_js_yes i-ua_css_standard">
    <head>...</head>
    <body class="b-page b-page__body">
        <div class="head"></div>
    </body>
</html>

Шапку мы наполним содержанием: форма поиска, логотип и раскладка, располагающая содержание как нужно.

Сначала в BEMJSON-описании страницы внутрь блока head помещаем блок layout с двумя элементами: left и right.

content: [
    {
        block: 'head',
        content: {
            block: 'layout',
            content: [
                {
                    elem: 'left',
                    content: 'left here'
                },
                {
                    elem: 'right',
                    content: 'right here'
                }
            ]
        }
    }
]

https://gist.github.com/4175573

<!DOCTYPE html>
<html class="i-ua_js_yes i-ua_css_standard">
    <head>...</head>
    <body class="b-page b-page__body">
        <div class="head">
            <div class="layout">
                <div class="layout__left">left here</div>
                <div class="layout__right">right here</div>
            </div>
        </div>
    </body>
</html>

Это создаст необходимую разметку (вы можете увидеть её, обновив страницу), к которой нужно написать стили. То есть реализовать блок layout в технологии CSS.

Создание блока


Для создания файла технологии воспользуемся командой bem create.

$ bem create -l desktop.blocks/ -T css -b layout

Команда создаст файл desktop.blocks/layout/layout.css, в котором уже есть селектор, соответствующий файлу блока. Правило нужно дополнить соответственно назначению блока.
Сейчас можно просто скопировать: https://gist.github.com/4175598

Использование блоков из библиотек


Вложенные в layout блоки поисковой формы и логотипа реализовывать самостоятельно не нужно. Они уже реализованы в библиотеке bem-bl, достаточно просто задекларировать их на странице. То есть вставить BEMJSON-описание блока в страницу desktop.bundles/index/index.bemjson.js

Для нашей страницы мы воспользуемся блоками b-search и b-logo.
https://gist.github.com/4175640

Картинку для логотипа можно взять отсюда или указать свою.

Использование блоков из библиотеки

Доопределение блоков библиотек


Доопределение в CSS

Используемый нами блок b-logo предоставляет только нужную разметку. CSS для неё каждый разработчик может написать сам, потому что всем нужна разная разметка.

Эту разметку мы поместим в блок b-logo на своём уровне переопределения.

$ bem create -l desktop.blocks/ -T css -b b-logo

Разметку для блока можно взять отсюда: https://gist.github.com/4175675

То же самое для блока b-search:

$ bem create -l desktop.blocks/ -T css -b b-search

https://gist.github.com/4195433

Шапка со стилями

Доопределение BEMHTML



Чтобы сделать страницу центрированной, нужен дополнительный контейнер. Для этого мы доопределим шаблоны блока b-page, создав такой же блок на своём уровне. В качестве шаблонизатора используется BEMHTML.

$ bem create -l desktop.blocks/ -b b-page -T bemhtml

В получившемся файле desktop.blocks/b-page/b-page.bemhtml нужно написать код, оборачивающий контент блока в дополнительный контейнер.

block b-page, content: {
    elem: 'body-i',
    content: this.ctx.content
}

https://gist.github.com/4175742

<!DOCTYPE html>
<html class="i-ua_js_yes i-ua_css_standard">
    <head>...</head>
    <body class="b-page b-page__body">
        <div class="b-page__body-i">
            <div class="head">
                <div class="layout">...</div>
            </div>
        </div>
    </body>
</html>

Для получившейся разметки создаются свои CSS-правила:

$ bem create -l desktop.blocks/ -T css -b b-page

Контент для получившегося файла desktop.blocks/b-page/b-page.css можно скопировать отсюда: https://gist.github.com/4175763

А для того, чтобы блок шапки был заметен на странице, я задам ему border:

$ bem create -l desktop.blocks/ -T css -b head

Контент для файла desktop.blocks/head/head.css: https://gist.github.com/4175776.

Шапка с рамкой

BEMHTML шаблоны


BEMHTML шаблоны могут не просто определять теги, которым представлен блок, и их атрибуты, но и генерировать оформительский контент.

Например, давайте разместим на странице список товаров. Он представлен в BEMJSON-декларации страницы блоком goods, и декларация содержит необходимые данные.

{
    block: 'goods',
    goods: [
        {
            title: 'Apple iPhone 4S 32Gb',
            image: '1450827127820366493466',
            price: '259',
            url: '/'
        },
        {
            title: 'Samsung Galaxy Ace S5830',
            image: 'http://mdata.yandex.net/i?path=b0206005907_img_id5777488190397681906.jpg',
            price: '73',
            url: '/'
        },
        ...
 }

https://gist.github.com/4176078

Для того, чтобы эти данные превратились в нужную разметку, блок должен быть реализован в технологии BEMHTML. Для внешнего вида — технология CSS. Поэтому можно создать блок во всех технологиях, предусмотренных по умолчанию.

$ bem create -l desktop.blocks -b goods

В BEMHTML шаблоне блока desktop.blocks/goods/goods.bemhtml нужно написать код, который превратит JSON с данными в элементы блока. А также, пользуясь модой tag указать, какими DOM-элементами представить блок и его элементы.

block goods {

    tag: 'ul'

    ...

    elem item, tag: 'li'

    elem title, tag: 'h3'

}

https://gist.github.com/4176118

<!DOCTYPE html>
<html class="i-ua_js_yes i-ua_css_standard">
    <head>...</head>
    <body class="b-page b-page__body">
        <div class="b-page__body-i">
            <div class="head">...</div>
            <ul class="goods">
                <li class="goods__item">
                    <h3 class="goods__title">Apple iPhone 4S 32Gb</h3>
                    <img class="goods__image" src="1450827127820366493466"/>
                    <span class="goods__price">259</span>
                </li>
                <li class="goods__item">...</li>
                <li class="goods__item">...</li>
            </ul>
        </div>
    </body>
</html>

Шаблон может создавать не только элементы блока, но и другие блоки. Например, цену товара можно завернуть в ссылку, используя для этого блок b-link из библиотеки bem-bl.

{
    elem: 'price',
    content: {
        block: 'b-link',
        url: item.url,
        content: item.price
    }
}

https://gist.github.com/4176996

Кроме того, для того, чтобы избежать каскада при оформлении этой ссылки стилями, её можно пометить как элемент блока goods.

{
    block: 'b-link',
    mix: [{ block: 'goods', elem: 'link' }],
    url: item.url,
    content: item.price
}

https://gist.github.com/4177113

...
<ul class="goods">
    <li class="goods__item">
        <h3 class="goods__title">Apple iPhone 4S 32Gb</h3>
        <img class="goods__image" src="1450827127820366493466"/>
        <span class="goods__price">
            <a class="b-link goods__link" href="/">259</a>
        </span>
    </li>
    <li class="goods__item">...</li>
    <li class="goods__item">...</li>
</ul>

Также нужно пометить элементы о новых товарах модификатором и добавить выравнивающих элементов.
https://gist.github.com/4177157

CSS для блока можно скопировать отсюда https://gist.github.com/4177163.
Создавать блок отдельно в технологии CSS не нужно, потому что он изначально был создан со всеми необходимыми файлами.

Список товаров

Понадобится и CSS для IE. Он не входит в список технологий по умолчанию.

$ bem create block -l desktop.blocks/ -T ie.css goods

Содержание для получившегося файла desktop.blocks/goods/goods.ie.css можно взять на Gist https://gist.github.com/4177174

Зависимости блоков


Помимо декларации нужно гарантировать подключение к странице шаблонов, CSS и JavaScript блока. Для этого у блока можно описать зависимости, это делается представлением блока в технологии deps.js.

$ bem create -l desktop.blocks/ -T deps.js -b goods

Можно воспользоваться нестрогой зависимостью shouldDeps, указав, что нужен блок b-link.

({
    shouldDeps: [
        { block: 'b-link' }
    ]
})

https://gist.github.com/4177031

Подключение библиотек


Хочется представить шапку и каждый товар модными прямоугольниками с тенью. Блок для этого я позаимствую из библотеки моего друга.
Там есть всего один блок, который называется box и делает то, что мне нужно.

Чтобы получить код библиотеки, мне нужно указать её адрес в ./bem/make.js, по аналогии с соседними библиотеками.

getLibraries: function() {

    return {
        'bem-bl': {
            type: 'git',
            url: 'git://github.com/bem/bem-bl.git',
            treeish: '0.3'
        },
        'bemhtml' : {
            type: 'git',
            url: 'git://github.com/bem/bemhtml.git'
        },
        'john-lib' : {
            type: 'git',
            url: 'git://github.com/john-johnson/j.git'
        }
    };

}

https://gist.github.com/4177229

А также указать в настройках бандлов (страниц), что этот уровень нужно использовать при сборке. Это делается в файле desktop.bundles/.bem/level.js.

exports.getConfig = function() {

    return BEM.util.extend(this.__base() || {}, {
        bundleBuildLevels: this.resolvePaths([
            '../../bem-bl/blocks-common',
            '../../bem-bl/blocks-desktop',
            '../../bemhtml/common.blocks',
            '../../john-lib/blocks/',
            '../../desktop.blocks'
        ])
    });

};

https://gist.github.com/4177250

К сожалению, пока что при изменении конфигурации проекта приходится перезапускать bem server. Текущий процесс придётся прервать и снова набрать команду make.
В будущих версиях необходимость перезапуска обещают убрать.

Миксы блоков и элементов


Теперь можно использовать блок box. Я могу просто обернуть им мои блоки. Но чтобы сэкономить разметку, можно смешать на одной DOM-ноде 2 блока. Это называется mix.

Один из способов смешения — описать его во входных данных (BEMJSON).
В данном случае нужно смешать блок head с блоком box, изменив код страницы.

{
    block: 'head',
    mix: [ { block: 'box' } ],
    content: ...
}

https://gist.github.com/4177292

<!DOCTYPE html>
<html class="i-ua_js_yes i-ua_css_standard">
    <head>...</head>
    <body class="b-page b-page__body">
        <div class="b-page__body-i">
            <div class="head box">
                <div class="layout">...</div>
            </div>
            <ul class="goods">...</ul>
        </div>
    </body>
</html>

Не забудьте записать блок box в зависимости блока head

$ bem create -l desktop.blocks/ -T deps.js -b head

({
    shouldDeps: [
        { block: 'box' }
    ]
})

https://gist.github.com/4235143

Шапка с блоком box

Смешивать можно не только блоки, но и элементы с блоками.
В шаблоне блока goods смешаем каждый элемент item с блоком box.

content.push({
    elem: 'item',
    mods: mods,
    mix: [{ block: 'box' }],
    content: ...

https://gist.github.com/4177350

<!DOCTYPE html>
<html class="i-ua_js_yes i-ua_css_standard">
    <head>...</head>
    <body class="b-page b-page__body">
        <div class="b-page__body-i">
            <div class="head box">
                <div class="layout">...</div>
            </div>
            <ul class="goods">
                <li class="goods__item box">...</li>
                <li class="goods__item box">...</li>
                <li class="goods__item box">...</li>
                <li class="goods__item goods__item_new_yes box">...</li>
                <li class="goods__item box">...</li>
                <li class="goods__sizer">...</li>
                ...
            </ul>
        </div>
    </body>
</html>

Товары в блоке box

Декларативный JavaScript


Блоки с JavaScript функциональностью


Блок box, который появился у меня на проекте благодаря подключенной сторонней библиотеке, предоставляет также и динамическую JavaScript-функциональность — он умеет сворачиваться.

Для сообщения, что я хочу использовать эту JavaScript-функциональность в шапке, мне нужно изменить описание блока head, указав, что у примешиваемого блока box есть JavaScript-реализация:

mix: [{ block: 'box', js: true }]

https://gist.github.com/4202622

Также требуется разместить внутри блока элемент switcher

content: [
    {
        block: 'layout',
        ...
    },
    {
        block: 'box',
        elem: 'switcher'
    }
]

https://gist.github.com/4202651

Получается блок со стрелочкой, которая умеет сворачивать и разворачивать его.

Стрелочка

Доопределение JavaScript


Мне недостаточно JavaScript-функциональности блока box. Я хочу, чтобы он сворачивался не только по вертикали, но и по горизонтали. При этом вносить изменения в чужую библиотеку я не могу. Но благодаря тому, что JavaScript блока написан с использованием декларативного фреймворка из блока i-bem, у меня есть возможность изменить (переопределить или доопределить) поведение блока на своём уровне.

bem create -l desktop.blocks -T js -b box

В получившемся файле desktop.blocks/box/box.js нужно оставить только секцию onSetMod, описывающую реакцию на установку модификаторов.

onSetMod : {

}

https://gist.github.com/4195865

В данном случае нужно реагировать на установку и снятие модификатора closed:

onSetMod : {

    'closed': {
        'yes': function() {
            // some functionality here
        },
        '': function() {
            // some functionality here
        }
    }

}

https://gist.github.com/4195879

Создание новых страниц


Страницы — это тоже блоки, на своём уровне переопределения. Поэтому для их создания тоже можно воспользоваться командой bem create:

bem create -l desktop.bundles -b contact

Флаг -T можно не указывать, потому что bem create благодаря настройкам уровня desktop.bundles знает, что создаваемые на этом уровне блоки должны быть представлены в технологии BEMJSON. Так, появляется файл desktop.bundles/contact/contact.bemjson.js с минимальным содержимым для страницы.

Новую страницу можно посмотреть по адресу http://localhost:8080/desktop.bundles/contact/contact.html
bem server соберёт её HTML, JS и CSS файлы в момент первого обращения.

Выкатка


Всё время, пока мы разрабатывали проект, работал bem server и пересобирал те части проекта, которые нуждаются в изменении при обновлении страниц.

Для выкатки в продакшен тоже нужна сборка проекта, но уже всего проекта целиком, вне зависимости от того, изменилось что-то или нет. Для этого можно воспользоваться командой bem make.
Рекомендуется запускать локальную для данного проекта версию пакета:

./node_modules/bem/bin/bem make


благодарность За подготовку разметки сайта большое спасибо tyv и gela-d.
Варя Степанова @toivonen
карма
33,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (82)

  • +10
    Чем больше читаю о БЭМ, тем больше вопросов.
    • +4
      Задавайте!
      • +2
        Как развернуть под Windows?
        • 0
          Я не пользователь Windows, но я попросила кого надо, чтобы вам ответили. Только подождите немного :-)
    • 0
      Расскажите пожалуйста, как удобно работать с бэм в проектах на php
      • 0
        На YaC2011 был мастер-класс «Тема для Wordpress на БЭМ» clubs.ya.ru/bem/replies.xml?item_no=1151 Там как раз про PHP. Только это контент годовой давности, сейчас уже не нужно 100500 комманд для сборки в консоли писать, потому что есть bem server. Но по видео можно принцип понять.
      • 0
        Как вы его хотите применять?
    • +4
      У меня один: нафига это все нужно? О_О Поясните, кто может сказать о преимуществах?
      • +1
        Можете почитать ответы на комменты в Smashing Magazine coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/ Тема больно новая, поэтому там много вопросов. Но ответы все есть.
        Также, видео, на которое я вначале давала ссылку, мне кажется, хорошо всё объясняет ( vimeo.com/53219242 ). Там по-английски, но зато это самый свежий контент.
        А ещё есть доклад Виталия Харисова «История создания БЭМ» ( events.yandex.ru/talks/137/ ), на русском. Там как раз шаг ша загом про то, какие были проблемы в разработке, как их решали, добавляя в систему «правила», и как в итоге получился БЭМ.
        • +4
          Этот же доклад можно почитать текстом на ru.bem.info/method/history/
        • 0
          Не надо меня засылать в гугл или еще куда-то. Своими словами объясните зачем это ?!
          • +1
            В «Истории создания БЭМ» Виталя Харисов и объясняет своими словами. Коротко о главном: работа по БЭМ, это не верстка и прикручивание js, а разработка интерфейса, то есть вы начинаете мыслить другими порядками, блоками-элементами-модификаторами и их взаимодействиями, а не «класс у divа поменялся, отвалися мой js». Блок тут получается на более высоком уровне, чем верстка.
  • +3
    По мне БЭМ хорош именно в верстке. Я конечно не использую такой механизм при создании сайтов. Но все чаще и чаще обращаюсь к методологии написания классов. Сразу снимается ряд проблем, особенно при наследовании. Порою даже код CSS короче.
    • +2
      Почему «конечно не использую»? Почему только в верстке?
    • +8
      БЭМ хорош только для проектов которые вы будете долго поддерживать. Год и дольше. Причем именно работать над ним, а не раз в месяц, что-то подправить. Для производства стайтов на продажу, это не очень подходит. Представьте что вам прислали на отладку главную страницу яндекса.

      И раскрывает он себя именно при строительстве страницы именно таким образом как написано в статье. То есть не руками.
      Правда меня терзают сомнения. Мне все же, кажется, что правильнее было бы сначала просто сверстать, а потом уже переводить это уже в json вид для дальнейшей поддержке. Потому как с нуля, делать json-блоками можно мозги вывихнуть.
      • +1
        Золотые слова!

        Большинству разработчиков следует понять, что основа БЭМ — независимые блоки, а не префикс b_.
      • 0
        Тогда, если на проекте используется XSLT, то стоит сначала просто сверстать, а потом переводить в XSLT? Я вас не понимаю.
      • +2
        «Сперва верстать» — это лишь вопрос привычки. Я бы даже такую страницу верстала, а потом переносила в шаблоны оооочень долго. А на bemjson+bemhtml бац-бац и всё готово. И сразу можно блоки реиспользовать и проект делить, как угодно. Например, блок «box» сначала в проекте был, и только при подготовке статьи я его в отдельную библиотеку выделила простым копированием.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            «У нас» нет цели разработать миллион библиотек. Мы даём другим инструмент, при помощи которого они могут разработать свои библиотеки и делиться друг с другом.
            • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Почему вы сравниваете БЭМ и бутстрап?
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Как насчет легкости поддержки и внесения изменений? Реализации удивительных идей удивительных менеджеров? Организации командной работы?
                • НЛО прилетело и опубликовало эту надпись здесь
                  • 0
                    Я вас понял. Возможно, я просто давно не делал таких проектов.
  • +2
    Как раз сегодня решил разобраться в этом БЭМ, статья очень кстати. Спасибо!
  • 0
    Вы работаете на retina-экране? Что-то уж шрифты в скриншотах слишком большие.
    • +1
      Нет, я просто увеличила шрифт, чтобы картинки красивые были.
      HTML код переделаю на текст, размещать его картинками было не лучшим решением.
  • 0
    На сколько мне известно, за рубежом БЭМ особо не пользуются. В чем же дело? Западные разработчики используют какие-то свои решения? Или они еще не распробовали БЭМ? Или с БЭМ что-то не так?
    Я смотрю на все это и искренне не могу понять как это может упрощать разработку и делать ее более эффективной, но я еще новичок и опыта работы над серьезными проектами нет, поэтому могу ошибаться.
    • +4
      Про БЭМ на английском языке была одна статья и один доклад. Причём доклад был месяц назад.
      Но несмотря на на такое откровенное мизерное количество информации, есть проекты, использующие БЭМ.
      Навскидку — SoundCloud soundcloud.com, intuit.css inuitcss.com. Про последний есть даже статья с объяснениями webdesign.tutsplus.com/tutorials/htmlcss-tutorials/rubbing-noses-with-inuit-css/
    • +1
      на западе используют похожие техники, например oocss или bootstrap, который использует похожий подход к построению кода., но у них чаще всего все в виде теории, в БЭМе же кроме теории есть еще и реализация в виде инструментов, которые понимаю что такое блок элемент и модификатор.
  • +1
    Побольше таких статей step-by-step, чтобы было понятно что и откуда берётся.
  • 0
    сильно напоминает продукт другой компании — Sencha Extjs
  • +2
    Как парадигма БЭМ конечно интересен. Независимые блоки и все такое… Но тонна инструментов, которые для этого нужны отпугивает. Надо что-то мутить с сервером, обязательно нужен линукс и т.п. и т.д. Мне как простому верстальщику это кажется слишком уж извратным.
    • +1
      БЭМ можно развернуть и на c9.io, правда там очень загруженные сервера и работает он там медленно.
      • +1
        А можешь написать инструкцию с картинками?
        • 0
          Пробовал, там все _ОЧЕНЬ_ медленно работает. Никакого радости от разработки он не доставит, надо искать более производительные альтернативы.
  • +1
    Ребята, а в чём суть библиотеки bemhtml?
  • +1
    в статье нет особенных подробностей
    Тем не менее стало намного понятнее.
  • 0
    К сожалению так и не смог установить bemtools, при инсталле ругается на всякие encodegen, coverjs и т.д.
    node -v v0.6.19
    npm -v 1.1.4
    Последние из репозиториев.
    • 0
      Можете код установки в gist положить и ссылку дать?
      • 0
        Отправил в личку
    • 0
      Если что
      $ node -v
      v0.8.16
  • 0
    Нравится БЭМ как философия. Но, по сути примерно то же самое стараются применять и другие фреймворки.
    Только не совсем понятно, зачем для разметки использовать json? Ведь html для этих целей не просто так зародился.
    Ну или yaml — от скобочек глаза резать не будет.

    Если идти дальше, то на мой взгляд, dojo предостовляет не сколько не худший вариант блочно-модульной архиетктуры. Только там шаблоны сверстаны на html, на не на json, и ничего не надо компилировать, чтобы отобразить страницу.

    Серверные фреймворки так же предлагают сборку страниц из блоков, а также удовлетворяют для этих блоков зависимости для js, css и image (возьмем хоть тот же symfony2 для php, или yii).

    Подход БЭМ удобен, без сомнения. Но, пока не стал бы его использовать у себя в проектах. Есть другие, более простые заменители с меньшим количеством зависимостей.

    На конец остался вопрос: «Как, например, из базы данных, выводить контент на собранные БЭМом страницы?». Нигде пока этого так и не увидел (может плохо смотрел).
    • 0
      YAML или что-то подобное у нас в планах.
      Ответ на ваш последний вопрос есть в этих видео: clubs.ya.ru/bem/replies.xml?item_no=1359
    • 0
      > Только не совсем понятно, зачем для разметки использовать json? Ведь html для этих целей не просто так зародился.

      в данном случае, html является не исходником, а результатом компиляции. поэтому, использовать html было бы не логично (на эти грабли постоянно наступают — см. ru.wikipedia.org/wiki/Самореференция) — для описания исходной структуры нужно использовать мета-язык. мне кажется, что json это какой-то панк, но принципиальной разницы в альтернативах нет.
    • 0
      bemjson содержит струкртуру страницы (более высокую абстракцию), которая путем работы шаблонизатора превращается в разметку html/css/js. Можно сравнить с электрической схемой — тут блок резистор, тут блок транзистор, а тут — микросхема ввода. Детали реализации (готовую плату) уже монтажник создает (в случае веб-страниц bemhtml)
  • –2
    Попробовать на вкус? Простите, но запаха вполне достаточно.
  • +1
    Объясните пожалуйста, в чём фишка такого подхода:
    content: [
        {
            block: '...',
            content: {
                block: '...',
                content: [
                    {
                        elem: '...',
                        content: '...'
                    },
                    {
                        elem: '...',
                        content: '...'
                    }
                ]
            }
        }
    ]
    

    Для двух блоков я написал четыре раза elem и пять раз content. Если это действительно так надо делать, то как это как это обойти/автоматизировать?
    Да и вообще, если посмотреть, то всё как-то избыточно. Объясните, в чём подвох?
    • 0
      Там всё одинаковое? Можно цикл написать, это обычный JavaScript.
    • 0
      А, если вы про глубокую вложенность, то такой уж JSON. В XML что-то выглядит лучше, но там свои недостатки.
      Надо попробовать YAML или что-то подобное, должно быть лучше.
      • 0
        Понятно.
        Однако, нужно признать, что с наслоением технологий повышается порог входа, что отнюдь не придает товарного вида БЭМу.
        Вообще, я так понял, что сейчас каждый во что горазд выкручивается и придумывает свои велосипеды, пока не найден оптимальный вариант реализации этой пресловутой технологии БЭМ.
  • –1
    ввел в поиск бэм, выдало bem.by/
  • –1
    БЭМ, хорош. Идея нравится, но полностью перейти на него так и не получилось. Нехватает примеров проектов более приближенных к реальным и примеров интеграции с серверными технологиями.
  • 0
    На этапе создания контейнера b-page__body-i я что-то завис. Будто бы не видит сервер мой b-page.bemhtml, при этом css в этой же директории подцепляется. Есть идеи, что не так?
    • 0
      Не думаю, что b-page.bemhtml не подцепляется, ведь до этого b-page__body у вас выводился? Могу подебажить, если на гитхаб куда-нибудь свои результаты зальёте.
      • 0
        О, спасибо! Заливать всю директорию проекта?
        • 0
          Да, с b-page__body все ок, но он приходит из bem-bl/blocks-desktop. Я подумал, может дело в каких-то зависимостях, которых я не вижу
      • 0
        • 0
          Сразу разобраться не получилось, но дело не в зависимостях — всё подключается. Похоже, что недавно переписали блок b-page и возможен баг. Я когда разберусь, напишу комментарий.
        • +2
          У вас файл с расширением «bemthml», а не «bemhtml». Переименуйте, и всё заработает.
          • 0
            :) Спасибо!
  • 0
    Делаю всё по инструкции.

    При запуске bem server и последующем запросе страницы localhost:8080/desktop.bundles/index/index.html получаю:

    HTTP error 500
    
    Error: Command failed: fatal: unable to connect to github.com:
    github.com[0: 192.30.252.128]: errno=No error
    
    
        at ChildProcess.exithandler (child_process.js:637:15)
        at ChildProcess.EventEmitter.emit (events.js:98:17)
        at maybeClose (child_process.js:735:16)
        at Process.ChildProcess._handle.onexit (child_process.js:802:5)
    

    Как быть в данной ситуации?

    P.S.: я нахожусь за прокси. Хотя мне всё равно не понятно, откуда берутся попытки залезть на github.com.
    • 0
      Хотя мне всё равно не понятно, откуда берутся попытки залезть на github.com.

      Судя по статье, используется bem-bl, а репозиторий этой библиотеки — на github.com.
      • 0
        Библиотеки подтягиваются после старта сервера?
        • 0
          да, библиотеки выкачиваются по необходимости уже во время работы сервера
          • 0
            А как Вы тогда профилируете?
            • 0
              не понял вопроса… если речь о профилировании работы сервера, то мы замеряем время сборки без учёта сетевых расходов
              • 0
                Если у вас по необходимости библиотека не подтянулась, вы об этом вообще узнаете?
                • 0
                  конечно — будет ошибка сборки, например как в исходном коментарии, когда из-за отсутствия соединения с github.com не скачалось что-то
                  • 0
                    Т.е. у нас сервер работает-работает, и внизапно, бац: ошибка сборки?
                    • 0
                      А можете прямо написать, к чему вы пытаетесь подвести? С наводящими вопросами, боюсъ, будет очень долго. Например не понятно «внезапно». Почему «внезапно»? Вы думаете, что этот сервер в продакшене работает?
                      • 0
                        Я думаю нельзя пускать такой сервер в production если он может не собраться только потому, что github лег.
                        • 0
                          Он не предназначен для работы в продакшене. Это сервер для разработки. Он умеет отслеживать изменения в файлах и пересобирать разные части проекта, чтобы разработчик не тратил на это время. В продакшене это не нужно, там пользуются сборкой.
                          • 0
                            Вона чо, теперь ясно
                        • 0
                          На вашем компьютере запустился bem server — инструмент для разработки, который будет автоматически пересобирать ваш проект, если вы внесете в него изменения.
                    • 0
                      Это dev-сервер, который нужен только разработчику. В случае ошибки сборки он даже не начнет работу.
    • 0
      Решил данный вопрос следующим образом:

      Оказалось, что проблема возникает, когда происходит попытка загрузить библиотеку с адреса:

      git://необходимая_библиотека
      

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

      git://необходимая_библиотека
      

      на ссылки вида:

      http://необходимая_библиотека
      

      После этого всё заработало.

      P.S.: Вероятно, прокси не понимает, что это за экзотический такой транспорт — git://.
      • 0
        Шикарно! Спасибо за решение, сидел тоже за прокси, не мог понять почему не качает либы :-)
  • 0
    -

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