БЭМ - Форум

Здравствуйте! Такой вопрос. Например создаем секцию с классом intro:
< section class="intro"> Как правильно задать класс заголовка в этой секции:

1) < h1 class="intro_title">

2)< h1 class="intro intro_title">

3) < h1 class="title">

Вы просили и мы сделаем!

19 июля в 18:30 в питерском офисе Яндекса пройдет БЭМап — митап по БЭМ.

Регистрируйтесь скорее!

Мы начнем с самых азов, расскажем зачем БЭМ в 2019 и куда он движется. Познакомим с основанной на БЭМ дизайн-системой whitepapper, позволяющей верстать без написания CSS. Поговорим, как применять идеи БЭМ в проекте на React с использованием пакетов.

И, конечно, ответим на все ваши вопросы.

Ноутбук приносить не обязательно. После встречи мы опубликуем все материалы, ссылки и видео.

Встречи по БЭМ всегда бесплатны, но нужно зарегистрироваться заранее: количество мест ограничено.

Stay BEMed!

Можете сказать правильно я сделал или нет ? ``

<head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="media.css">
    <meta name="keywords" content="Жизнь,работа,новости">
    <meta name="description" content="MyLife - Это прекрасная жизнь, чтобы иди дальше....">
    <title> Сайт </title>
</head>
<body>    
  <header>
    <div class="container">
        <div class="menu">
            <div class="block-logo">
                <img class="block-logo__image"src="Image/Logo.png">
            </div>
            <div class="block-button">
                <a class="block-button__text" href="#">work</a>
                <a class="block-button__text" href="#">news</a>
                <a class="block-button__text" href="#">about me</a>
            </div>
        </div>
        <h1 class="name">Slice of my life.</h1>
        <div class="block-schroll">
            <img class="block-schroll__img" src="Image/Mouse.png">
            <p class="block-schroll__text">Schroll to see more</p>
        </div>
    </div>
</header>        
</body>

https://www.youtube.com/watch?v=gROp-BFbkAc

Доброго времени суток. Правильная ли форма с точки зрения БЭМ? Больше всего вопросов вызвало присваивание классов элементам fieldset и label

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="merged/merge.min.css"/>
</head>
<body>
    <div class="header">
        <span class="logo">
            <img src="" alt="" />
        </span>
    </div>
    <div class="main">
        <form class="auth-form" enctype="application/x-www-form-urlencoded" method="post">
            <fieldset class="auth-form__fieldset">
                <label class="auth-form__label">Логин</label>
                <input type="text" class="auth-form__input_text"/>
            </fieldset>
        </form>
    </div>
</body>
</html>

Привет!

Мы рады пригласить вас на очередной BEMup — митап по БЭМ, который пройдет в Москве 14 июня в 19:00. Эту встречу мы посвятим применению методологии БЭМ на React-проектах.

В программе:

— обзор @bem-react/classname — самого минималистичного пакета для генерации имен CSS-классов по БЭМ с поддержкой TypeScript. — статические и динамические модификаторы с помощью @bem-react/core. Рассмотрим правильные способы композиции, способы расширения компонентов и другие тонкости использования. — управление зависимостями благодаря @bem-react/di: зачем компонентам реестры, как правильно организовать эксперименты на проекте, нужно ли класть все зависимости в реестр, организация кода под разные платформы, разделение кода в модификаторах и блоках.

И, конечно же, ответим на все ваши вопросы!

Ноутбук приносить необязательно. После встречи мы опубликуем все материалы, ссылки и видео.

Встречи по БЭМ бесплатны, но нужно зарегистрироваться заранее: количество мест ограничено.

Stay BEMed!

Друзья, начинаем регистрацию на очередной BEMup — митап по БЭМ, который пройдет в Москве 24 мая в 19:00.

На эту встречу мы пригласили дизайнеров рассказать про создание дизайн-системы на основе http://whitepaper.tools.

Регистрируйтесь скорее, количество мест ограничено! https://events.yandex.ru/events/bemup/24-may-2019/

