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

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

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

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

    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>
    Написано
  • Правильно ли я использую БЭМ, создавая самостоятельные блоки?

    Realetive
    @Realetive
    Ankhena, Тогда «сумма» будет элементом блока «корзина». Совпадёт ли этот элемент дизайном (размером, цветом, жирностью шрифта) с .namely__price — мы не знаем. Даже если совпадёт — выносить это «совпадение» в отдельный блок — мало толку («экономим» три строки в CSS, добавляем класс-микс .price в каждую HTML-сущность). Я без претензии — если в вашей практике было оправдано, значит, так и должно быть.
    Написано
  • Корректно ли по БЭМу создавать классы для отступов?

    Realetive
    @Realetive
    Да. Это «неявное наследование», БЭМ за то, чтобы всё было максимально явным — чтобы беглый взгляд на структуру классов в разметке дал всю картину «что тут думал автор».
    Написано
  • Корректно ли по БЭМу создавать классы для отступов?

    Realetive
    @Realetive
    Но без дизайна мои утверждения — лишь догадки.
    Написано
  • Корректно ли по БЭМу создавать классы для отступов?

    Realetive
    @Realetive
    Barring, если этот отступ будет использоваться на других сущностях (не только на services-about__title), то да. Если это специфично именно для services-about__title именно на этой странице, то логичнее модификатор:

    на самом элементе:
    .services
      .services__about
        .services-about__title.services-about__title_with-margins


    или на блоке (тогда свойства описываются через «каскад»):
    .services_view_with-title
      .services__about
        .services-about__title
    
    /* CSS */
    .services-about__title {
      margin: 1em;
    }
    
    .services_view_with-title .services-about__title {
      margin-top: 2em
    }
    Написано
  • Корректно ли по БЭМу создавать классы для отступов?

    Realetive
    @Realetive
    Barring, абсолютно верно! Причём у класса categories в стилях вообще может быть пусто (пока) — он лишь отражает «семантику» — что есть что-то обособленное (как эти паддинги, хоть они даже не в самом блоке описан, а в элементе).
    Написано
  • Корректно ли по БЭМу создавать классы для отступов?

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

    Realetive
    @Realetive
    Barring, если этот отступ прослеживается в нескольких разных блоках, то всё равно что-то общее у них есть (или это просто совпадение и есть смысл прописать одинаковые значения в элемент about каждого из блоков). Это может быть не родительский блок, а микс на сам services (и industries):

    .services.section-about
      …
        .services__about.section-about__paddings


    В отличие от микса на сам элемент services__about ( .services__about.section-about ), мой пример позволяет «законно» использовать margin'ы в стилях section-about__paddings (потому что просто у блока не должно быть «внешней геометрии» типа margin'ов)
    Написано
  • Корректно ли по БЭМу создавать классы для отступов?

    Realetive
    @Realetive
    Barring, особенно оправдано, если и блок industries тоже лежит внутри main.
    Написано
  • Корректно ли по БЭМу создавать классы для отступов?

    Realetive
    @Realetive
    Ничего страшного, что есть «прослойки». Визуально будет читаться очень логично:

    .main
      …
        .services
          .services__about.main__about-layout


    Т. е. этот код «говорит»: Что бы не было вместо блока services — если нужно сделать слой с известными отступами внутри main — вот готовый класс.
    Написано