Ответы пользователя по тегу БЭМ
  • Как в bem /project-stub подключать сторонние библиотеки?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Ох… В краткие не получится. Во-первых, project-stub — это не starter kit для быстрого создания сайта с нуля, это скорее демонстрация концепции работы bem-инструментов (XJST-шаблонизатора, enb-сборщика и т. д.). Чуть больше для разработки сайтов подходит https://github.com/bem/bem-express , но и у него порог входа выше: там тесная работа с express.js, т. е. это ещё и полноценный сервер на node.js.

    jQuery уже включен в поставку и project-stub, и bem-express, т. к. фрейморк из стека для работы с клиентским JS i-bem.js работает через jQuery.

    Подключение сторонних библиотек можно делать двумя способами:

    1. захардкодить библиотеку, как это описано в инструкции и вызывать инициализацию самостоятельно;
    2. сделать БЭМ-модуль, который использует систему Y-Modules для динамического подключения.


    Второй способ предпочтительнее, но и на порядок сложнее.
    Ответ написан
  • Как правильно оформить второй header для других страниц?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    В первую очередь мы смотрим в дизайн и пытаемся понять, кто «диктует» различия у одинаковых или схожих блоков. Тут, похоже, есть две «темы», которые модифицируют подложку (цвет фона) у родительского блока и цвет текста у заголовка. Возможно (без дизайна тут можно бесконечно гадать), что по-БЭМ это будет выглядеть как-то так:

    <header class="header header_theme_dark">
      <div class="header__heading">
        <h1 class="heading heading_size_xxl heading_theme_dark">
          Hello kitty
        </h1>
      </div>
    </header>


    <header class="header header_theme_light">
      <div class="header__heading">
        <h1 class="heading heading_size_xxl heading_theme_light">
          Hello kitty
        </h1>
      </div>
    </header>


    — у .header_theme_* описан цвет «подложки» (background-color), а .heading_theme_* в свою очередь «знает», какой нужно задавать цвет текста (color).
    Ответ написан
  • Можно ли делать самостоятельные блоки внутри секции по БЭМ-у?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Да, конечно.
    Но, если вы хотите использовать БЭМ по правилам, а не просто писать классы через чёрточку: когда захотите сделать margin-отступ между .row и .notations, это следует описывать не в классе блока, т. к. «у блока не должно быть внешней геометрии». Можно задать элементы у .container и уже между ними описать margin-отступ:

    <div class="container">
      <div class="container__main">
        <div class="row">…</div>
      </div>
      <div class="container__aside">
        <div class="notations">…</div>
      </div>
    </div>
    Ответ написан
  • Правильно ли я использую БЭМ, создавая самостоятельные блоки?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    У вас какая-то «солянка» из БЭМа и Бутстрапа, в итоге получилась буквально «каша», поэтому и зашли в тупик.

    Это не мини-блоки, это элементы. На минуту забудьте про Бутстрап и прочие обёртки: у вас есть товар; у товара есть страница, где перечислены характеристики (свойства) товара: фотографии, цена, скидка, размеры, возможно — описание и т. д. Так вот — любая самостоятельная сущность (товар, статья, пост блога) — всегда блок. Все свойства, характеристики, признаки этой сущности — всегда элементы этого блока. Ankhena утверждает, что «если цена может переиспользоваться отдельно от блока namely, то это блок» — теоретически да, но на практике цена никогда не будет использоваться отдельно от товара, т. к. всегда «принадлежит» какому-то товару.

    Ещё минута «без Бутстрапа» — сначала запишите все свойства товара, как они идут в дизайне (одна строка — одно свойство):

    - товар
      - фотография
      - цена
      - старая цена
      - размеры


    — вот вам и блок с элементами. Нехватает только вспомогательных блоков, чтобы сгруппировать некоторые элементы (например, объеденить в одной строке «цену» и «старую цену») — добавьте ещё один элемент-обёртку (.namely_prices), который их «объединит»:

    <article class="namely">
      <img class="namely__photo" src="...">
      <dl class="namely__prices">
        <div class="namely__price">
          <dt class="visually-hidden">Новая цена</dt>
          <dt class="namely__price-currency">$</dt>
          <dd class="namely__price-value">311</dd>
        </div>
        <div class="namely__price namely__price_old"> <!-- Модификатор «опишет» цвет и «зачёркнутость» -->
          <dt class="visually-hidden">Старая цена</dt>
          <dt class="namely__price-currency">$</dt>
          <dd class="namely__price-value">450</dd>
        </div>
      </dl>
      <div class="namely__sizes">
        <h4 class="namely__sizes-heading">Выберите размер</h4>
        <div class="namely__sizes-list">
          <label class="namely__size">
            S
            <input class="namely__size-control input input_type_radio" type="radio" name="size" value="s">
          </label>
          <label class="namely__size">
            M
            <input class="namely__size-control input input_type_radio" type="radio" name="size" value="m">
          </label>
          <!-- … и т. д. -->
        </div>
      </div>
    </article>


    Мой код — лишь быстрый пример БЭМификации. В реальном проекте если смотреть на дизайн, можно найти кучу повторяющихся закономерностей и выделить их в блок, элемент или модификатор.
    Ответ написан
  • Корректно ли по БЭМу создавать классы для отступов?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Нет, вполне грамотное с точки зрения БЭМ решение — вы нашли повторяющийся паттерн и хотите его вынести в переиспользуемую сущность. Если этот паттерн повторяется ещё где-то, то смело делайте это самостоятельным блоком, как вы описали, но, может, обобщив, получится более абстрактное название. Если эти отступы — это «внешняя геометрия» (т. е. margin'ы), то правильнее это сделать не блоком, а элементом. Например, есть блок .page — «корневой» блок всей страницы (на теге body), а эти отступы тогда могут быть описаны в .page__section.
    Ответ написан
  • Когда создавать служебный блок в БЭМ?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Правильнее было бы начать с дизайна — на нём проще всего основывать советы по БЭМ-композиции.
    Большинство статей «про БЭМ» написаны дилетантами, не осилившими bem.info и придумывающими свои полурабочие адаптации. Судя по опыту, вам не нужен ни «элемент элемента» (это вообще бессмысленно и противоречит методологии), ни служебный блок.
    Ответ написан
  • Как сделать качественный и расшияремый продукт, используя pug, webpack?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Я так понимаю, вы ждёте готового решения, которое возьмёт на себя обеспечение «качественности» и масштабируемости.

    5f68770d9d88a090867276.jpeg

    Из более-менее простого на ум приходит только https://github.com/tars/tars/blob/master/README_RU.md — там и webpack, и pug (можно выбрать handlebars), и модульность и ещё несколько полезных автоматизаций. Но ни один фрейворк, starter kit или npm-модуль не защитит от говнокодинга, даже если обмазаться eslinter'ом. И говнокодить — это нормально. Всё приходит с опытом.

    На TARS я делал, например, https://lavkaschastya.com (исходники) , вот там полно всякого такого, от чего сейчас должно быть стыдно.
    Ответ написан
  • Как следует называть модификаторы разных размеров шрифтов по БЕМу?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    С чего вы взяли, что размер шрифта «наследуется» от элемента? Может, это h-заголовок и font-size закономерно «проистекают» от размера заголовка?

    <article class="cart">
      <h3 class="heading heading_size_xxl cart__title">Очень крупный заголовок 90px</h3>
    </article>


    <article class="cart">
      <h3 class="heading heading_size_xl cart__title">Крупный заголовок 80px</h3>
    </article>


    и т. д.

    Рассуждать о БЭМ без дизайна — как чинить компьютер «по фотографии».
    Ответ написан
  • Какой вариант именования более правильный по БЭМу?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Корректен ли такой вариант наименования?


    https://ru.bem.info/methodology/naming-convention/

    Или правильнее писать не CircleCard, а CardCircle?


    — Если Circle — это модификатор Card, то правильно будет иметь разделитель, например, Card_circle. Если нет базового компонента Card, то не нужен никакой Card_circle (можно просто переименовать файл).
    Ответ написан
  • Это правильный БЭМ?

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


    text состоит из трёх элементов:
    - text
      - icon
      - heading
      - subheading


    search состоит из
    - search
      - input
      - button


    Объединяем:
    - section
      - text
        - icon
        - heading
        - subheading
      - search
        - input
        - button


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

    block: section
      elem: text
        elem: icon
          block: icon
        elem: heading
        elem: subheading
      elem: search
        elem: input
          block: input
        elem: button
          block: button


    «БЭМизируем»:

    .section 
      .section__text
        .section__icon
          .icon
        .section__heading
        .section__subheading
      .section__search
        .section__input
          .input 
        .section__button
          .button


    Вроде ничего сложного.

    Теперь превращаем это в вёрстку (теги, семантика — не имеют отношения к БЭМ, поэтому сначала намеренно всё будет div'ами):
    <div class="section">
        <div class="section__text">
            <div class="section__icon">
                <div class="icon"></div>
            </div>
            <div class="section__heading"></div>
            <div class="section__subheading"></div>
        </div>
        <div class="section__search">
            <div class="section__input">
                <div class="input"> </div>
            </div>
            <div class="section__button">
                <div class="button"></div>
            </div>
        </div>
    </div>


    Добавляем чуть-чуть CSS: https://codepen.io/Realetive/pen/ExKgJqL

    Содержимое блока section отцентрировано — добавим вложенный элемент section__content, который будет содержать стили для этого позиционирования (перенесём их из .section{}, оставив только цвет).

    section__heading и section__subheading тоже «обернём» в элемент section__headings, чтобы сгруппировать, отделив от section__icon: https://codepen.io/Realetive/pen/mdPrYJb

    Можно сделать микс и объединить позиционирующие элементы с вложенными блоками, если хочется немного «сэкономить» на вложенности: section__icon и icon, section__input и input, section__button и button: https://codepen.io/Realetive/pen/KKzgLdq — внешне ничего не изменилось, ни одной строчки в CSS не правилось.

    Вот и всё. Всё остальное — теги, семантика добавляются по мере необходимости — как я уже говорил: к БЭМ они не имеют отношения.
    Ответ написан
  • Можно ли в БЭМ называть блок/элемент несколькими словами, разделенными дефисом?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Предвосхищу все остальные вопросы и впредь советую искать ответы по теме БЭМ на официальном сайте: bem.info.

    P. S. По поводу именования: https://ru.bem.info/methodology/naming-convention/...
    Ответ написан
  • Какой модификатор ставить (БЭМ)?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    По шагам, чтобы была понятен ход мысли:

    1. определим базовый блок
      <div class="header">
        <div class="header__logo"></div>
        <div class="header__nav"></div>
      </div>


      .header {
        background-color: red;
        display: flex;
      }
      
      .header__logo {
        width: 180px;
      }
      
      .header__nav {
        flex: 1; /* вся оставшаяся ширина */
      }


    2. логотип — самостоятельный блок, может использоваться, например, в футере. Я сразу использовал микс на header__logo, но для базового понимания можно внутри header__logo сделать самостоятельный — за счёт БЭМ это ни на что не повлияет.

      <div class="header">
        <div class="header__logo logo">
          <img src="" alt="logo of top digital …" class="logo__image">
          <img src="" alt="Top digital …" class="logo__text">
        </div>
        <div class="header__nav"></div>
      </div>


      .logo {
        display: flex;
        justify-content: space-between;
      }
      
      .logo__image {
        flex: 1;
      }
      
      .logo__text {
        width: 75%;
      }


      За счёт flex-модели logo__image можно использовать без logo__text, получим просто иконку-логотип.


    3. добавляем меню
      <div class="header">
        <div class="header__logo logo">
          <img src="https://via.placeholder.com/43x43" alt="logo of top digital …" class="logo__image">
          <img src="https://via.placeholder.com/134x15" alt="Top digital …" class="logo__text">
        </div>
        <nav class="header__nav nav">
          <ul class="nav__menu list list_of_menu">
            <li class="list__item nav__menu-item">
              <a href="" class="link nav__link">Пункт меню</a>
            </li>
            <li class="list__item nav__menu-item">
              <a href="" class="link nav__link">Пункт меню</a>
            </li>
            <li class="list__item nav__menu-item">
              <a href="" class="link nav__link">Пункт меню</a>
            </li>
            <li class="list__item nav__menu-item">
              <a href="" class="link nav__link">Пункт меню</a>
            </li>
          </ul>
        </nav>
      </div>


      .list_of_menu {
        list-style: none;
      }
      
      .nav__menu {
        display: flex;
      }
      
      .nav__menu-item + .nav__menu-item {
        margin-left: 1em;
      }
      
      .nav__link {
        color: white;
        text-decoration: none;
      }


    4. скорее всего ширина содержимого у header совпадает с шириной содержимого других частей страницы (то, что иногда называют 12-колоночной вёрсткой) — заведём отдельный класс для этого, например, content и обозначим, какое именно содержимое подчиняется этой ширине
      <div class="header">
        <div class="header__content content">
          <div class="header__logo logo">
            <!--        -->
          </div>
          <nav class="header__nav nav">
            <!--        -->
          </nav>    
        </div>
      </div>


      .content {
        width: 800px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
      }




      Результат: https://codepen.io/Realetive/pen/GRoOzeg
    Ответ написан
  • Как по BEM правильно верстать вложенные списки?

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

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Советую тогда TARS — в нём уже есть заявленные инструменты. И, как и написано в документации, лучше использовать в совокупности с его cli-инструментом для создания компонентов — это увеличит скорость и поможет избежать некоторых ошибок.

    P. S. наверняка, это не единственный инструмент, но тут хорошая документация и довольно плавный порог вхождения, мне года 4 назад он очень помог.
    Ответ написан
  • Как правильно использовать Symfony + Gulp + БЭМ?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    И не найдёте. Это вопрос из серии «Как правильно использовать дрель + холодильник + ноутбук» — согласно документации каждого. Вы или не знаете, чего хотите, или одно из двух.
    Ответ написан
  • Отличие микса от модификатора в данном примере BEM?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Вариант с модификатором некорректен с точки зрения БЭМ — у блока не должно быть „«внешней» геометрии“, т. е. он не должен влиять на соседние блоки (автор картинки-примера не знает БЭМ). Внешние отступы — это «обязанность» элементов. Если у меню есть отступ слева и он зависит от того, где это меню находится, то это скорее всего выглядит так:

    <header class="header">
      <div class="header__logo"><!-- … --></div>
      <div class="header__menu">
        <ul class="menu"><!-- … --></ul>
      </div>
    </header>
    <!-- … -->
    <footer class="footer">
      <div class="footer__logo"><!-- … --></div>
      <div class="footer__menu">
        <ul class="menu"><!-- … --></ul>
      </div>
    </footer>


    .header__menu {
      margin-left: 20px;
    }
    .footer__menu {
      margin-left: 30px;
    }
    Ответ написан
  • БЭМ-блок: свойство display и задание размеров?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Дополню ответ Виталий на второй вопрос: то, что у кнопки фикс. размер, на самом деле заблуждение. У этой кнопки ширина равна или всей доступной ширине (тогда ширина наследуется от той сущности, в которой лежит кнопка-блок и скорее всего это элемент родительского блока), или ширине доступного контента (например, в кнопке лежит блок-иконка, но ширину мы задаём элементу кнопки, как вы привели пример с .button__inner):

    https://codepen.io/Realetive/pen/jOPwRxY
    Ответ написан
  • НЕТ общему сбросу стилей в БЭМ! Что в замен?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Cброс делается глобально не в одном файле, а точечно в тех блоках, где это необходимо (это позволяет переиспользовать блоки в разных проектах без неявной зависимости от упомянутых reset.css / normalize.css). Т. е. осознанно дублируя, например, box-sizing: border-box в блоках (элементах, модификаторах), где нам нужно повлиять на размер при использовании padding'ов, мы делаем Абсолютно Независимые Блоки (АНБ) без неявных зависимостей.

    — Даже html и body не сбросить?


    — Наоборот. Можно же сделать так:

    <!-- index.html -->
    <!DOCTYPE html>
    <html>
      <body class="page">
        <!-- page content -->
      </body>
    </html>


    /* page.css */
    html {
      padding: 0;
      margin: 0;
    }
    
    .page {
      padding: 0;
      margin: 0;
    }


    — А как же ul-ки и т.д?


    — Аналогично:

    <ul class="list">
      <li class="list__item">foo
      <li class="list__item">bar
    </ul>


    /* list.css */
    .list {
      margin: 0;
      padding: 0;
      list-style-type: disc;
      list-style-position: inside;
    }
    Ответ написан
  • Как в БЭМ обнулять браузерные стили, правильно создавать модификаторы, независимые блоки?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    1)
    они просто прописали margin: 0, что идет в разрез с их же правилами

    — Нет, как раз нулевое значение для всех блоков и позволяет соблюсти «невлияние на внешнюю геометрию». Т. е. это нормально и допустимо для любого блока — обнулить его margin, position (border'ы, в принципе, можно оставить при указании корректного box-sizing)

    2) в идеале должно быть достаточно «сделать только класс button_size_small», а за порядком должен следить сборщик. Если использовать «вложенные селекторы», то будет нагляднее:

    .button {
      padding: 20px;
    
      &_size_small {
        padding: 10px;
      }
    }


    3) Размер шрифта вполне может быть задан в модификаторе size:

    .heading {
      margin: 0;
      font-feight: bold;
    
      &_size_s { font-size: 18px; }
      &_size_m { font-size: 24px; }
      &_size_l {  font-size: 30px; }
    }


    А тот, кто будет менять положение блока в HTML, помимо «вырезать-вставить» сможет ещё и обновить модификатор, изменив размер шрифта без залезания в CSS.

    4) Следовать БЭМ достаточно непросто, если держать эти правила в голове. БЭМ-разработчики используют инструменты (т. н. «БЭМ-стек»), которые автоматизируют всю рутину, но порог вхождения достаточно высок. Могу лишь посоветовать не стесняться задавать подобные вопросы в чатике https://t.me/bem_ru
    Ответ написан
  • Как правильно указывать пути для уровней - 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": {},
              },
            }
          }
        },
      }
    }
    Ответ написан