Здравствуйте, подскажите пожалуйста, я создаю проект на framework laravel и хочу использовать файловую структуру БЭМ для моих стилей (scss), соответственно в html разметке у меня блоки и элементы именованы по правилам как в документации. Вопрос в том что считается ли такая ситуация правильной когда у меня допустим в папке для элемента находиться только один файл ? Потому что js файлы, мне всё таки удобнее было бы хранить в другом месте, не разбивать их как стили.
К примеру:

/header
   __logo
      header__logo.scss
   __menu
   __search

Получается что у меня вот в папке __logo будет только один файл. Да и вообще во многих папка может быть только один файл. К примеру если я захочу добавить модификатор какой то к logo
получится такое:

/header
   __logo
      _center
         _header__logo_center.scss
      header__logo.scss
   __menu
   __search

В папке _center один файл только. Заранее благодарю за ответ.

Пример:

<div class="block-name">
   <div class="block-name__item">
      <div class="block-name">
         <div class="block-name__item">
            etc.
         </div>
      </div>
   </div>
</div>

<div class="popup popup_A">
      <div class="popup__container">
        <div class="popup__header">
          <div>Знакомства</div>
          <div class="popup__close">x</div>
        </div>
        <div class="popup__content enabled-notification">
          <div class="enabled-notification__title">Включить уведомления</div>
          <div class="notification">
            <div>
              <div class="notification__title">Новое сообщение</div>
              <div class="notification__desc">Ирина: Привет! Встретимся сегодня у фонтана в парке</div>
            </div>
            <div class="notification__icon">
              <svg xmlns="http://www.w3.org/2000/svg"></svg>
            </div>
          </div>
          <div class="enabled-notification__text">
            Вы разрешаете нам отправлять уведомления о новых сообщениях, комментариях на ваши заметки и т.д.?
          </div>
        </div>
        <div class="popup__footer popup_A__footer">
          <button class="btn btn_color_grey popup_A__btn">Нет, спасибо</button>
          <div class="divider"></div>
          <button class="btn btn_color_blue popup_A__btn">Включить</button>
        </div>
      </div>
    </div>

Блок "popup" ре-используемый, может содержать различный контент. Блок "enabled-notification" уникальный и не будет ре-использоваться. Блок "notification" ре-используемый, может содержать различный контент, в рамках определённых элементов.

Для модификации кнопок (нужно было сделать ширину в 50%), используем микс с модификатором popup_A. В обычном состоянии у "popup" есть только одна кнопка.

.popup_A__footer{
  display: flex;
  justify-content: space-between;
}
.popup_A__btn{
  width: 50%;
}

Ещё есть вопрос по использованию "пустых" тегов-элементов (без классов), допустимо ли это?

<div class="notification">
            <div>
              <div class="notification__title">Новое сообщение</div>
              <div class="notification__desc">Ирина: Привет! Встретимся сегодня у фонтана в парке</div>
            </div>
            <div class="notification__icon">
              <svg xmlns="http://www.w3.org/2000/svg"></svg>
            </div>
          </div>

Допустим у меня есть блок .article:

<div class="article">
  <h1 class="article__heading"></h1>
  <img class="artilce__image">
  <p class="article__text"></p>
</div>

Я хочу видоизменить его внутри блока .frontpage, при этом сохранив привязку к .article. Для этого я использую микс только к .article:

.frontpage{
  &__article{
    .article{
      &__heading{}
      &__image{}
      &__text{}
    }
  }
}

Такой подход (в отличии от миксования к каждому изменному блоку) позволяет мне не засорять пространство имен (никаких .frontpage__article-heading), и вроде бы не ломает модульность.

Соответствует ли он методологии?

Привет. Есть вот такой футер:

который можно разделить на два больших элемента:

И получается такая структура:

footer
  footer__wrapper
    footer__item footer__item_columns
    footer__item footer__item_info

Это правильная структура и названия?

И еще внутри есть такие колонки:

