EN
kompolom
kompolom
3 июля 2015

Хочу сделать следующую штуку.
Блок без модификатора - ленивая инициализация
Блок с модификатором - автоматическая

Возможен ли такой вариант?

tavriaforever
tavriaforever
3 июля 2015

Вопрос от @lehakos:
Скажите, пожалуйста, а как можно использовать jade вместо json формата для БЭМ? Есть ли такая практика вообще? :) И еще вопрос, хотелось бы использовать плагины Gulp вроде минификатора изображений, генератора спрайтов, livereload и т.д. Возможно ли это совместить с БЭМ сборщиком проекта?

Hurtsok
Hurtsok
2 июля 2015

Всем привет!

Очень интересную ситуацию наблюдаю при сборке примеров для документации на разных платформах (Windows, Linux/OS X) с использованием пакетов enb-bem-examples и enb-magic-factory. На Windows сборка проходит без ошибок на остальных возникает следующая ошибка:

  ~/src/drom-bem-makeup   master ●  enb make examples -n
16:14:26.665 - build started
16:14:27.446 - [failed] [blocks.examples/common-desktop/common-desktop.bemjson.js] file-provider
16:14:27.448 - [failed] [blocks.examples/common-mobile/common-mobile.bemjson.js] file-provider
16:14:27.448 - [rebuild] [blocks.examples/b-button/ee3ZC6dyTetTRFqbHHZqKvywwXM/ee3ZC6dyTetTRFqbHHZqKvywwXM.bemjson.js] file-provider
16:14:27.448 - [rebuild] [blocks.examples/b-button/wrlcu38vmkNaP3tb9gvwZXBiszI/wrlcu38vmkNaP3tb9gvwZXBiszI.bemjson.js] file-provider
16:14:27.448 - [rebuild] [blocks.examples/b-button/PNXYUr__M6VSB4YxqCmkdMhk2l0/PNXYUr__M6VSB4YxqCmkdMhk2l0.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-button/Ekw9TzRLS_fyQiOkC-Zi804eDzo/Ekw9TzRLS_fyQiOkC-Zi804eDzo.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-button/9y8JjzeQPxlsleieuSrVga8xv4U/9y8JjzeQPxlsleieuSrVga8xv4U.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-button/WgU-OFa8iJsKWLBtnoxXtfgoLCc/WgU-OFa8iJsKWLBtnoxXtfgoLCc.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-link/D1rJB4_MGVvbnFlNUN1xUlQvtpQ/D1rJB4_MGVvbnFlNUN1xUlQvtpQ.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-link/6O-IryxuQJM1YwYJYT_hHvf20NQ/6O-IryxuQJM1YwYJYT_hHvf20NQ.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-button/kreyF1JOyT4hpa2NBRIP_KwvWkY/kreyF1JOyT4hpa2NBRIP_KwvWkY.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-link/7PpftPzRoUzxzKCcgS8Xn51w1o/7PpftPzRoUzxzKCcgS8Xn51w1o.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/28tLGFFUSZMApDlzg9Hi-09cNzg/28tLGFFUSZMApDlzg9Hi-09cNzg.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/XCMcnEyp-kgOzxTPExe9Xyu6xUI/XCMcnEyp-kgOzxTPExe9Xyu6xUI.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/uIFN2UGU4DNbCgT2JACquwcCSUo/uIFN2UGU4DNbCgT2JACquwcCSUo.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/UgeVMmhNha9pAtahV7VjriQCt9I/UgeVMmhNha9pAtahV7VjriQCt9I.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/xhSZr6XvNYk0AwDEfeLBCjtMs1g/xhSZr6XvNYk0AwDEfeLBCjtMs1g.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-button/g7f-wx_WjkFq_MRA_Fzs9eRLCnQ/g7f-wx_WjkFq_MRA_Fzs9eRLCnQ.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/m-button-ico/cUvu2JGXCO5KN8cmKNt11ZL40nI/cUvu2JGXCO5KN8cmKNt11ZL40nI.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/xIo7WqepN6yOXUzXkxpVCwoPtLw/xIo7WqepN6yOXUzXkxpVCwoPtLw.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/QD3PyE2oaSabCQ_mcdAbZliSAME/QD3PyE2oaSabCQ_mcdAbZliSAME.bemjson.js] file-provider
16:14:27.586 - [rebuild] [blocks.examples/common-desktop/common-desktop.levels] levels
16:14:27.586 - [rebuild] [blocks.examples/common-mobile/common-mobile.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/ee3ZC6dyTetTRFqbHHZqKvywwXM/ee3ZC6dyTetTRFqbHHZqKvywwXM.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/wrlcu38vmkNaP3tb9gvwZXBiszI/wrlcu38vmkNaP3tb9gvwZXBiszI.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/PNXYUr__M6VSB4YxqCmkdMhk2l0/PNXYUr__M6VSB4YxqCmkdMhk2l0.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/Ekw9TzRLS_fyQiOkC-Zi804eDzo/Ekw9TzRLS_fyQiOkC-Zi804eDzo.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/9y8JjzeQPxlsleieuSrVga8xv4U/9y8JjzeQPxlsleieuSrVga8xv4U.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/WgU-OFa8iJsKWLBtnoxXtfgoLCc/WgU-OFa8iJsKWLBtnoxXtfgoLCc.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-link/D1rJB4_MGVvbnFlNUN1xUlQvtpQ/D1rJB4_MGVvbnFlNUN1xUlQvtpQ.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-link/6O-IryxuQJM1YwYJYT_hHvf20NQ/6O-IryxuQJM1YwYJYT_hHvf20NQ.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/kreyF1JOyT4hpa2NBRIP_KwvWkY/kreyF1JOyT4hpa2NBRIP_KwvWkY.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-link/7PpftPzRoUzxzKCcgS8Xn51w1o/7PpftPzRoUzxzKCcgS8Xn51w1o.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-link/28tLGFFUSZMApDlzg9Hi-09cNzg/28tLGFFUSZMApDlzg9Hi-09cNzg.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-link/XCMcnEyp-kgOzxTPExe9Xyu6xUI/XCMcnEyp-kgOzxTPExe9Xyu6xUI.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-link/uIFN2UGU4DNbCgT2JACquwcCSUo/uIFN2UGU4DNbCgT2JACquwcCSUo.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-link/UgeVMmhNha9pAtahV7VjriQCt9I/UgeVMmhNha9pAtahV7VjriQCt9I.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-link/xhSZr6XvNYk0AwDEfeLBCjtMs1g/xhSZr6XvNYk0AwDEfeLBCjtMs1g.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-button/g7f-wx_WjkFq_MRA_Fzs9eRLCnQ/g7f-wx_WjkFq_MRA_Fzs9eRLCnQ.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/m-button-ico/cUvu2JGXCO5KN8cmKNt11ZL40nI/cUvu2JGXCO5KN8cmKNt11ZL40nI.levels] levels
16:14:27.589 - [rebuild] [blocks.examples/b-link/xIo7WqepN6yOXUzXkxpVCwoPtLw/xIo7WqepN6yOXUzXkxpVCwoPtLw.levels] levels
16:14:27.589 - [rebuild] [blocks.examples/b-link/QD3PyE2oaSabCQ_mcdAbZliSAME/QD3PyE2oaSabCQ_mcdAbZliSAME.levels] levels
16:14:27.590 - build failed
16:14:27.597 - build failed
Error: File not found: /Users/rudoy/src/drom-bem-makeup/blocks.examples/common-desktop/common-desktop.bemjson.js
    at /usr/local/lib/node_modules/enb-bem-examples/node_modules/enb/techs/file-provider.js:47:49
    at FSReqWrap.cb [as oncomplete] (fs.js:212:19)

