Ответы пользователя по тегу HTML
  • Как назвать класс в BEM?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    <header class="header">
      <div class="header__logo">
        <img class="logo logo_size_m" />
      </div>
    </header>
    …
    <footer class="footer">
      <div class="footer__logo">
        <img class="logo logo_size_l" />
      </div>
    </footer>
    Ответ написан
    5 комментариев
  • Как можно назвать этот элемент?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Вопрос лучше задавать команде, чтобы не было разногласий. Если команды нет, подойдёт любое семантическое название: https://github.com/yoksel/common-words
    Ответ написан
    Комментировать
  • Оформление навигации по методологии БЭМ?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Выглядит так, словно это два независимых элемента того же блока. Значит ли это, что "menu__icon" должен быть способен существовать вне "menu__item"?


    — Нет. В смысле, что он «не должен». Структуру вложенности задаёт блок. Блок menu «утвердил», что menu__icon лежит внутри menu__item. Если это поменяется, это уже может быть выражено через модификацию блока menu:

    <nav class="menu menu_outside-icon">
      <i class="menu__icon"></i>
      <a class="menu__item" href="#!">
        Main
      </a>
    </nav>


    .menu_outside-icon .menu__icon {
      margin-right: 0;
    }


    или модификацию элемента:

    <nav class="menu">
      <i class="menu__icon menu__icon_outside"></i>
      <a class="menu__item" href="#!">
        Main
      </a>
    </nav>


    .menu__icon_outside {
      margin-right: 0;
    }


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

    <nav class="menu">
      <a class="link link_no-decoration menu__item" href="#!">
        <i class="icon icon_size_m menu__icon"></i>
        Main
      </a>
    </nav>


    .menu__item {
      padding: 1rem 2rem;
    }
    
    .menu__icon {
      margin-right: 0.5rem;
    }
    
    .link {
      color: blue;
    }
    
    .link_no-decoration,
    .link_no-decoration:hover,
    .link_no-decoration:focus {
      color: inherit;
      text-decoration: none;
      outline: none;
    }
    
    .icon {
      color: inherit;
      line-height: 1;
    }
    
    .icon_size_m {
      width: 1.5rem;
      height 1.5rem;
    }
    Ответ написан
    Комментировать
  • Можно ли в БЭМ верстке подключать reset.css и применять символ * для сброса всех отступов?

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

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    С HTML всё ок (если нет возможности задать CSS-класс , то всё ок), JSX не смотрел, а в CSS смутила вот эта строка:

    &.label_notification_error {
      margin: 4px 0px 0px 20px;
    }


    Смешиваются стили .form-input__label и label_notification_error. Эту проблему решит каскад:

    .form-input {
      &__label {
        margin-bottom: 4px;
      }
    }
    
    .label {
      &_notification_error {
        margin: 4px 0px 0px 20px;
      }
    }


    Если же такой margin нужен только у этой конкретной формы — или вынести его в инлайн-стили, или сделать отдельный модификатор, но для .form-input__label (например,
    .form-input_view_super-form-with-notification-margin .form-input__label_notification_error {
      margin: 4px 0px 0px 20px
    }
    )
    Ответ написан
    Комментировать
  • Правильно ли в БЭМ применять миксы для задания одинаковых свойств для нескольких элементов?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Да, всё верно! Есть пару советов, основанных уже на личном опыте:
    1. Абсолютно справедливо наблюдение про вынесение текстовых закономерностей в самостоятельный блок. Блок text отлично подходит. Но если семантически (и в дизайне) этот текст соответсвует заголовку (жирность, бо́льший размер шрифта, можно использовать тег <h1-h6>), то я завожу отдельный блок heading. Если используется шаблонизатор (React, Pug, Handlebars, etc.), то задание тега удобно ещё положить в
    …/heading/heading.<jsx | tsx | pug | html | yet-another-templater>
    . Тогда микс будет более «семантичным» тоже:

    /* …/heading/heading.css */
    .heading {
      font-weight: bold;
    }
    
    /* …/heading_size/heading_size.css */
    .heading_size_s {
      font-size: 18px;
    }
    
    .heading_size_m {
      font-size: 24px;
    }
    
    .heading_size_x {
      font-size: 28px;
    }


    Ну и просто для наглядности:

    /* …/header/header.css */
    .header {
      padding: 4px;
      text-size: 20px;
    }
    
    /* …/header/__text/header__text.css */
    .header__text {
      margin-bottom: 20px;
    }


    <div class="header">
        <h3 class="header__text heading heading_size_x">
            Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
        </h3>
    </div>


    /* …/presentation/presentation.css */
    .presentation {
      padding: 6px;
      background-color: #000;
      color: #ffff;
    }
    
    /* …/presentation/__text/presentation__text.css */
    .presentation__text {
      margin-bottom: 20px;
      color: #123;
    }


    <div class="presentation">
        <h4 class="presentation__text heading heading_size_m">
            Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
        </h4>
    </div>


    /* …/description/description.css */
    .presentation {
      padding: 11px;
      border: 1px solid #000;
      border-radius: 4px;
    }
    
    /* …/description/__text/description__text.css */
    .presentation__text {
      margin-bottom: 16px;
      text-transform: uppercase;
    }




    Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.




    NB! У каждого heading оказался свой размер (модификация heading_size_*) и свой тег (<h1-h6>), но вполне может быть и

    <h1 class="heading heading_size_s">Самый главный заголовок, но мелким шрифтом</h1>
    
    <h6 class="heading heading_size_xl">Заголовок под-под-подраздела, но крупным шрифтом</h6>


    2. Если же это просто текст (подзаголовок, описание раздела, мета-информация), то просто модификация текста тоже сработает:

    /* …/text/text.css */
    .text {
      padding: 11px;
      border: 1px solid #000;
      border-radius: 4px;
    }
    
    /* …/text/_weight/text_weight.css */
    .text_weight_bold {
      font-weight: bold;
    }
    
    /* …/text/_style/text_style.css */
    .text_style_italic {
      font-style: italic;
    }
    
    /* …/text/_decoration/text_decoration.css */
    .text_ transform_uppercase {
      text-transform: uppercase;
    }


    <div class="header">
        <div class="header__text text text_weight_bold">
            Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
        </div>
    </div>
    <div class="presentation">
        <div class="presentation__text text text_style_italic">
            Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
        </div>
    </div>
    <div class=" description">
        <div class=" description__text text text_weight_bold text_ transform_uppercase">
            Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
        </div>
    </div>
    Ответ написан
    Комментировать
  • Как правильно по бэм?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Или, стиснув зубы, использовать каскад:

    .header__menu.menu .menu__item {
      /* … */
    }


    или использовать. модификатор — вы пытаетесь модифицировать внутреннее содержимое блока, основываясь на каких-то специфических для этого блока параметрах (расположение внутри header) — резонный повод для модификатора:

    .menu_view_header .menu__item {
      /* … */
    }


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

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    То, что написал Сергей delphinpro, не имеет отношения к БЭМ — из-за таких «советов» у Егор Живагин потом куча проблем и ложное представление о методологии.
    Как советует Михаил — посмотрите на Tailwind — там куча примеров готовых компонентов с уже расставленными классами. Так вот, Tailwind к БЭМ тоже не имеет никакого отношения, хотя именно там используются «атомарные стили» вида mt-40 / pd-20 / и т. д. Понимание концепции БЭМ стоит начинать с bem.info, а если останутся или появятся вопросы — в официальный канал @bem_ru.
    Ответ написан
    2 комментария
  • Когда использовать микс, а когда модификатор?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Первое, что нужно научиться делать — находить повторяющиеся сущности (которые в последствии станут Блоками и Элементами). Вы уже пытаетесь сделать это, но пока получается слишком многословно, судя по количеству классов и это, очевидно, сбивает с толку.
    Я уже рассказывал на последнем БЭМапе (https://youtu.be/d4dcGj8abv0) о том, как я ищу эти повторяющиеся закономерности, поэтому постараюсь кратко:
    1) Собираем и группируем «данные»
    Разберём «шапку» и «подвал». И там, и там есть логотип, какая-то навигация, контактная информация, ссылки на соц. сети, в шапке есть кнопка:
    1.1) «Шапка»

    {
      logo: {
        img: 'путь до картинки',
        text: '…',
      },
      contacts: [
        'телефон',
        'email',
        'график работы',
        'адрес',
        'соц. сети',
        'кнопка обратной связи',
      ],
      navigation: [
        'пункт меню…',
        'пункт меню…',
        'пункт меню…',
      ]
    }


    1.2) В «подвале» почти то же самое, что-то в другом порядке, но это неважно, и нет «кнопки обратной связи» из секции «Контактов».

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

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

    1.5) Получается какая-то такая структура:

    // Блок логотипа
    {
      logo: [
        { img: '…' },
        { text: '…' },
      ]
    }
    
    // Блок контактов
    {
      contacts: [
        { tel: '…' },
        { email: '…' },
        { schedule: '…' },
        { address: '…' },
        { socials: [
          { vk: '…' },
          { telegram: '…' },
          { instagram: '…' },
        ] },
        { map: '…' },
        { feedback: '…' },
      ]
    }
    
    // Блок навигации
    {
      navigation: [
        { item: '', link: '…' },
        { item: '', link: '…' },
        { item: '', link: '…' },
      ]
    }
    
    // Блок «Шапки»
    {
      header: [
        {
          logo: [] // Тут всё без изменений
        },
        {
          contacts: [
            'tel',
            'email',
            'schedule',
            'address',
            'socials',
            'feedback',
          ]
        },
        {
          navigation: [] // Тут тоже без изменений
        }
      ]
    }
    
    // Блок «Подвала»
    {
      footer: [
        {
          logo: [] // Тут всё без изменений
        },
        {
          navigation: [ // Тут почти без изменений
            // …
            'Марки автомобилей' // Без выпадающего списка
            // …
          ]
        },
        {
          contacts: [
            'tel',
            'email',
            'address',
            'socials',
            'schedule', // Без иконки
          ]
        },
      ]
    }



    2) Вроде, пока хватит. «БЭМизируем» эти данные.
    Структура в формате JSON

    // Блок логотипа
    {
      block: 'logo'
      content: [
        { elem: 'img', src: '…' },
        { text: '…' },
      ]
    }
    
    // Блок контактов
    {
      block: 'contacts'
      content: [
        { elem: 'tel', content: '…' },
        { elem: 'email', content: '…' },
        { elem: 'schedule', content: '…' },
        { elem: 'address', content: '…' },
        { elem: 'socials', content: [
          { elem: 'vk', content: '…' },
          { elem: 'telegram', content: '…' },
          { elem: 'instagram', content: '…' },
        ] },
        { elem: 'map', content: '…' },
        { elem: 'feedback', content: '…' },
      ]
    }
    
    // Блок навигации
    {
      navigation: [
        { item: '', link: '…' },
        { item: '', link: '…' },
        { item: '', link: '…' },
      ]
    }
    
    // Блок «Шапки»
    {
      header: [
        {
          block: 'logo'
        },
        {
          block: 'contacts',
          // У этого блока определённо свой контент,
          // будем отличать его от других вариантов
          // этого блока с помощью модификатора
          mods: { view: 'header' },
          content: [
            { elem: 'tel' },
            { elem: 'email' },
            { elem: 'schedule' },
            { elem: 'address' },
            { elem: 'socials' },
            { elem: 'feedback' },
          ]
        },
        {
          block: 'navigation',
          // Этот блок по внешнему виду отличается от блока в «Подвале»,
          // поэтому обозначим его модификатором
          mods: { view: 'header' },
          content: [
            // …
            // У одного пункта выпадающий список
            {
              elem: 'item',
              item: 'Марки автомобилей',
              elemMods: { dropdown: true },
              content: [
                // …
                { elem: 'subitem', item: 'Infinity', href: '…' }
              ]
            },
            // …
          ]
        }
      ]
    }
    
    // Блок «Подвала»
    {
      footer: [
        {
          block: 'logo'
        },
        {
          block: 'navigation',
          mods: { view: 'footer' },
          content: [ // Тут почти без изменений
            // …
            { elem: 'Марки автомобилей', link: '…' }, // Без выпадающего списка
            // …
          ]
        },
        {
          contacts: [
            'tel',
            'email',
            'address',
            'socials',
            { elem: 'schedule', elemMods: { noIcon: true } }, // Без иконки
          ]
        },
      ]
    }


    2.1) Базовый лэйаут: https://codepen.io/Realetive/pen/PoGRjZo
    2.2) Добавляем обёртки для группировки некоторых элементов: https://codepen.io/Realetive/pen/KKgoBdN
    Про обёртки и зачем они нужны уже обсуждалось в https://ru.bem.info/forum/656/, очень советую.
    2.3) Добавим отступы: https://codepen.io/Realetive/pen/bGwvjow
    Как видите, миксы по-прежнему не нужны.
    3) У контента есть фиксированная ширина, обозначим её через класс-элемент блока page: например, .page__layout:
    https://codepen.io/Realetive/pen/WNGzgjJ
    Но вёрстка закономерно сбилась, потому что классы, которые мы назначали для родительского уровня, «поднялись» ещё н один уровень. Добавим ещё обёртки, чтобы «выровнять» лэйаут: стили header перенесутся в header__body, из footer в footer__body: https://codepen.io/Realetive/pen/wvzmEpy
    4) Получилось достаточно много «лишних» обёрток только лишь для позиционирования. Можно было бы этого избежать, если бы стили были описаны в одном классе. Но тогда мы лишимся пользы разделения логики благодаря БЭМ-неймингу. Вместо этого объединим эти слои с помощью миксов: page__header + header, header__body + page__layout, page__footer + footer, footer__body + page__layout: https://codepen.io/Realetive/pen/RwGMYyV

    Вот наконец и пригодились миксы. Они лишь позволяют объединить две сущности по схожему признаку (например, лэйаут и позиционирование) на одном теге. А модификаторы обозначают различие между двумя одинаковыми сущностями (например, в одном месте у элемента есть иконка, в другом — нет, хотя это всё тот же элемент).

    Блок с контактами делается аналогичным способом:
    .page__section.page__section_view_feedback
      .page__layout
        .form.form_view_feedback.page__column_width_half (миксуем блок формы обратной связи и лэйаут 1/2 колонки)
          …
        .contacts_view_feedback.page__column_width_half
          .contacts__info
            .contacts__address
            .contacts__email
            .contacts__tel
            .contacts__schedule
          .contacts__map
    Ответ написан
    1 комментарий
  • Как правильно назвать вложенный блок в BEM?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    На абстрактных примерах без дизайна — тут только гадать, но в реальном проекте балансом между здравым смыслом и реиспользованием будет 1 вариант:

    <div class="card">
      <div class="card__header">
        <h2 class="card__header-title">Заголовок</h2>
      </div>
      <div class="card__footer">
        <h2 class="card__footer-title">Заголовок</h2>
      </div>
    </div>


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

    Вариант с c-card-header и c-card-footer смысла особого не имеет, т. к. создаёт ложное впечатление, что эти блоки могут использовться за пределами блока c-card.

    Альтернативным правильным решением может быть использованием модификаторов элемента card__header для описания их рзличий в зависимости от расположения:

    <div class="card">
      <div class="card__header">
        <h2 class="card__title card__title_position_header">Заголовок</h2>
      </div>
      <div class="card__footer">
        <h2 class="card__title card__title_position_footer">Заголовок</h2>
      </div>
    </div>


    Стили в card__title в этом случае сгруппируют общие свойства, а в модификаторах опишутся различия.
    Ответ написан
  • Layout и Bem. Что к чему?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Насколько правильно, если Layout__rowHeader вынести из layout.css в header.css?
    Layout__row Layout__rowHeader


    — Ни на сколько. Если Layout__rowHeader «ближе» по стилизации к Header, его лучше вообще удалить, а стили перенести в header.css

    Вообще, разделить на слои всё, это есть хорошо?


    Хорошо, но если композиция действительно увеличивает переиспользуемость, уменьшая связанность между компонентами.

    Насколько правильно так верстать: https://codepen.io/git2ss/full/jOMwKWz


    От БЭМа тут только классы «через чёрточку»:
    1) Header__row, Body__row и Footer__row объявлены вне своих блоков (элементы не должны существовать за пределами блока)
    Ответ написан
    2 комментария
  • Можно ли делать самостоятельные блоки внутри секции по БЭМ-у?

    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>
    Ответ написан
    2 комментария
  • Как следует называть модификаторы разных размеров шрифтов по БЕМу?

    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 России, самозванный БЭМ-евангелист
    По шагам, чтобы была понятен ход мысли:

    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
    Ответ написан
    Комментировать
  • НЕТ общему сбросу стилей в БЭМ! Что в замен?

    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;
    }
    Ответ написан
    4 комментария
  • Правильно ли написан 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, а подход миксов позволяет объединять повторяющиеся сущности на блоках, исключая дублирование кода.
    Ответ написан
  • Какой аналог БЭМ актуален для использования в верстке и 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://ru.bem.info/platform/libs/bem-components/6...
    P. S. Вообще при любом вопросе, связанном с БЭМ, советую обращаться на bem.info — там есть все ответы (по теме).
    Ответ написан
    1 комментарий
  • БЭМ. Можно ли так миксовать?

    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
    Ответ написан
    Комментировать