Задать вопрос
Realetive

Realetive

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

  • Можно ли вкладывать элементы одного блока в другой?

    Realetive
    @Realetive
    wakenbyWork, без анализа всего дизайна проекта невозможно сказать. Я могу придумать ситуацию, когда на одной DOM-ноде «встречаются» две сущности, но не могу гарантировать, что это ваш случай.
    Написано

  • Как изучить js бэм?

    Realetive
    @Realetive
    Andreyka2021, вопрос стоял в том, где найти материалы по i-bem,js. Это все материалы, их достаточно для понимании концепции. Примеры использования можно увидеть, например, в https://github.com/bem/bem-components и https://github.com/bem/bem-core .

    Если есть конкретные вопросы по JS, то лучше начать с основ, например https://learn.javascript.ru/ . По вопросам фреймворка i-bem.js лучше всего писать в Телеграмм-чат https://t.me/bem_ru
    Написано

  • Когда использовать микс, а когда модификатор?

    Realetive
    @Realetive
    SolidMike, если вопрос абстрактный без конкретного примера, то и мой ответ будет таким же — вы его спроецируете на свой дизайн, ничего не поймёте и толку от моего ответа не будет. Поэтому я и попросил дизайн. Попробую раскрыть ответ в решениях.
    Написано

  • Когда использовать микс, а когда модификатор?

    Realetive
    @Realetive
    Покажите дизайн.
    Написано

  • Как правильно назвать вложенный блок в BEM?

    Realetive
    @Realetive
    Никита Стечкин, c-card__checklist__item — так точно делать нельзя, потому что не бывает «элемента у элемента». В этом примере 2 вариант лучше, хотя бы потому, что не противоречит БЭМ.
    Написано

  • Как правильно назвать вложенный блок в BEM?

    Realetive
    @Realetive
    Никита Стечкин, то, как вы это делаете, не имеет значения. И это не даёт «оправдания» в пользу того или иного решения — использование БЭМ «на 50%» или «адаптация под себя» не имеет никакого смысла — ни одна из таких попыток не имела успеха. Советую посмотреть https://youtu.be/d4dcGj8abv0 чтобы понять, в чём смысл БЭМ-именования.
    Написано

  • Как правильно назвать вложенный блок в BEM?

    Realetive
    @Realetive
    Никита Стечкин, второй вариант — это же

    <div class="c-card">
    <div class="c-card-header">
        <h2 class="c-card-header__title">
Заголовок</h2>
    </div>
<div class="c-card-footer">
        <h2 class="c-card-footer__title">
Заголовок</h2>
    </div>
</div>


    ?
    Написано

  • Как правильно назвать вложенный блок в BEM?

    Realetive
    @Realetive
    Никита Стечкин, можно, но по поводу применения — вряд ли, т. к. он менее эффективен с точки зрения БЭМ.
    Написано

  • Как верстать подобные блоки адаптивно? и что можно улучшить в коде?

    Realetive
    @Realetive

    И стили соответственно писать нужно будет

    .ingredients {
position: relative
}
.ingredients .ingredients__number {
position: fixed
}



    — Это неправильный пример, т. к. в каскде для .ingredients__number нет никакого смысла — согласно БЭМ элемент всегда будет вложен в блок .ingredients (а минификация вложенности — одна из ключевых особенностей БЭМ). Т. е. аналагочный результат будет и при

    .ingredients {
  position: relative
}
.ingredients__number {
  position: fixed
}
    Написано

  • Layout и Bem. Что к чему?

    Realetive
    @Realetive
    Как раз наоборот — правильная композиция минимизирует дублирование кода.

    Первое правило — блок должен быть максимально независимым от окружения, т. е. у него не должно быть внешней геометрии — в зависимости от контекста он занимает всю доступную ширину (если он блочный) или ширину контента (инлайн, инлайн-блочный контекст).

    Судя по демке, у нас есть блок страницы (Layout), состоящий из нескольких элементов: шапки (Layout__Header), собственно, самого контента (Layout__Content), внутри которого основное содержимое (Layout__Main) и боковой панели (Layout__Aside) и подвала (Layout__Footer):

    <body class="Layout">
  <div class="Layout__Header"></div>
  <div class="Layout__Content">
    <div class="Layout__Main"></div>
    <div class="Layout__Aside"></div>
  </div>
  <div class="Layout__Footer"></div>