Кусок кода отвечающий за сборку примеров и их бандлов:

var factory = config.module('enb-magic-factory'),
        helper = factory.getHelper('examples');

    helper.prebuild(function(magicConfig){
        magicConfig.registerNode('blocks.examples/common-desktop');
        magicConfig.registerNode('blocks.examples/common-mobile');
    });

    helper.configure(function(config, nodes, targets){
        var nodes = nodes;
        config.nodes(nodes, function(nodeConfig){
            if(nodeConfig.getPath() === appConfig.examplesDir + '/common-desktop' || nodeConfig.getPath() === appConfig.examplesDir + '/common-mobile'){
                var depsDesktop = [],
                    depsMobile = [];

                nodeConfig.addTechs([
                    [ require('enb-bem-techs/techs/levels'), {levels: getExamplesLevels(config)} ],
                    [ enbBemTechs.files ],
                    [ techs.js ]
                ]);

                nodes.forEach(function (node) {
                    if (!/\/.*common.*/.test(node)) {
                        var pathNorm = path.normalize(node),
                            splitedPath = pathNorm.split(path.sep);

                        if(/m\-.\w*/.test(node)){
                            depsMobile.push(splitedPath[splitedPath.length - 1] + '.deps.js');
                            nodeConfig.addTechs([
                                //copy deps files to common-mobile dir
                                [ enbBemTechs.provideDeps, { node: pathNorm,  target: splitedPath[splitedPath.length - 1] + '.deps.js' } ],
                            ]);
                        }else{
                            depsDesktop.push(splitedPath[splitedPath.length - 1] + '.deps.js');
                            nodeConfig.addTechs([
                                //copy deps files to common-desktop dir
                                [ enbBemTechs.provideDeps, { node: pathNorm,  target: splitedPath[splitedPath.length - 1] + '.deps.js' } ],
                            ]);
                        }

                    }
                });

                //merge bundle
                if(nodeConfig.getPath() === appConfig.examplesDir + '/common-mobile'){
                    nodeConfig.addTechs([
                        [ enbBemTechs.mergeDeps, { sources:  depsMobile }]
                    ])
                }
                if(nodeConfig.getPath() === appConfig.examplesDir + '/common-desktop'){
                    nodeConfig.addTechs([
                        [ enbBemTechs.mergeDeps, { sources:  depsDesktop }]
                    ])
                }

                nodeConfig.addTechs([
                    //bemhtml
                    [ techs.bemhtml, { sourceSuffixes: [ 'bemhtml', 'bemhtml.js' ] } ],
                    //css
                    [ techs.cssStylus, {target: '?.noprefix.css'}],
                    [ techs.cssAutoprefixer, {
                        sourceTarget: "?.noprefix.css",
                        destTarget: '?.css',
                        browserSupport: ["> 2%", "last 2 versions", "Firefox ESR", "Opera 12.1", "Android >= 4", "iOS >= 5"]
                   }]
                ]);

                nodeConfig.addTargets(['?.js', '?.css', '?.bemhtml.js']);

            }else {
                nodeConfig.addTechs([
                    [require('enb-bem-techs/techs/levels'), {levels: getExamplesLevels(config)}],
                    [enbBemTechs.bemjsonToBemdecl],
                    [enbBemTechs.depsOld],
                    [enbBemTechs.files],
                    //CSS
                    [techs.cssStylus, {target: '?.noprefix.css'}],
                    [techs.cssAutoprefixer, {
                        sourceTarget: "?.noprefix.css",
                        destTarget: '?.css',
                        browserSupport: ["> 2%", "last 2 versions", "Firefox ESR", "Opera 12.1", "Android >= 4", "iOS >= 5"]
                    }],
                    //BEMHTML
                    [techs.bemtree, {sourceSuffixes: ['bemhtml', 'bemhtml.js']}],
                    //BEMHTML
                    [techs.bemhtml, {sourceSuffixes: ['bemhtml', 'bemhtml.js']}],
                    //HTML
                    [techs.htmlBeautify],
                    [techs.htmlFromJSON],
                    //client JS
                    [techs.browserJs],
                    [techs.fileMerge, {target: '?.pre.js', sources: ['?.bemhtml.js', '?.browser.js']}],
                    [techs.prependYm, {source: '?.pre.js'}]
                ]);

                nodeConfig.addTargets(['?.js', '?.css', '?.html', '?.browser.js', '?.beauty.html', '?.bemtree.js']);
            }
        });
    });