И как лучше всего сделать колонки? Сделать их блоками или элемантами? Как тогда лучше обозвать их? Была идея navbar-column, но в колонке может не быть navbar(последняя колонка). Или сделать это элементами футера? Но тогда слишком много зависимости от футера будет и плюс хочется использовать класс wrapper для колонки примерно так:

noname-column
  noname-column__wrapper
    noname-column__header
    noname-column__content

        <div class="infg">
            <div class="infg__item">
                <div class="infg-icon">
                    <img src="/images/implant.svg" class="infg__icon" alt="">
                </div>
                <div class="infg__desc">
                    <div class="infg__title"></div>
                    <div class="infg__text"></div>
                </div>
            </div>
        </div>

Вопрос: правильно ли я сделал именование классов согласно БЭМ? Как будет правильно назвать класс 'infg-icon' который находиться в div`?

Блоки и темы оформления.

Уже давно пытаюсь избавиться от боли модификатора _theme у блоков. У нас 2 темы блока button - публичная и админка, около 2K строк стилей в сумме.

Имхо, блок должен быть максимально реиспользуемым и не тянуть ненужный код. Сейчас под тему запихиваются ВСЕ комбинации модификаторов блока, даже если они не нужны на странице. Это боль в поддержке.

Очень близки идеи http://whitepaper.tools/. В целом работаю тоже в этом направлении.

На данный момент пришёл к использованию 2-х видов переменных.

1. Глобальные/Контекстные (что реализовано в whitepaper)

Задаются через блок theme и модификаторы theme_color_* theme_size_* и т.д. Провайдят контекст переменных вниз по дереву.

.Theme_color_light {
  --color-bg: #f7f7f7;
  --coloron-bg: #222; 

  --color-primary: #222;
  --coloron-primary: #fff;

  --color-secondary: #777;
  --coloron-secondary: #ddd;

  --color-surface: #fff;
  --coloron-surface: #222;

  --color-error: #d00;
  --coloron-error: #fff;

  --color-success: #090;
  --coloron-success: #fff;
}

2. Локальные (Уровень блока)

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

Если спроецировать на мир React, то контекстные переменные - это пропсы, локальные - стейт :)

.Button {
  --Button-bg: var(--color-bg);
  --Button-border: var(--color-secondary);
  --Button-color: var(--color-primary);
  --Button-shadow: var(--color-bg);
  --Button-fontSize: 1rem;

  background: var(--Button-bg);
  border: 1px solid var(--Button-bg);
  color: var(--Button-color);
  padding: 1em 2em;
  font-size: var(--Button-fontSize);
  transition: .3s;
  border-radius: 3px;
}

.Button:hover {
  background: var(--Button-color);
  color: var(--Button-bg);
  cursor: pointer;
  box-shadow: 0 10px 20px var(--Button-shadow);
}

.Button_disabled,
.Button_disabled:hover {
  background: #ddd;
  border-color: #ddd;
  color: #999;
  cursor: default;
  box-shadow: none;
}

Блок получает переменные из контекста и преобразует их в локальные для дальнейшего использования в своих стилях.

3. Модификаторы

Дальше через модификаторы жонглируем уже локальными переменными блока.

.Button_color_action {
  --Button-bg: var(--color-action, #00a);
  --Button-color: var(--coloron-action, #fff);
}

.Button_color_error {
  --Button-bg: var(--color-error, #f00);
  --Button-color: var(--coloron-error, #fff);
}

.Button_color_success {
  --Button-bg: var(--color-success, #090);
  --Button-color: var(--coloron-success, #fff);
}

Данный подход позволяет избавиться от длинных селекторов в css.

Например если мы не хотим использовать локальные переменные, то нужно писать классы таким образом

.Button_color_success {
  background: var(--coloron-success, #fff);
  color: var(--color-success, #090);
}

.Button_color_success.Button:hover {
  background: var(--color-success, #090);
  color: var(--coloron-success, #fff);
}

И это только 2 состояние, а там ещё N состояний, включая вложенные элементы...

Локальные переменные, конечно не серебренная пуля и каскады писать придётся. Но как решение вполне может помочь добиться лаконичных селекторов.

4. Именование цветов

После долгих ресёрчей толком не нашёл способа лаконично и предсказуемо описывать переменные. Наиболее лаконичным стилем нашёл подход из Material Design https://material.io/design/color/

В кратце, есть какой-то цвет и для него создаётся рекомендуемый контрастный цвет.

:root {
    --color-primary: #000;
    --coloron-primary: #fff;
}

В качестве дополнительного задания контраста есть идеи использовать доп. параметр -low, -hight

:root {
    --color-primary: #000;
    --coloron-primary: #dddddd ; /* например для текста на фоне с цветом primary */
    --coloron-primary-hight: #ffffff; /* сильноконтрастный цвет */
    --coloron-primary-low: #777777; /* слабоконтрастный цвет */
}

В целом такое именование позволяет добиться предсказуемых результатов при создании темы.

Правда это тоже не является серебренной пулей, т.к. где-то могут не использоваться рекомендуемые переменные.

.Block {
   background: var(--color-surface);
   color: var(--color-error);
}

И не известно на сколько в новой теме surface и error будут контрастны друг к другу.

upd Пересмотрел ещё раз whitepapper https://github.com/whitepapertools/whitepaper-portal/tree/a6bb170522b470560e3572856cf11b1929e1469a/common.blocks/theme

Идёт разбитие цветовой темы на 2 вида. 1 базовые цвета страницы, 2 контролы (кнопки, чекбоксы, инпуты и т.д.).

Данный подход позволяет наиболее однозначно разрабатывать цвета для темы и тестировать их в "вакуме", что очень удобно. Тема не рассчитывается на все цвета радуги. Если нужно много вариаций, то стоит сделать несколько тем, что и плюс и минус.

Плюсы:

Однозначность использования цветов
Возможность разрабатывать тему "в вакуме"

Минусы:

Нужно использовать несколько миксов темы на странице для нескольких комбинаций цветовых решений.

5. Старые браузеры

Любимый IE... Хоть поддержка по caniuse уже > 90% https://caniuse.com/#search=css-variables он ещё живёт...

Как один из подходов решения этого вопроса есть компромиссный вариант - делать версию с одной темой. Все переменные темы дублировать в :root и через postcss ставить статичные значения.

Этот сегмент получит сильно урезанный вариант оформления... Если это сильно критично то от локальных переменных придётся отказаться и делать стилизацию через каскады.

Либо использовать подходы с css-in-js... Но они не лишены недостатков.

6. Дизайнеры, разработчики и система

Тут конечно есть конфликт интересов... Но имхо, у дизайнера должна быть система, по которой он работает и она должна быть логичной (например http://whitepaper.tools/)

П.Н. Небольшая демка "на коленке" Буду благодарен, если поделитесь своей системой стилизации блоков и именованием переменных.

К примеру есть блок Collapse, у него существует два элемента: Collapse__part & Collapse__item.

На момент инициализации блока хочу разбить его контент таким образом:

//- Из такой структуры (так определено в bemjson)
<div class="collapse">
  <div class="work collapse__item">...</div>
  <div class="work collapse__item">...</div>
  <div class="work collapse__item">...</div>
</div>

//- В такую (модифицировать)
<div class="collapse">
  </div class="collapse__part">
    <div class="work collapse__item">...</div>
    <div class="work collapse__item">...</div>
  </div>
  </div class="collapse__part">
    <div class="work collapse__item">...</div>
  </div>
</div>

C условием того что эти чанки могут быть разной длины(настраиваемый параметр), в данном случае длина составляет 2 элемента(Collapse__item)

Посоветуйте пожалуйста в какой технологии это лучше сделать (в js, bemhtml.js или иным способом), каким образом?

ps. полностью использую среду разработки BEM (rep.: Project-Stub)

Здравствуйте. Подскажите пожалуйста, может ли быть так: Есть блок “родитель”, внутри него есть еще один блок “потомок” и внутри блока потомка есть элемент блока родителя? То есть вот так.

<div class=”parent”>
    <div class=”children”>
      <div class=”parent__elem”></div>
    </div>
</div>

Подскажите как решается данная проблема? У нас имеется класс "header__search-form" который допустим имеет отступ с низу, но как быть если придется перенести блок "search-form" в другое место где ему тоже нужны те же свойства, нужно создавать новый класс для нового окружения, каскадом, добавлением утилитарного класса или как то иначе? вижу 3 варианта

Вариант 1

<div class="header">
    <div class="search-form header__search-form"></div>
</div>

<div class="sidebar">
    <div class="search-form sidebar__search-form"></div>
</div>

<div class="blog">
    <div class="search-form blog__search-form"></div>
</div>

.header__search-form{
    margin-bottom:10px;
}
.sidebar__search-form{
    margin-bottom:5px;
}
.blog__search-form{
    margin-bottom:10px;
}

Вариант 2

<div class="header">
    <div class="search-form mb-10"></div>
</div>

<div class="sidebar">
    <div class="search-form mb-5"></div>
</div>

<div class="blog">
    <div class="search-form mb-10"></div>
</div>

Вариант 3

<div class="header">
    <div class="search-form"></div>
</div>

<div class="sidebar">
    <div class="search-form"></div>
</div>

<div class="blog">
    <div class="search-form"></div>
</div>

.header .search-form {
    margin-bottom:10px;
}
.sidebar .search-form {
    margin-bottom:10px;
}
.blog .search-form {
    margin-bottom:10px;
}

Стандартная ситуация

<body class="body body_fixed">
   <div class="logo">
      LOGO
   </div>
</body>


.logo {
   font-size: 40px;
}
.body.body_fixed .logo {
   80px;
}

Как мне такого рода CSS по папочкам разложить? Как посоветуете наименовать файлы? Что вообще можно сделать чтоб это грамотно сопровождать и deps какой и куда прикладывать. Решил упороться на сборщиках и правильной организации структуры. Настроил сборщики начал тесты проводить потом бац, а что делать со спецефичностью? Хочешь не хочешь но есть моменты когда от неё не уйти.

Добрый вечер. Подскажите пожалуйста, правильно ли организована разметка по БЭМ? Внешняя геометрия и позиционирование блока, а именно padding, position и т.д задаётся через миксы .top-bar__top-lang, .top-bar__top-phone, page__header, footer__copyrights, header__navigation, page__wrapper. Все ли я правильно понял? Можно ли упростить/добавить что либо DOM-узлах?

<body class="page">
    <div class="wrapper page__wrapper">
        <div class="top-bar page__top-bar">
            <div class="top-bar__container">
                <div class="top-bar__row">
                    <div class="top-lang top-bar__top-lang">
                        <ul class="top-lang__list">
                            <li class="top-lang__item">
                                <a href="" class="top-lang__link"></a>
                            </li>
                            <li class="top-lang__item">
                                <a href="" class="top-lang__link"></a>
                            </li>
                            <li class="top-lang__item">
                                <a href="" class="top-lang__link"></a>
                            </li>
                        </ul>
                    </div>
                    <div class="top-phone top-bar__top-phone">
                        <!-- START .top-phone__list -->
                        <ul class="top-phone__list">
                            <li class="top-phone__item">
                                <a href="" class="top-phone__link">p</a>
                            </li>
                            <li class="top-phone__item">
                                <a href="" class="top-phone__link"></a>
                            </li>
                            <li class="top-phone__item">
                                <a href="" class="top-phone__link"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <header class="header page__header">
            <div class="navigation header__navigation">
                <nav class="navigation__container">
                    <ul class="navigation__list">
                        <li class="navigation__item">
                            <a href="" class="navigation__links"></a>
                        </li>
                        <li class="navigation__item">
                            <a href="" class="navigation__links"></a>
                        </li>
                        <li class="navigation__item">
                            <a href="" class="navigation__links"></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <footer class="footer page__footer">
            <div class="copyrights footer__copyrights"></div>
        </footer>
    </div>
</body>

Приветствую, начинаю изучать БЭМ столкнулся с такой проблемой, как правильно именовать элементы при большой вложенности? Пример:

<div class="profile">
        <div class="profile__slider">
            <div class="profile__slider-slide">
                <div class="btn profile__slider-slide-btn"></div>
                <div class="message profile__slider-slide-message" ></div>
            </div>
            <div class="profile__slider-slide profile__slider-slide_something">
                <div class="btn profile__slider-slide-btn"></div>
                <div class="message profile__slider-slide-message" >
                    <div class="profile__slider-slide-message-bold"></div>
                </div>
            </div>
        </div>
    </div>

Можно использовать данное именование: profileslider-slide-message, которое говорит что это элемент "message" является потомком элемента "slide", который является потомком элемента "slider", который является элементом блока "profile". В данном случае profileslider-slide-message также является элементом блока "profile", хотя это не совсем логично, но обеспечиваться локализация данного элемента, в том плане что он будет уникальным.

В верстке я часто использую псевдоклассы :first-child, :last-child, :nth-child и тд. Они позволяют избежать ошибок при изменении верстки.

Допустимо ли повсеместное использование таких псевдоклассов в БЭМ? Или стоит использовать их только в крайней необходимости, в остальных случая заменяя модификаторами?

Например, есть такая разметка:

<div class="page">
  <ul class="list">
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
  </ul>
</div>

Блок .list реиспользуемый, но мне нужно чтобы внутри блока .page отступы между элементами .list__item отличались от стандартных для элемента.

Сейчас я поступаю так: миксую блок .list к .page и каскадом изменяю свойства необходимых элементов.

<div class="page">
  <ul class="page__list list">
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
  </ul>
</div>

Вот:

.list{
  &__item{
    margin-bottom: 16px;
  }
}

.page{
  &__list{
    .list{
      &__item{
        margin-bottom: 32px;
      }
    }
  }
}

Можно ли так делать? И как стоит поступать в таких случаях?

Здравствуйте.

Как применять методологию bem с bootstrap-scss при верстке макета ? Меня интересует способы применения какие они есть и какие задачи решает каждый из этих способов.

Можно ли перезаписывать стили дочерних элементов через каскад от модификатора?

Например вот так:

.block {
  &__content {
    background-color: red;
  }

  &__text {
    display: block;
  }

  &_active {
    .block__content {
      background-color: blue;
    }

    .block__text {
      display: flex;
    }
  }
}

~~~

Как правильно размечать структурно сложные, но одноразовые элементы: бем-блоком или бем-элементом родителя?

Вопрос 1: Предположим имеется какой-нибудь блок карты (card), который в принципе может переиспользоваться в других проектах. Но в разных проектах разные размеры шрифтов. Каким образом поступить: задавать какой-то размер по-умолчанию (например подходящий для текущего проекта) или создавать модификаторы для размеров (или еще как-то)?

Вопрос 2: Предположим есть блок кнопки (button), и в разных местах одного и того же проекта ему задаются разные размеры, это все нужно задавать через модификаторы?

Вопрос 3: Иногда требуется задать отступы от одного блока до другого, как это лучше реализовать (через модификаторы)?

Вопрос 4: Одна и та же кнопка в разных проектах имеет некоторые различия во внешнем виде, но часть стилей одинаковая, в стиль блока запихнуть только общее, а остальное сделать через модификаторы (_theme_a, _theme_b)?

P.S. Новичок в БЭМ, вопросов много, извините.

Знал БЭМ поверхостно - сейчас выделил время чтобы понять полностью. В целом все выглядит логично, кроме миксов. Возьмем пример с описания

<div class="header">
    <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
    <div class="search-form header__search-form"></div>
</div>

Микс header__search-form добавляет некие стили форме поиска. Форма поиска у нас подключается программно модулем. Теперь решили, что форма поиска необходима и в футере. Описываем подключение модуля и там с тем же шаблоном. И у нас (если ни чего не менять) этот микс применится и в футере. Соответственно нам необходимо либо иметь два разных шаблона блока поиска, либо микс выводить по выполнению условия (скажем PHP формирует этот HTML). Что является по сути лишним. Гораздо более логично, понятно и чище будет обойтись без "миксов". Или, точнее, реализовывать их "обычным" способом каскадных стилей.

.header .search-form { color:red; }

Таким образом код блока (включая шаблон) будет абсолютно самостоятелен, в нем не будет необходимости учитывать/проверять контекст, в котором он подключается. Т.е. фраза из статьи

В данном примере мы совместили поведение и стили блока search-form и элемента search-form блока header. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным. Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости

В реальности действует если только это блок встречается один раз на странице. В противном случае код должен отличаться как раз таки заставляя вписывать эти миксы.

Только начинаю разбираться с БЭМ. Прочитал все что есть на сайте и посмотрел пару роликов, но остались вопросы на самые базовые темы. Вот один из них, касающийся способов модифицирования стилей элементов вложенных блоков:

Предположим, есть блок button:

< div class="button" > < div class="button_ _icon" / > < /div>

.button_ _icon { color: yellow; }

Он является элементом для блока panel

< div class="panel" > < div class = "button panel_ button" > < div class="button _icon" /> < /div> < /div>

Предположим, мне надо поменять цвет у button__icon только в панели, но не задеть его в остальных местах. Как это сделать правильно?

Примиксовывать к button_ icon panel _button-icon. Это может привести к изменению кода блока button, если он не подразумевал возможность примиксовывать к иконке другие классы (например, мы используем React), что противоречит БЭМ.
Использовать вложенный селектор .panel .button_ _icon { color: red; }. Это увеличивает связанность компонент и зависимость от реализации button'а. Ну и в обоих этих вариантах panel в принципе не должен обращаться да и знать про элементы чужого блока.
Добавить модификатор button_ _icon_color_red для иконки. Опять же потребуется изменение кода для кнопки. И реализация сильно усложнится, если вложенность будет бОльшая - например, не во всех панелях у кнопки другой цвет, а только в панелях, которые лежат в header. Прокидывать модификатор через всю иерархию - напрягает. Как правильно?

Обучаю студентов вёрстке по методологии БЭМ. Хочу автоматизировать простейшую проверку именования по методологии: на пркоммит-хук повесить линтер, который будет проверять pug-разметку (ну или компилировать ее в html и проверять уже его) на предмет соблюдения методологии.

Есть какие-то готовые решения, которые у меня не получилось загуглить? В какую сторону смотреть?

класс для заголовка

БЭМап в Питере 19 июля в 18:30

Мой первый написаный код по БЭМ

Запись БЭМапа про bem-react

Форма на БЭМ

БЭМап про bem-react 14 июня 2019

БЭМап про дизайн-системы и БЭМ

Могу ли я использовать файловую структуру БЭМ по сути только для scss файлов ?

Может ли блок содержаться внутри самого себя?

Валидная вёрстка по БЭМ или нет, где ошибки?

Допустимо ли изменение блока через каскад от микса?

Блок или элемент в моем футере? И как лучше всего обозвать классы?

Как правильно дать названия классам?

BEM + CSS Variables. Стилизация блоков.

Блоки и темы оформления.

1. Глобальные/Контекстные (что реализовано в whitepaper)

2. Локальные (Уровень блока)

3. Модификаторы

4. Именование цветов

5. Старые браузеры

6. Дизайнеры, разработчики и система

Как динамически разбить элементы блока на чанки?

Перекрестные элементы

Универсальный класс

Модификация блока путём увеличение специфичности

Правильно ли организована разметка по БЭМ?

Как правильно именовать, элементы при большой вложенности?

Использование псевдоклассов в БЕМ

Как использовать миксы от родителей к элементам дочерних реиспользуемых блоков?

Как применять на практике bem + bootstrap-scss ?

Допустим ли каскад в модификаторах?

Про заголовки

Как разметить структурно сложный но при этом нереюзабельный элемент?

БЭМ и задание размеров шрифта, кнопки, отступов

Мысли про миксы

Модифицирование стилей элементов вложенных блоков.

Линтинг разметки с БЭМ: есть ли?