</body>


    Их стили ничего не содержат, только раскладку — в них можно положить что угодно и это не сломает эту раскладку:

    https://codepen.io/Realetive/pen/RwGZozZ

    Можно заметить, что есть Layout__Content, который «что-то знает» про контентную ширину, которая одинаковая и для содержимого Layout__Header (внутри которого можно выделить самостоятельный блок Header), и Layout__Footer (с блоком Footer), и обёртки для Layout__Main + Layout__Aside:

    <body class="Layout">
  <div class="Layout__Header">
    <div class="Header">
      <div class="Header__Content Layout__Content"></div>
    </div>
  </div>
  <div class="Layout__Content">
    <div class="Layout__Main"></div>
    <div class="Layout__Aside"></div>
  </div>
  <div class="Layout__Footer">
    <div class="Footer">
      <div class="Footer__Content Layout__Content"></div>
    </div>
  </div>
</body>


    https://codepen.io/Realetive/pen/poErRzY

    Так плохо верстать, будут проблемы?


    — Ну, если «для себя» — кто ж вам запретит, никаких проблем.
    Написано

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

    Realetive
    @Realetive
    avprinciple, может, и можно. Но я таких способов не знаю. Старый стек больше не развивается, так что советую смотреть в сторону современных компонентных бибилотек. Для React, например, есть bem-react от авторов БЭМа. Причём сам Реакт можно действительно использовать только лишь как шаблонизатор.
    Написано

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

    Realetive
    @Realetive
    avprinciple, собственно, я с Pug на него (XJST: BEMHTML, BEMTREE) перешёл лет 5 назад, когда мои Pug-шаблоны стали похожи на какую-то ебанину и кошмар авангардизма из-за попыток превратить их шаблонизатор во что-то более-менее декларативное.
    Написано

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

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

    Realetive
    @Realetive
    avprinciple, проблема в шаблонизаторе, как мне кажется — он не позволяет создать нормальные реиспользуемые компоненты, отсюда все эти «костыли» с копированием и дублированием. Правильный способ — иметь минимальный работоспособный общий блок menu, который ни при каких обстоятельствах не надо как-то менять (все изменения делаются в модификаторе).
    Написано

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

    Realetive
    @Realetive
    avprinciple, через модификатор.
    Написано

  • НЕТ общему сбросу стилей в БЭМ! Что в замен?

    Realetive
    @Realetive
    r_g_b_a, Видимо, для «надёжности». Хороший и резонный вопрос, никогда не задавался первоисточником.
    Написано

  • НЕТ общему сбросу стилей в БЭМ! Что в замен?

    Realetive
    @Realetive
    r_g_b_a, у блока не должно быть внешней геометрии, т. е. «влияния» на соседние блоки. Это позволяет их переииспользовать не опасаясь, что вёрстка «поедет».
    Написано

  • Как правильно оформить второй header для других страниц?

    Realetive
    @Realetive
    Мой вариант — верный. То, что приводите вы, называется микс и тоже является корректным вариантом, но (!!!) с ним нужно быть осторожнее — микс обычно используется, чтобы сэкономить на вложенности и объединить несколько БЭМ-сущностей на одном теге. Но не стоит прибегать к этому приёму, пока не научитесь основам БЭМ-мышления. Т. е. сперва разбейте на БЭМ-сущности так, как я привёл в примере по шагам. Потом, если видите объединяемые сущности (про header__user и user — всё правильно подмечено) — делаете микс.
    Написано

  • Как правильно оформить второй header для других страниц?

    Realetive
    @Realetive
    Кирилл, в идеале — да. И ещё правильнее — если модификатор темы будет проставляться автоматически шаблонизатором (например, на основании темы «родителя», ещё лучше — если рекурсивно «вверх», чем «выше», тем лучше).

    .heading — это h-заголовки у меня. Не использую имя класса-блока .title, чтобы не было путаницы с <title>.

    В вашем дизайне получается что-то такое:

    1 шаг, «от общего к частному»:
    <div class="header">
  <div class="header__menu"></div>
  <div class="header__user"></div>
  <div class="header__search"></div>
  <div class="header__lang"></div>