Ошибка возникает на этапе сборки бандлов(common-desktop и common-mobile) . При сборке которых нет необходимости провайдить .bemjson.js.

Не много дебага с помощьюnode.getTechs().

if(nodeConfig.getPath() === appConfig.examplesDir + '/common-desktop' || nodeConfig.getPath() === appConfig.examplesDir + '/common-mobile'){
           console.log(nodeConfig.getTechs());
           ......
}

На Windows результат будет пустой
на OS X/Linux [ { _options: { target: '?.bemjson.js' } } ]

Хотелось бы разобраться, почему сборка ведет себя по разному на разных платформах?

AndreyGladkov
AndreyGladkov
3 июля 2015

Проблема следующая есть блоки

{
    block: 'form-input',
    name: 'user',
}

Как все понимают элемент формы input, и есть блок

{
    block: 'form-input',
    name: 'tel',
    js: true,
    mods: {type: 'tel'},
    maxlength: '13'
}

Блок с модификатором, проблема с шаблоном, сейчас у него изменился шаблон относительно других inputов, я заюзал новый шаблон, но проблема в том что при сборке этот блок собирается сначала без модификатора потом с модификатором, получается вложенность.
Как избежать подобной проблемы?

block('form-input')(
    //code
);

block('form-input').mod('type', 'tel')(
  //code
);
tadatuta
tadatuta
26 июня 2015

