• Как правильно указывать пути для уровней - levels в БЭМ?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Нужно создать файл .bemrc в корне проекта (откуда запускается команда bem create), например:

    module.exports = {
      levels: {
        "components/common.blocks": { default: true },
        "components/desktop.blocks": {},
        "design/common.blocks": {},
        "design/desktop.blocks": {},
      },
      libs: {
        "node_modules/bem-core/common.blocks": {},
        "node_modules/bem-core/desktop.blocks": {},
        "node_modules/bem-components/common.blocks": {},
        "node_modules/bem-components/desktop.blocks": {},
      },
      modules: {
       "bem-tools": {
          plugins: {
            create: {
              techs: [ "post.css", "browser.js", "bemtree.js", "bemhtml.js", "deps.js", "md" ],
              templateFolder: ".bem/templates",
              levels: {
                "components/common.blocks": {
                  default: true,
                  techs: [ "browser.js", "bemtree.js", "bemhtml.js", "deps.js", "md" ]
                },
                "design/common.blocks": {
                  techs: [ "post.css", "deps.js" ]
                },
                "design/desktop.blocks": {},
              },
            }
          }
        },
      }
    }
    Ответ написан
  • Как в bem-create создавать файлы?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Конфигурация структуры файловой системы берётся из файла .bemrc в корне проекта: https://github.com/bem/bem-sdk/tree/master/package... — соответственно, нужно задать "scheme": "flat".
    Ответ написан
  • Отделение модификатора по БЭМ: нижнее подчеркивание или два дефиса?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    1) Даже «видные» разработчики не всегда в состоянии дочитать документацию до конца (собственно, это и является причиной появления других «адаптаций» БЭМ). Основная причина использование подчёркиваний — не «ругается» редактор, который воспринимает два дефиса подряд как ошибочный HTML-комментарий. А «благодорить» за это нужно, наверное, Гарри Робертса, который тоже «ниасилил» официальную документацию, бросил где-то на середине и остальное, видимо, домыслил, популяризовав абсолютно бесполезную адаптацию (например, он так и не узнал, что модификаторы записываются в формате «ключ-значение»), не имеющего ничего общего с БЭМ (но активно использующую официальную терминологию).
    2) Разделитель может быть любым. Желательно просто, чтобы он был явным и не допускал разночтения и ошибочных толкований. Но, как я уже написал выше, два дефиса могут неправильно выделяться в HTML-редакторе и непонятно, чем разделять значение модификатора в формате «ключ-значение».

    P. S.: БЭМ-разработчики вообще вручную не пишут эти разделители, используя вместо это декларации БЭМ-сущностей (блоков, элементов и их модификаторов) — разделители подставляются автоматически при сборке и их в любой момент можно переопределить (заменить подчёркивание на дефис) и пересобрать заново (псевдокод):

    // Default
    block('my-block').elem('my-elem'); // => `my-block__my-elem`
    
    // React-style
    block('my-block').elem('my-elem'); // => `MyBlock-MyElem`
    Ответ написан
    Комментировать
  • Какой смысл использовать bemjson?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Это удобно, если вы делаете не статичную вёрстку, а полный цикл разработки. Такой подход называется «трёхзвенная архитектура» (определение, статья). Bemjson никто не пишет, он генерируется «автоматически» с помощью функций-шаблонов:
    1) json с данными (с сервера, например);
    2) json + BEMTREE = BEMJSON;
    3) BEMJSON + BEMHTML = HTML.

    Популярный project-stub — это не production-ready решение, это демонстрация концепции, там bemjson написан вручную просто для упрощения понимания.

    Ваше же решение сильно ограничено, т. к. является не декларативным шаблоном, а чисто императивным, как и JSX. Используя XJST-шаблонизатор, вы можете разделить логику и представление, но наглядно это продемонстрировать в рамках ответа на вопрос довольно трудно — на меленьких синтетических примерах преимущества увидеть сложно, а на то, чтобы «въехать» в более-менее крупный проект понадобится время (и мое, как объясняющего, и ваше), но ограничусь лишь таким аргументом — описание сущностей в виде блоков (компонентов) позволяет обращаться к ним не как к emmet-строке (формат pug-шаблонов),а как к логической сущности. Например, я могу описать сущность ссылки (блок link) и дополнить её методом «хождения» в роутинг, после чего мои ссылки смогут автоматически генерировать свой href по набору параметров:

    {
      block: 'link',
      to: 'article',
      params: {
        author: 'Realetive',
        tags: ['bem']
      }
    }


    К тому же BEMJSON — это JavaScript и там будут работать все возможности языка:

    {
      block: 'slider'
      items: [ 'flower', 'heaven', 'forest', ].map( item => ({
        elem: 'item',
        imagePath:  'assets/img/slider/' + item + '.jpg'
      }) )
    }


    И ещё (по себе знаю) — использование полного стека приводит к БЭМу головного мозга. Процесс необратимый, но негативного влияния пока не заметил, кроме разве что «эффекта кёрнинга» — большую часть кода вы автоматически будете раскладывать на подобие блоков, элементов и модификаторов.
    Ответ написан
    2 комментария
  • Правильно ли написан html по Бэм?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Почти. Но вы упустили важный приём в методологии — Миксы. Они позволят создавать переиспользуемый блоки повторяющихся сущностей (параграфы, картинки, заголовки) в других частях страницы:

    <div class="site">
      <header class="header">
        <div class="header__container container">
          <div class="header__inner">
            <a class="logo header__logo" src="/"><img class="logo__img img" src="images/logo.svg" alt="Likigram" title="Likigram"></a>
            <nav class="nav" role="navigation">
              <a class="nav__link link" src="#">Buy Instagram Likes</a>
              <a class="nav__link link" src="#">Buy Instagram Followers</a>
              <a class="nav__link link" src="#">Buy Instagram Views</a>
              <a class="nav__link link" src="#">Get Free Likes</a>
              <a class="nav__link link" src="#">Instagram Downloader</a>
              <a class="nav__link link" src="#">Support</a>
            </nav>
          </div>
        </div>
      </header>
      <section class="banner">
        <div class="banner_container container">
          <div class="banner__inner">
            <div class="banner__info">
              <h1 class="banner__title heading heading_size_l">Get Real Instagram likes, followers and views!</h1>
              <p class="banner__paragraph paragraph">Buy instagram likes, instagram followers and instagram views for your account.</p>
              <p class="banner__paragraph paragraph">Grow your instagram account quickly with Likigram</p>
            </div>
            <div class="banner__actions">
              <img class="img banner__img" src="images/banner-img-1.png" alt="banner img">
              <a class="button button_medium button_background_orange banner__button" src="#price-followers">Grow Your Instagram Account</a>
            </div>
          </div>
        </div>
      </section>
      <footer class="footer">
        <div class="footer_container container">
          <div class="footer__inner">
            <div class="footer__info">
              <div class="logo footer__logo"><img class="img logo__img" src="images/footer-logo.png" alt="Likigram" title="Likigram"></div>
              <div class="copyright footer__copyright">© 2019, Likigram All rights reserved</div>
              <div class="payments"><img class="payments__img" src="images/payments.png" title="We accept payments via Visa Mastercard and Paypal" alt="We accept payments via Visa Mastercard and Paypal"></div>
            </div>
            <div class="footer__menu">
              <ul class="footer__nav list nav">
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Contact Us</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Support</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Blog</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Terms and Conditions</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Privacy Policy</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Refund Policy</a></li>
              </ul>
              <ul class="footer__nav list nav">
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Likes</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Followers</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Views</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Get Free Followers</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Get Free Likes</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Instagram Downloader</a></li>
                <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">About Likigram</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>


    Визуально кода стало больше, но во-первых эту проблему сводит на «нет» gzip, а во-вторых — больше кода всё равно генерируется для CSS, а подход миксов позволяет объединять повторяющиеся сущности на блоках, исключая дублирование кода.
    Ответ написан
  • Как для разных платформ подгружать разные файлы стилей?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Этот пункт справедлив исключительно для БЭМ-стека (project-stub, bem-express, и т. д.) — там сборщик действительно собирает только те CSS и JS-файлы, которые требуются для конкретной страницы (бандла).
    Если вы ограничиваетесь пока только лишь именованием классов и группировкой файлов по каталогам, преимуществ разделения по платформам вы не оцените, т. к. популярные сборщики (а-ля webpack) этого попросту не умеют из коробки.
    Ответ написан
    2 комментария
  • Какой аналог БЭМ актуален для использования в верстке и CSS?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    С недавнего времени (с момента появления на свет лет 8 назад) БЭМ принят ещё некоторыми менее известными командами-энтузиастами типа Google (включая Material Design Lite, android.com), BBC, The Guardian и т. д., пропагандируется крупнейшими международными изданиями по веб-разработке:
    1. site:css-tricks.com bem
    2. site:csswizardry.com bem
    3. site:smashingmagazine.com bem

    Аналогов как к методологии пока не встречал, есть «пограничные» решения, частично решающие какую-то из проблем, учтённых в БЭМ: css-in-js, CSS Modules, WebComponents. А сама формулировка вопроса даёт ощущение, что вы не знакомы с темой вопроса: bem.info — там есть ответы на распространённые заблуждения, включая мнение, что «БЭМ — это про CSS и классы через чёрточку».
    Ответ написан
    Комментировать
  • Как правильно написать наименование классов по БЭМ?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Оба примера верные и отражают (в данном случае) лишь ваше восприятие сущностей (блоков и элементов) и их отношение друг к другу. В данном случае БЭМ не накладывает каких-либо ограничений в том, какие именно именные указатели вы используете — главное. чтобы вам и вашим коллегам было понятно.
    Ответ написан
    Комментировать
  • Как быстро создать блок по БЭМ?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Всё есть: https://github.com/bem-tools/bem-tools-create:

    bem create my-block.{js,css,pug} -l components

    создаст my-block.js, my-block.css и my-block.pug в каталоге ./components/my-block.

    А
    bem create my-block__{header,content,footer}.{js,css,pug} -l components


    нагенерирует

    ./components
      my-block__content/
        my-block__content.js
        my-block__content.css
        my-block__content.pug
      my-block__footer/
        my-block__footer.js
        my-block__footer.css
        my-block__footer.pug
      my-block__header/
        my-block__header.js
        my-block__header.css
        my-block__header.pug


    Шаблоны, естесвенно, можно создавать под любые языки.
    Ответ написан
    1 комментарий
  • БЭМ за 2 дня реально?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Нет, нереально.
    На bem.info забанили?
    P. S. За 2 дня не освоить. Сделаете херню, которую будете выдавать за «БЭМ», смущая сведующих и внося смятение в таких же страждующих.
    Ответ написан
    Комментировать
  • Является ли корректным в именовании класса использовать название тега?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Ответ написан
    Комментировать
  • Как лучше закодить такой компонент кнопки по БЭМ?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Цвет не может отвечать за какие-то действия, он может их лишь характеризовать (например, состояния).
    Пример вёрстки советую посмотреть на официальном сайте методологии (ребята потратили уйму времени на поиск оптимального сочетания вложенности к функциональности идекларативности): https://ru.bem.info/platform/libs/bem-components/6...
    P. S. Вообще при любом вопросе, связанном с БЭМ, советую обращаться на bem.info — там есть все ответы (по теме).
    Ответ написан
    1 комментарий
  • Контактная информация является БЭМ блоком?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    1. Вполне. Факт наличия блока не является гарантией его повторения, только лишь самодостаточности.
      Блок contact, например, может обладать какими-то отличительными качествами, которые делают его самостоятельным, например:
      • отличный тег <address>;
      • специфичные элементы, характерные только для этого блока: карта, телефон, адрес и т. д.;
      • внешнее оформление: цвет подложки, рамка, скругление углов и т. д.

    2. Нет, это исключено самой методологией.
    Ответ написан
    Комментировать
  • Как в BEM осуществлять позиционирование блоков?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Конечно, ошибка. Просто многие (читайте «большинство») считают, что «БЭМ — это классы через чёрточку». Даже не смотря на то, что в документации достаточно подробно обо всём рассказано: https://ru.bem.info/methodology/css/#Внешняя-геоме....
    P. S. Про обертки.
    Ответ написан
    Комментировать
  • Как правильно записывать имя модификатора?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Оба варианта верные — Соглашение по именованию. В Яндексе используют два нижних подчёркивания, т. к. это не вызывает проблем с подсветкой синтаксиса у HTML-комментариев.
    Ответ написан
    Комментировать
  • Как добавить несколько условий GET в tvFilters?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Для pdoPage применимы общие параметры pdoTools: https://docs.modx.pro/components/pdotools/general-...

    &tvFilters:
    Список фильтров по ТВ, с разделителями AND и OR. Разделитель, указанный в параметре &tvFiltersOrDelimiter представляет логическое условие OR и по нему условия группируются в первую очередь. Внутри каждой группы вы можете задать список значений, разделив их &tvFiltersAndDelimiter. Поиск значений может проводиться в каком-то конкретном ТВ, если он указан «myTV==value», или в любом «value». Пример вызова: &tvFilters=`filter2==one,filter1==bar%||filter1==foo`. Обратите внимание: фильтрация использует оператор LIKE и знак «%» является метасимволом. И еще: Поиск идёт по значениям, которые физически находятся в БД, то есть, сюда не подставляются значения по умолчанию из настроек ТВ.
    Ответ написан
  • БЭМ. Можно ли так миксовать?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Да, подобный микс допустим.
    Подробнее о миксах: https://ru.bem.info/methodology/key-concepts/#Микс
    и примеры применения: https://ru.bem.info/methodology/block-modification...

    Можно ещё воспользоваться БЭМ-валидатором: https://www.npmjs.com/package/bem-validate
    Ответ написан
    Комментировать
  • С помощью каких инструментов можно верстать в компонентном стиле?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Вас не спасёт ни MODX, ни БЭМ, ни React'ы с Angular'ами. Если использование инструментов сборки вызывают сложности — не используйте. Целесообразность их использования приходит лишь с опытом понимания того, что вы реально можете автоматизировать, от «магии» толку мало.
    Это я вам говорю, как адепт БЭМ-стека (ага, того самого, из Яндекса) и амбассадор MODX.
    Ответ написан
    7 комментариев
  • Как сделать чтобы select открывался вверх?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Вам нужно переопределить directions попапа в шаблоне по умолчанию: https://github.com/bem/bem-components/blob/v6.0.0/...
    Ответ написан
    5 комментариев
  • Первичный родитель через амперсанд (SASS). Как?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Попробуйте pobem. Он позволяет прозрачно работать в контексте методологии и правильно воспринимает вложенность:

    block(select) {
      max-width: 100%;
      vertical-align: bottom;
    
      .elem(button) {
        width: 100%;
        vertical-align: top;
        text-align: left;
      }
    
      block(button).elem(text) {
        display: block;
        padding-right: 2em;
    
        &:empty:before {
          content: '\00a0'
        }
      }
    
      .elem(tick) {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        background-image: url('../icon/_symbol/icon_symbol_chevron-down.svg');
        transition: transform 0.1s ease-out;
        width: 2em;
        padding: .5em;
    
        &:empty:after {
          content: none
        }
      }
    
      .mod(opened) .elem(tick) {
        transform: rotate(-180deg)
      }
    
      .mod(width available) {
        width: 100%
      }
    
      .mod(has-error) {
        block(button) {
          border-color: red
        }
    
        .elem(tick) {
          display: none;
        }
      }
    }
    Ответ написан
    1 комментарий