</div>


    2 шаг — добавляем немного контента
    <div class="header">
  <div class="header__menu">
    <nav class="navigation">
      <ul class="menu navigation__menu">
        <li class="menu__item">Каталог</li>
        <li class="menu__item">Художникам</li>
        <li class="menu__item">Блог</li>
        <li class="menu__item">Ещё</li>
      </ul>
    </nav>
  </div>
  <div class="header__user">
    <div class="user">
      <div class="user__profile">Александрелло</div>
      <div class="user__likes">85</div>
      <div class="user__cart">23</div>
    </div>
  </div>
  <div class="header__search"></div>
  <div class="header__lang">RU</div>
</div>


    3 шаг — добавляем уточняющие элементы для точечной стилизации
    3.1 — пункты меню делаем ссылками
    <div class="header">
  <div class="header__menu">
    <nav class="navigation">
      <ul class="menu navigation__menu">
        <li class="menu__item">
          <a href="#" class="menu__link">Каталог</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Художникам</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Блог</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Ещё</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="header__user">
    <div class="user">
      <div class="user__profile">Александрелло</div>
      <div class="user__likes">85</div>
      <div class="user__cart">23</div>
    </div>
  </div>
  <div class="header__search"></div>
  <div class="header__lang">RU</div>
</div>


    3.2 — добавляем декоративные элементы в «данные» пользователя (имя, лайки и корзину — потому что у каждого пользователя свои данные, поэтому эти «элементы» непосредственно принадлежат блоку пользователя, т. е. блоку .user:
    <div class="header">
  <div class="header__menu">
    <nav class="navigation">
      <ul class="menu navigation__menu">
        <li class="menu__item">
          <a href="#" class="menu__link">Каталог</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Художникам</a>
        </li>
        <li class="menu__item">
          <a href="#" class="menu__link">Блог</a>
        </li>
        <li class="menu__item menu__item_type_dropdown">
          Ещё
          <img src="" alt="" class="icon icon_type_dropdown menu__dropdown-icon">
        </li>
      </ul>
    </nav>
  </div>
  <div class="header__user">
    <div class="user">
      <div class="user__profile">
        <img src="" alt="" class="icon icon_type_user user__icon">
        <div class="user__name">Александрелло</div>
      </div>
      <div class="user__likes">
        <img src="" alt="" class="icon icon_type_heart user__likes-icon">
        <div class="user__likes-count">85</div>
      </div>
      <div class="user__cart">
        <img src="" alt="" class="icon icon_type_cart user__cart-icon">
        <div class="user__cart-count">23</div>
      </div>
    </div>
  </div>
  <div class="header__search">
    <img src="" alt="" class="icon icon_type_search header__search-icon">
  </div>
  <div class="header__lang">RU</div>
</div>


    4 шаг — опа! у нас меняется оформление подложки и соответсвенно — текста — добавляем тему каждому блоку. но как это сделать, я уже привел пример.
    Написано

  • Можно ли делать самостоятельные блоки внутри секции по БЭМ-у?

    Realetive
    @Realetive
    P.S.: в дальнейшем, если .container__main и .container__aside будут содержать только свойства отступов, можно сделать микс, объёденив свойства отступов с внутренними блоками («экономит» вложенность, но не стоит с этим злоупотреблять — сперва хотя бы «в уме» лучше «написать» без микса):

    <div class="container">
  <div class="row container__main">…</div>
  <div class="notations container__aside">…</div>
</div>
    Написано