Существует несколько способов подключения bem-библиотек на свой проект.

Здесь я рассмотрю варианты подключения заранее собранных версий, их 4:

  1. Подключить напрямую с CDN Яндекса
  2. Установить собранные библиотеки через bower
  3. Самостоятельно собрать из исходников
  4. Воспользоваться альфа-версией кастомного билдера

Каждый вариант отличается только первым шагом, дальнейшее использование совпадает.

Подключить напрямую с CDN Яндекса

Это самый простой способ. Достаточно подключить необходимые файлы (см. раздел «Состав») в HTML и готово:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components dist</title>
    <link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
</head>
<body class="page page_theme_islands">
    <!-- write your code here -->
    <script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bh.js"></script>
</body>
</html>

Более полный вариант базовой HTML-разметки, включающий поддержку IE8 и определение наличия JS в браузере см. в конце поста.

Установить собранные библиотеки через bower

При условии, что bower у вас уже установлен, достаточно выполнить
bower i bem/bem-components-dist#v2 (либо bower i bem/bem-core-dist#v2).

Далее просто прописать путь к необходимым файлам в HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components dist</title>
    <link rel="stylesheet" href="bower_components/bem-components-dist/desktop/bem-components.css">
</head>
<body class="page page_theme_islands">
    <!-- write your code here -->
    <script src="bower_components/bem-components-dist/desktop/bem-components.js+bh.js"></script>
</body>
</html>

Самостоятельно собрать из исходников

Этот вариант подойдет тем, кто хочет собрать еще не выпущенную версию.
Для этого потребуется:

git clone https://github.com/bem/bem-components.git
cd bem-components
npm i
npm run dist

В результате в корне bem-components появится папка dist со всеми необходимыми файлами.

Подключение не отличается от предыдущего варианта.

Воспользоваться альфа-версией кастомного билдера

Важно! На данный момент билдер не тестируется и в целом работоспособность сервиса никак не гарантируется. Используйте на собственный страх и риск.

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

Чтобы получить бандлы, нужно отметить нужные блоки. В ответ будут сгенерированы ссылки на скачивание.

Как работать с подключенными библиотеками

Тут снова возникает несколько вариантов.

Общая часть состоит в том, чтобы найти нужные блоки на bem.info.

Допустим, нужен блок select. Среди примеров нужно найти тот, который больше всего подходит.

Далее 3 варианта:

  1. Просто скопировать нужный HTML из примера и поправить его под свои нужды (для этого нужно нажать на HTML в шапке примера).
    Этот вариант максимально простой, но очевидно, что при обновлении шаблонов в последующих версиях библиотеки апдейт потребует ручного внесения изменений в каждый обновленный блок.

  2. Воспользоваться шаблонизацией на клиенте (dist включает предсобранные шаблоны BEMHTML и BH на выбор).

Для этого вместо готового HTML-кода следует брать из документации с примерами BEMJSON (кнопка рядом). Получится что-то типа:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components as a library</title>
    <link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
</head>
<body class="page page_theme_islands">
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js"></script>
<script>
modules.require(['i-bem__dom', 'BEMHTML', 'jquery'], function(BEMDOM, BEMHTML, $) {
    var html = BEMHTML.apply({
        block : 'select',
        mods : { mode : 'check', theme : 'islands', size : 'm' },
        name : 'select1',
        val : [2, 3],
        text : 'Программа конференции',
        options : [
            { val : 1, text : 'Доклад' },
            { val : 2, text : 'Мастер-класс' },
            { val : 3, text : 'Круглый стол' }
        ]
    });

    BEMDOM.append($('.page'), html);
});
</script>
</body>
</html>

Такой код гораздо удобнее обновлять, но он не будет индексироваться, поэтому подойдет скорее для веб-приложений и прочих админок.

