Ответы пользователя по тегу БЭМ
  • Возможен dom в json формате?

    @ilyarsoftware
    Да это возможно, например BEMJSON:
    {
      tag : 'div',
      attrs : {
        id : 'anchor1',
        name : 'BEM',
      },
      content : [
        {
          tag : 'div',
          attrs : {
            id : 'anchor2',
            name : 'BEM 2',
          },
          content : 'BEM text'
        },
      ]
    }

    После прогона через стандартные шаблоны BEMHTML получим (живой пример):
    <div id="anchor1" name="BEM">
        <div id="anchor2" name="BEM 2">BEM text</div>
    </div>


    Еще может быть для вашей задаче подойдет BEMTREE. При помощи BEMTREE описывается шаблон обработки JSON-данных, который преобразует данные в BEMJSON и далее через BEMHTML получаем HTML. Пример:

    Есть данные:

    {
      "content": "BEM Block!",
      "title": "I am BEM"
    }


    Описываем трансформацию данных в BEMJSON на технологии BEMTREE:

    block( 'someBlock' )(
      def()( function () {
        var data = this.ctx.data || {};
        this.ctx.content = [
          { elem : 'title', content : data.title || 'Empty title' },
          { elem : 'content', content : data.content || 'Empty content' },
        ];
        return applyNext();
      } )
    );


    После применения на данных мы получим BEMJSON, останется только применить BEMHTML. Это и есть двухпроходная шаблонизация.

    Тут jsfiddle.net/ilyar/5dw8Q и тут https://goo.gl/GRGSFf — живой пример применения BEMTREE в браузере (можно и на сервере применяя те же шаблоны).
    Ответ написан
    1 комментарий
  • Как правильно давать имена блоков по БЭМ c глубокой вложенностью?

    @ilyarsoftware
    Есть смысл разбить на два блока:
    <!-- микс блока wrapper, но можно и не миксовать, если нужно -->
    <div class="header wrapper">
      <!-- элемент блока wrapper -->
      <div class="wrapper__left">
        <!-- aside элемент блока header c модификатором pink -->
        <div class="header__aside header__aside_pink"/>
      </div>
      <!-- элемент блока wrapper -->
      <div class="wrapper__right">
        <!-- aside элемент блока header c модификатором blue -->
        <div class="header__aside header__aside_blue"/>
      </div>
    </div>

    Если надо одним блоком:
    <div class="header">
      <!-- wrappe элемент блока header -->
      <div class="header__wrapper">
        <!-- wrapperLeft элемент блока header -->
        <div class="header__wrapperLeft">
          <!-- aside элемент блока header c модификатором pink -->
          <div class="header__aside header__aside_pink"/>
        </div>
        <!-- wrapperRight элемент блока header -->
        <div class="header__wrapperRight">
          <!-- aside элемент блока header c модификатором blue -->
          <div class="header__aside header__aside_blue"/> 
        </div>
      </div>
    </div>

    или
    <div class="header">
      <!-- wrapper элемент блока header c модификатором left -->
      <div class="header__wrapper header__wrapper_left">
        <!-- aside элемент блока header c модификатором pink -->
        <div class="header__aside header__aside_pink"/>
      </div>
      <!-- wrapper элемент блока header c модификатором right -->
      <div class="header__wrapper header__wrapper_right">
        <!-- aside элемент блока header c модификатором blue -->
        <div class="header__aside header__aside_blue"/>
      </div>
    </div>


    Конечное решение зависит от проекта и вашего подхода к его реализации. Методология гибкая и не диктует реализацию строго.
    Ответ написан
    Комментировать
  • Как собирать готовые блоки из компонентов Material Design Light, следуя BEM?

    @ilyarsoftware
    Библиотека MDL применяет БЭМ используя альтернативную схему именования т.н. «Стиль Гарри Робертса».

    Если следовать этой схеме, то надо заменить demo-card-wide на модификатор mdl-card--theme-demo:
    <div class="mdl-card mdl-card--theme-demo mdl-card mdl-shadow--2dp"/>

    Демонстрация

    Важно отметить mdl-card--theme-demo это булев модификатор, в этой схеме именования модификаторы вида «ключ-значение» не используются и они могут существовать отдельно от блока примиксовываясь к другим блокам как mdl-shadow--2dp из примера .
    Ответ написан
    Комментировать
  • Как делать кнопки БЭМ?

    @ilyarsoftware
    Все верно, основной класс .btn описывает общий стиль, а .btn_search модификацию или дополнение, применяем следующим образом:

    <div class="btn btn_search">search</div>

    Стоит отметить, что .btn_search т.н. булев модификатор, по методологии может быть еще модификатор вида «ключ-значение» .btn_type_search (см. подробнее Соглашение по именованию/Имя модификатора). Предположу, что для вашей задачи больше подойдет модификатора вида «ключ-значение»:

    <div class="btn btn_type_search">search</div>
    <div class="btn btn_type_submit">submit</div>


    Рекомендую посмотреть на блок button из библиотеки bem-components.
    Ответ написан
    1 комментарий
  • Альтернатива html шаблонизотру от Bem?

    @ilyarsoftware
    Любой, а точнее в вашем случае с поддержкой JSON, например NANO, хотя, грубо говоря, ближе к BH/BEMHTML, можно назвать json2html, пример использования json2html с CSS из bem-components:

    var data = [
      {
        'text': 'BEM — BEM Easy Makeup',
        'url': 'https://ru.bem.info/',
      },
    ];
    
    var template = {
      tag: 'a',
      class: 'button button_theme_islands button_size_xl',
      href: '${url}',
      children: [
        {
          tag: 'span',
          class: 'icon icon_social_twitter',
        },
        {
          tag: 'span',
          class: 'button__text',
          html: '${text}',
        },
      ]
    };
    document.body.innerHTML = json2html.transform( data, template );

    Демо на jsfiddle

    Уверен есть и другие, но все они не будут знать про БЭМ-термины и поэтому придется добавить хеперов для работы с боками, элементами, модификаторами и пр.

    На текущий момент мне не известно ничего удобнее BH/BEMHTML, но если такой шаблонизатор появится, его опубликуют в разделе bem.info/Проекты на БЭМ.
    Ответ написан
    Комментировать
  • Возможно ли использование i-bem.js без "BEM"?

    @ilyarsoftware
    Если я правильно понял вопрос, то такие "глупости" возможны:
    <!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>

    Этот пример из темы dist-поставка bem-core/bem-components, или Использ... еще будет полезен доклад Чем bem-components лучше Bootstrap.

    П.С. Пример вместе с bem-components, если надо только bem-core.js+bh.js, смотрите bem-core-dist.
    Ответ написан
    Комментировать
  • Почему gulp-bem не собирает проект?

    @ilyarsoftware
    Если судить по примеру из тестов: https://github.com/floatdrop/gulp-bem/tree/master/...
    то должно быть так: https://github.com/SmirnovW/bem-test/pull/1/files

    $ git clone https://github.com/ilyar/bem-test.git && cd bem-test && npm i
    $ gulp
    [14:19:01] Using gulpfile ~/lab/bem-test/gulpfile.js
    [14:19:01] Starting 'default'...
    [14:19:01] Finished 'default' after 146 ms
    $ cat dist/index.css 
    .menu {
    	list-style: none;
    	color: green;
    }
    
    .menu__item {
    	margin-left: 10px;
    }
    Ответ написан
    3 комментария
  • Как добавить normalize.css в проект на bem ENB?

    @ilyarsoftware
    В приведенном примере указание зависимостей для технологии tmpl-spec.js — используется для тестов на шаблоны, по этой причине { block: 'normalize' } не попадает в css при сборке, чтобы подключить на проект стили и скрипты блоков desctop.blocks/page/page.deps.js:
    [{
        mustDeps: { block: 'normalize' },
    }]


    Пример описания зависимости по технологиям вместе общими зависимостями блока https://github.com/ilyar/bem-examples/blob/master/...

    Подробнее об описании зависимостей https://ru.bem.info/technology/deps/about/

    И все таки использовать глобальные стили (normalize/reset) противоречит прицепу: "Блок — независимый компонент", подробнее: опыт и рекомендация.
    Ответ написан
    Комментировать
  • Не перегружает ли style.css пространство имён классов по принципам БЭМ?

    @ilyarsoftware
    БЭМ не догма и только про css, как любой другой паттерн проектирования он помогает управлять сложностью, ограничение которые можно увидеть это субъективное восприятие наблюдателя.

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

    Дополнение по примеру, если nav-theme__name это модификатор со значением name, то следуя классическому наименованию правильно будет nav-menu_theme_name (block_mod_value).

    Соглашение об наименовании является конкретикой и в этом аспекте важно не отходить от договоренностей.

    Дополнительно рекомендую посмотреть https://ru.bem.info/forum/?labels=css

    И все таки использовать глобальные стили (normalize/reset) противоречит прицепу: "Блок — независимый компонент", подробнее: опыт и рекомендация.
    Ответ написан
    Комментировать
  • Как настроить права в linux ubuntu, чтобы не париться?

    @ilyarsoftware
    Рекомендую настроить npm для текущего пользователя и не использовать sudo:

    echo "prefix=~/.local" > ~/.npmrc
    echo "export NODE_PATH=\$NODE_PATH:~/.local/lib/node_modules" >>  ~/.bashrc
    echo "export PATH=~/.local/bin:\$PATH" >>  ~/.bashrc
    echo "export PATH=./node_modules/.bin:\$PATH" >>  ~/.bashrc
    source ~/.bashrc

    После этого надо переустановить все глобальные пакеты.
    Ответ написан
    2 комментария
  • Как исправить ошибку при установке BEM?

    @ilyarsoftware
    Судя по сообщению есть проблема с правами на запись, вероятно к папке C:\Users\antonowano\.config\configstore.

    Ошибка связана с попыткой проверить на актуальность пакет bower.

    Надо убедиться что bower установлен, еще попробуй почистить кеш npm и обновить глобальные пакеты:
    npm i -g bower
    npm cache clean
    npm update -g
    Ответ написан
    5 комментариев
  • Как собрать SailsJS и BEM в один проект?

    @ilyarsoftware
    Заготовка SailsJS проекта с БЭМ внутри: sails-bem-project-stub.
    Ответ написан
    2 комментария
  • Что нужно знать, чтобы запустить bem проект на реальном сервере?

    @ilyarsoftware
    БЭМ это методология и можно найти много различный реализаций задач веб-проекта с использованием этой методологии.

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

    • bem-flashcards для сборки использует Node.js, для подготовки словаря из XLS-файла есть ruby-скрипт, результат статика для работы нужен веб-сервер и браузер;
    • bem-forum использует Node.js для сборки и работы, поэтому необходимый минимум: веб-сервер и Node.js;
    • Вот хороший пример использования проекта-заготовки project-stub https://github.com/tavriaforever/project-stub подробнее можно прочитать тут тоже использует Node.js для сборки статики, в проекте настроена команда подготовки файлов для публикации, после ее выполнения все необходимые файлы для работы результата помещаются в папку dist;
    • bh-php библиотека позволяет использовать PHP на сервере для конвертации BEMJSON в HTML;
    • Встречал реализации на ruby.


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

    Стоит отметить что большинство проектов используют JavaScript и Node.js либо только для сборки, но есть и проекты которым Node.js нужен на сервере, в статье Изоморфный БЭМ об этом рассказано подробнее.
    Ответ написан
    1 комментарий
  • Как создать в bem: в блоке блок?

    @ilyarsoftware
    Для того что бы создавать файлы блоков в desktop.blocks/block1 командой:

    bem create -l desktop.blocks/block1 -b block2 -T css


    Надо создать файл описания уровня desktop.blocks/block1/.bem/level.js с содержанием:

    exports.baseLevelPath = require.resolve('../../../.bem/levels/blocks.js');


    В результате для bem-tools папка block1 будет не просто папкой блока, а еще уровнем переопределения подобно desktop.blocks. Если это может показаться удобным, посмотри тему Группировка блоков внутри уровня переопределения.

    Для полноты ответа, важно отметить, для того использовать приведенный bemjson, достаточно создать блок block2 командой:

    bem create -l desktop.blocks/ -b block2 -T css

    Блоки это самостоятельные компоненты которые не должны знать о том куда они могут быть вложены (конечно могут быть исключения). Они создаются на уровне переопределения без иерархии, а вложенность описывается в bemjson.
    Ответ написан
  • Как решить проблему с Roole в БЭМ?

    @ilyarsoftware
    Модуль roole это CSS-препроцессор Rool, устанавливается в проекте:

    npm install roole --save
    ...но он на текущий момент не нужен, потому что project-stub и другие основные БЭМ-проекты перешли на stylus другой CSS-препроцессор, если твоя цель изучать БЭМ по ru.bem.info/articles/start-with-project-stub, начни с начало.
    Ответ написан
    Комментировать