А третий вариант — это выполнять {BEMHTML,BH}.apply() на ноде и отдавать браузеру уже готовый HTML:

var BEMHTML = require('./dist/desktop/bem-components.bemhtml.js').BEMHTML;

BEMHTML.apply({
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select1',
    val : [2, 3],
    text : 'Программа конференции',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}); // вернется HTML-строка

Разумеется, все три варианта можно произвольно комбинировать.

Как еще можно пользоваться dist-ом

Т.к. файлы теперь доступны с CDN, можно использовать их на разнообраных песочницах вроде jsfiddle: https://jsfiddle.net/bmu7bkne/4/ или http://jsfiddle.net/bmu7bkne/

Состав

bem-core

Доступны отдельные наборы файлов для двух платформ:

  • desktop
  • touch

Каждый набор включает в себя:

И аналогичные dev-версии (с сохранием форматирования и комментариев):

  • bem-core.dev.css
  • bem-core.dev.js
  • bem-core.dev.bemhtml.js
  • bem-core.dev.bh.js
  • bem-core.dev.js+bemhtml.js
  • bem-core.dev.js+bh.js

bem-components

На данный момент доступны отдельные наборы файлов для трех платформ:

  • desktop
  • touch-pad
  • touch-phone

Однако каких-либо отличий в коде между touch-pad и touch-phone нет, поэтому планируется их объединение.

Каждый набор включает в себя:

  • bem-components.css # стили
  • bem-components.ie.css # стили для IE8 (подробнее)
  • bem-components.js # JS
  • bem-components.bemhtml.js # BEMHTML-шаблоны
  • bem-components.bh.js # BH-шаблоны
  • bem-components.js+bemhtml.js
  • bem-components.js+bh.js

И аналогичные dev-версии (с сохранием форматирования и комментариев):

  • bem-components.dev.css
  • bem-components.dev.ie.css
  • bem-components.dev.js
  • bem-components.dev.bemhtml.js
  • bem-components.dev.bh.js
  • bem-components.dev.js+bemhtml.js
  • bem-components.dev.js+bh.js

Схема подключения с CDN: //yastatic.net/название-библиотеки/версия/платформа/имя-файла.
Например, //yastatic.net/bem-components/latest/desktop/bem-components.dev.js+bh.js.

Полный вариант базовой HTML-разметки

<!DOCTYPE html>
<html class="ua_js_no">
<head>
    <!--[if lt IE 9]><script src="https://yastatic.net/es5-shims/0.0/es5-shims.min.js"></script><![endif]-->
    <meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>bem-components dist</title>
    <script>(function(e,c){e[c]=e[c].replace(/(ua_js_)no/g,"$1yes");})(document.documentElement,"className");(function(d,n){d.documentElement.className+=" ua_svg_"+(d[n]&&d[n]("http://www.w3.org/2000/svg","svg").createSVGRect?"yes":"no");})(document,"createElementNS");</script>
    <!--[if gt IE 8]><!--><link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css"/>
    <!--<![endif]--><!--[if lte IE 8]><link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.ie.css"/><![endif]-->
</head>
<body class="page page_theme_islands">
<!-- write your code here -->
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bh.js"></script>
</body>
</html>
pavelpower
pavelpower
30 июня 2015

Было хотели прикрутить enb-bem-specs

В общем полная беда.
Templates только на bemhtml, а мы пользуемся BH - ибо он по мнению команды понятнее.

Потом, как оказалось он тянет за собой блок jquery - которого у нас просто нет, а еще хочет i-bem.

i-bem

В общем очень странные желания для сборки тестов и не понятно почему ему нужен так jquery, и i-bem?

Итог выглядит печально:

Так может кто уже получил опыт заведения unit-тестирования без i-bem, jquery?

Видится это примерно так:

В блоках файлы *.spec.js

В которых написаны тесты в BDD стиле.

Сборка происходит в отдельную папочку, и для сборки используются только те слои переопределения кои используются для development мода.

apsavin
apsavin
2 июля 2015

Вот здесь https://ru.bem.info/technology/i-bem/v2/i-bem-js/#%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%B2-%D0%B4%D0%B5%D0%BA%D0%BB%D0%B0%D1%80%D0%B0%D1%86%D0%B8%D0%B8

Вместо modules.define('button', ['i-bem'], function(provide, Button) {

Должно быть modules.define('button', function(provide, Button) {

Не нашел репозиторий bem.info, чтобы поправить самому. Почему нету на него ссылки нигде на сайте? Или какой-нибудь штуки типа "нашли ошибку?".

bradbenetton
bradbenetton
1 июня 2015

Всем привет!

Создаю свою библиотеку, один из блоков без BEMHTML (для него описал только стили). При подключении библиотеки выдается ошибка ENOENT, что нет BEMHTML. Так и должно быть или это глюк?
Если создать пустой BEMHTML, то все работает.
Собираю проект с помощью enb. Кеш скидывал.

OlgaVoz
OlgaVoz
24 июня 2015

Ребята, помогите решить задачку, хочется сделать по уму:

У меня есть две страницы в bundles: page1 и page2. Эти страницы очень похожи, разница в том, что page2 немного более расширена ( добавляются информационные блоки). В результате нужно иметь две страницы с чистым исходным кодом ( чтобы дополнительные блоки были только на странице page2).

Так как дизайн дорабатывается, да и для удобства поддержки, не хочется дублировать одинаковые на этих двух страницах вещи. Одинаковый блок, кроме текста, содержит ещё компоненты ( как стандартные из bem-components, так и самописные), да и вообще, представляет собой внушительную портянку.

Как сделать правильнее? Я пока вижу такие варианты:

  1. создать блок common_page и в bemhtml прописать там всю информацию для общей информации. После этого, подключать этот блок на странице page1 и page2. Отсюда возникают вопросы, правильно ли писать столько html в данном случае ( в bemjson около 1500 строк кода ) и будут ли работать стандартные и самописные компоненты? Ну и, конечно, переписывать 1500 строк кода совсем не хочется.

  2. придумать что-то типа @import(page1) для страницы page2. Возможно ли такая реализация?

  3. попытаться решить через модификатор ( расширенная страница - page2 или обычная - page1). Но при этом у меня должно в bundles так и остаться 2 физические страницы с чистым кодом. Как тогда организовать работу модификатора?

timonefm
timonefm
18 июня 2015

Еще не розобрался,
хедер :
слева лого-картинка
справа кнопка входа
меню :
4 кнопки ссылки по горизонтали
основа :
1 блок контейнер с иконками
2 блок что-то похожее на календать
3 блок аналогичен 2му
4 - кнопака слева, картинка справа
футер :
бэкграунд 3 таблицы с текстом

При создании дерева в хедере - логотип пропадает остается только кнопка.

AndreyGladkov
AndreyGladkov
25 июня 2015

Ребят подскажите какой инструмент использовать для подсветки синтаксиса?
Помимо верстки делается руководство стиля оно представляет собой ту же сборку bem блоков
Сейчас юзаю prism.js, но так как enb в процессе сборки сжимает код в строку результат получается в строку, а хочется что бы
с отступами и новыми строками.

vegas0250
vegas0250
9 июня 2015

Философия "не mvc" ?

  1. Насколько я понял, методология придерживается идеи 1 страницы. Т.е. у нас нет $layout в котором лежит $content, где $content это какая-то view'ха. Как разрешить этот вопрос в рамках методологии БЭМ? Все что у нас есть это макеты в .bundlers и блоки в .blocks.

  2. Мы сверстали статику, и получили index.html, index.css, index.js, мы отдали это backend'у, на баке прогреры натыкают переменных которые пришли из контроллеров, и как только появляется необходимость поменять структуру странички, например добавить блок "заявки", то начинается боль. Нам снова надо пересобрать страничку через bem и отдать прогерам перезаписав работу бакендчиков? Как избежать этой боли?

UsenkoJaroslav
UsenkoJaroslav
24 июня 2015

Например у меня есть блок Thing

block("thing")(
  attrs()({
    "itemscope": "",
    "itemtype": "http://schema.org/Thing"
  })
);

И я хочу чтоб блок Product наследовался от Thing

block("product")(
  attrs()({
    "itemtype": "http://schema.org/Product"
  })
);

и на выходе получал:
<div class="product thing" itemscope itemtype="http://schema.org/Product"></div>
Возможно ли такое?

Guria
Guria
5 июня 2015

@tavriaforever что-то случилось с сортировкой тегов при создании нового поста:

По данному запросу найдены посты в архиве:
Перейти в архив

Сортировка

Метки