Bem 65-248а (bm1-2000-0000)

Работа с модификаторами

Поведение блока описывается с помощью состояний. Модификаторы содержат информацию о состояниях блока. Перевод блока в другое состояние производится при помощи установки/снятия модификатора. Изменение модификатора создает событие, которое можно использовать для работы с блоком.

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

Для корректной работы JavaScript в БЭМ-проекте все манипуляции с модификаторами должны производиться при помощи методов-хелперов. Изменять значение модификаторов следует с помощью спец методов, а не менять напрямую CSS-класс на соответствующем DOM-узле.

Реакция на изменение модификаторов

В БЭМ реакция на установку/снятие модификатора описывается декларативно: изменение состояния автоматически вызывает код, который задекларирован для этого состояния. Если появляется модификатор (добавляется новый класс к DOM-узлу), то вся функциональность, свойственная этому модификатору, также применяется. Если модификатор исчезает, функциональность отключается.

Переход блока из одного состояния в другое часто сопровождается изменениями его внешнего вида. Так как добавление модификатора блоку изменяет его класс на DOM-узле, а стили написаны опираясь только на классы, изменение класса автоматически приводит к изменению внешнего вида блока.

Чтобы динамически изменять состояния блоков и элементов, используются специальные методы для установки и снятия модификаторов.

Один из способов решения этой задачи — жестко прописать все условия в коде и постоянно выполнять проверку. Такой подход неудобен, так как любое изменение потребует изменений в коде вручную.

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

block('button').onSetMod({
    focused: {
        true: this.onFocus,
        false: this.onBlur
    }
});

Такой подход дает возможность:

  • Определять каждому состоянию свой внешний вид, добавив стили модификатору.

  • Изменять или полностью перекрывать поведение блока с помощью .

Разделение кода на части

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

Логика работы каждого блока, его опциональных элементов и модификаторов описывается в отдельных файлах. JavaScript-файлы хранятся в соответствии с правилами организации файловой структуры БЭМ-проекта.

Рассмотрим на примере логотипа (блок ), реализованного в технологии CSS.

Блок в файловой структуре проекта:

logo/           # Директория блока logo
    logo.css    # Реализация блока logo в технологии CSS

Добавим блоку новую функциональность: нажатие на логотип будет вызывать какое-то действие.

JavaScript-реализация блока :

document.querySelector('.logo').addEventListener('click', doSomething, false);

Файл в файловой структуре блока :

logo/           # Директория блока logo
    logo.css    # Реализация блока logo в технологии CSS
    logo.js     # Реализация блока logo в технологии JavaScript

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

Принцип инкапсуляции

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

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

Принцип декларативности

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

Принцип наследования

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

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

Селекторы

В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов.

Селекторы классов

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

Значением атрибута может быть разделенный пробелами список слов. Это позволяет использовать разные на одном DOM-узле.

Пример

HTML-реализация:

header class="header">
    
    button class="header__button button button_theme_islands">...button>
header>

Совмещение тега и класса в селекторе

Методология БЭМ не рекомендует совмещать теги и классы в селекторе. Объединение тега и класса (например, ) повышает специфичность CSS-правил, что усложняет задачу их переопределения. Это приводит к войнам значимости, при которых таблицы стилей загружаются излишне сложными селекторами.

Пример

HTML-реализация:

button class="button">...button>

CSS-правила заданы в селекторе .

Допустим, блоку добавили модификатор со значением :

button class="button button_active">...button>

Селектор не переопределит свойства блока, записанные как , так как специфичность выше чем у . Для успешного переопределения селектор модификатора блока также должен быть скомбинирован с тегом .

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

Нужно стараться использовать простые селекторы классов:

.button {}
.button_active {}

Вложенные селекторы

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

При использовании вложенных селекторов важно соблюдать принцип инкапсуляции: правила одного блока не должны влиять на внутренний мир другого блока. Элементы — это внутренняя реализация блока

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

Вложенность уместна, если необходимо изменить стили элементов в зависимости от модификатора (например, состояния блока или заданной темы):

Пример

CSS-реализация:

.button_hovered .button__text
{
    text-decoration: underline;
}

.button_theme_islands .button__text
{
    line-height: 1.5;
}

Комбинированные селекторы

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

Пример

HTML-реализация:

button class="button button_theme_islands">...button>

CSS-правила заданы в селекторе .

Допустим, блоку добавили модификатор с значением :

button class="button button_theme_islands button_active">...button>

Селектор не переопределит свойства блока, записанные как , так как специфичность выше, чем у . Для успешного переопределения селектор модификатора блока также должен быть скомбинирован с селектором и объявлен ниже , так как специфичность обоих селекторов одинакова:

CSS-реализация:

.button.button_theme_islands {}
.button.button_active {}

Нужно стараться использовать простые селекторы классов:

.button_theme_islands {}
.button_active {}

Именование

Имя селектора должно полно и точно описывать представляемую им БЭМ-сущность.

В качестве примера рассмотрим следующие четыре строки CSS-кода:

.button {}
.button__icon {}
.button__text {}
.button_theme_islands {}

С определенной долей вероятности можно предположить, что мы имеем дело с одним блоком и его HTML-реализация выглядит следующим образом:

button class="button button_theme_islands">
    span class="button__icon">span>

    span class="button__text">...span>
button>

Сложнее сделать подобное предположение с такой группой селекторов:

.button {}
.icon {}
.text {}
.theme_islands {}

Имена , , не так информативны.

Общие правила именования блоков, элементов и модификаторов позволяют:

  • сделать имена CSS-селекторов максимально информативными и понятными;

  • решить проблему коллизии имен;

  • независимо описывать стили блоков и их опциональных элементов.

Пример

HTML-реализация:

div class="logo logo_theme_islands">
    img src="URL" alt="logo" class="logo__img">
div>


div class="user user_theme_islands">
    img src="URL" alt="user-logo" class="user__img">
    ...
div>

Именование CSS-классов:

.logo {}                  

.logo__img {}             

.logo_theme_islands {}    

.user {}                  

.user__img {}             

.user_theme_islands {}    

Служба

Корабль после вступления в строй вошёл в состав 175-й БЭМ Тихоокеанского флота ВМФ СССР. С 17 по 21 ноября совместно с крейсером «Адмирал Сенявин» и эсминцем «Выдержанным» под флагом вице-адмирала В. А. Фокина посетил Джакарту (Индонезия), по итогам года признан лучшим кораблём Тихоокеанского флота.

С 24 августа по 16 июля 1969 года эсминец прошёл модернизацию по проекту 56А на «Дальзаводе» (79-я бригада строящихся и ремонтируемых судов, Владивосток), после её завершения включён в состав 9-й ди ПЛК, но 26 декабря переведён в состав 175-й БРК; с по 26 апреля 1970 года корабль принимал участие в учениях «Океан», пройдя за время учений 3825 морских миль.

В период с 17 июля 1970 по 8 февраля 1971 года «Возбуждённый» участвовал в несении боевой службы в Индийском океане; за время несения службы эсминец прошёл 23 140 морских миль, посетил порты Бербера (четыре раза) и Аден, обеспечивал подъём космического аппарата «Зонд-8». 16 июня 1971 года включён в состав 173-й БЭМ Камчатской флотилии, в ноябре совершил поход в Индийский океан. В январе 1972 года корабль вышел на новую боевую службу в Индийский океан совместно с БПК «Строгий» (под флагом контр-адмирала В. С. Круглякова), с 11 по 16 апреля КУГ нанесла визит в Ум-Каср (Ирак), с 10 по 15 июля 1972 года — в Порт-Луи (Маврикий).

С 7 октября по 2 марта «Возбуждённый» находился в ремонте на «Дальзаводе». В 1979 году вышел на боевую службу в Индийском океане: в составе КУГ (совместно с ракетным крейсером «Адмирал Фокин» и БПК «Строгий») с 5 по 9 ноября нанёс визит в Хайфон (Вьетнам), с боевой службы возвращался своим ходом.

В 1981 году эскадренный миноносец выполнял задачи боевой службы в Индийском океане, с 26 по 31 мая 1981 года нанёс визит в Аден (Южный Йемен). 8 марта 1982 года приказом министра обороны СССР корабль был отправлен на консервацию и поставлен на прикол. 1984-1988м на прикол не стоял в Петропавловск-Камчатский, нес боевое дежурство.В 1987 введен в состав ВМФ и два года нес боевую службу и участвовал в учениях Камчатской флотилии[источник не указан 2757 дней]; приказом министра обороны СССР от 25 апреля 1989 года исключён из списков кораблей ВМФ СССР и 1 октября расформирован. В 1990 году затоплен у берегов Камчатки после проведения по нему артиллерийских стрельб. с 1980 по 1983 корабль 3 раза заходил в йемен был во вьетнаме кам-рань и в эфиопии о-ва дахлак . в1982 его не отправляли в консервацию.

Основы БЭМ

Методология БЭМ — это набор универсальных правил, которые можно применять независимо от используемых технологий, будь то CSS, Sass, HTML, JavaScript или React.

БЭМ помогает решить следующие задачи:

  • повторно использовать верстку
  • безболезненно менять верстку местами в одном проекте
  • переносить готовую верстку из проекта в проект
  • создавать стабильный, предсказуемый и понятный код
  • сократить время на отладку проекта

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

Именно блокам и элементам посвящены первые две буквы в аббревиатуре БЭМ.

Имя блока всегда уникально. Оно задает пространство имен для элементов и устанавливает видимую связь между всеми составляющими блока. Длинные, но понятные имена блоков и элементов позволяют определить связь между компонентами и не потерять составные части этих компонентов при переносе верстки.

Чтобы показать всю силу БЭМ-нейминга, рассмотрим пример с формой. По БЭМ-методологии форма будет представлена блоком . В HTML имя блока всегда записывается в атрибуте :

Все части формы (блок ), которые не имеют смысла в отрыве от нее, считаются ее элементами. Таким образом поле ввода () и кнопка () — это элементы блока . Принадлежность элемента к блоку также выражается в имени через классы:

Обратите внимание, что имя блока отделяется от имени элемента специальным разделителем. В в БЭМ для разделителя используются два подчеркивания

Разделители могут быть любыми. Существуют , и каждый разработчик выбирает наиболее удобную для себя

Важно, чтобы разделители давали возможность на программном уровне отличать блоки от элементов и модификаторов

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

.form__search {}.form__submit {}

Запись имен в классах с помощью блоков и элементов решает еще одну важную проблему: избавляет от вложенности селекторов. У всех селекторов в БЭМ-проекте одинаковый вес. То есть переопределять стили, написанные по БЭМ, гораздо удобнее.

Теперь, чтобы использовать такую же форму в другом проекте, достаточно просто скопировать ее разметку и стили.

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

Элемент

Составная часть блока, которая не может использоваться в отрыве от него.

Особенности:

  • характеризует смысл («что это?» — «пункт»: , «текст»: ), а не состояние («какой, как выглядит?» — «красный»: , «большой»: ).

  • Структура полного имени элемента соответствует схеме: . Имя элемента отделяется от имени блока двумя подчеркиваниями ().

Пример

form class="search-form">
    
    input class="search-form__input">

    
    button class="search-form__button">Найтиbutton>
form>

Вложенность

  • Элементы можно вкладывать друг в друга.

  • Допустима любая вложенность элементов.

  • Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида .

Пример

form class="search-form">
    div class="search-form__content">
        input class="search-form__input">
        button class="search-form__button">Найтиbutton>
    div>
form>


form class="search-form">
    div class="search-form__content">
        
        input class="search-form__content__input">

        
        button class="search-form__content__button">Найтиbutton>
    div>
form>

Имя блока задает пространство имен, которое элементов от блока ().

Блок может иметь вложенную структуру элементов в DOM-дереве:

Пример

div class="block">
    div class="block__elem1">
        div class="block__elem2">
            div class="block__elem3">div>
        div>
    div>
div>

Однако эта же структура блока в методологии БЭМ всегда будет представлена плоским списком элементов:

Пример

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Это позволяет изменять DOM-структуру блока без внесения правок в коде каждого отдельного элемента:

Пример

div class="block">
    div class="block__elem1">
        div class="block__elem2">div>
    div>

    div class="block__elem3">div>
div>

Структура блока меняется, а правила для элементов и их названия остаются прежними.

Принадлежность

Элемент — всегда часть блока и не должен использоваться отдельно от него.

Пример


form class="search-form">
    
    input class="search-form__input">

    
    button class="search-form__button">Найтиbutton>
form>



form class="search-form">
form>


input class="search-form__input">


button class="search-form__button">Найтиbutton>

Необязательность

Элемент — необязательный компонент блока. Не у всех блоков должны быть элементы.

Пример

div class="search-form">
    
    input class="input">

    
    button class="button">Найтиbutton>
div>

Задачи уровней переопределения

Уровни переопределения решают следующие задачи:

Добавление блоков в проект

Блоки с любого уровня могут использоваться в проекте без изменений.

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

Файловая структура проекта с подключенным уровнем библиотеки:

project/
    common.blocks/    # уровень переопределения с блоками проекта
        header/
        logo/
    library.blocks/   # уровень переопределения c блоками библиотеки
        button/       # блок button 

В результате сборки проекта блок будет подключен в проект:

@import "common.blocks/header/header.css";  
@import "common.blocks/logo/logo.css";      
@import "library.blocks/button/button.css"; 

Изменение реализации блока

Блоки с любого уровня можно изменять под требования проекта на другом уровне переопределения:

  • доопределять — добавлять новые свойства блоку;

  • переопределять — изменять существующие свойства блока.

Количество уровней, с которых собирается конечная реализация блока, и порядок их подключения могут быть любыми. Исходная реализация блока доопределяется или переопределяется реализациями с каждого последующего уровня. Поэтому в сборку сначала должна попасть исходная реализация, а затем — изменения со всех уровней переопределения.

Схема показывает подключение БЭМ-сущностей с разных уровней переопределения в сборку:

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

project/
    common.blocks/    # уровень переопределения с блоками проекта
        header/
        logo/
    library.blocks/   # уровень переопределения c блоками библиотеки
        button/       # блок button 

Исходная CSS-реализация блока :

CSS-реализация:


.button {
    position: absolute;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 3px;
    background-color: #fff;
}

Отображение:

Чтобы внести изменения, необходимо:

  • Переопределить блок — изменить цвет и размер кнопки.

  • Доопределить блок — добавить кнопке тень.

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

Файловая структура проекта с блоком на уровне :

project/
    common.blocks/       # уровень переопределения с блоками проекта
        header/
        logo/
        button/
            button.css   # новые правила для блока button
    library.blocks/      # уровень переопределения c блоками библиотеки
        button/          # блок button 
            button.css
            button.js

Новые CSS-правила:


.button {
    background-color: #ffdf3a;            
    width: 150px;                         
    box-shadow:   10px rgba(0,0,0,0.5); 
}

В результате сборки реализация блока будет состоять из исходных CSS-правил с уровня и добавленных — с уровня :

@import "library.blocks/button/button.css";  
@import "common.blocks/button/button.css";   

Повторяющееся свойство () будет переопределено (фон кнопки изменится на желтый), а новые свойства ( и ) — добавлены. Блоку применится следующий набор свойств:

.button {
    position: absolute;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 3px;
    background-color: #ffdf3a;             
    width: 150px;                          
    box-shadow:   10px rgba(0,0,0,0.5);  
}

Новый вид кнопки:

В результате:

  • Исходная реализация блока не изменяется.

  • Проектные изменения для блока применятся ко всем кнопкам проекта.

  • При обновлении библиотеки до новой версии, изменения блоков, которые сделаны для проекта, сохранятся на другом уровне переопределения. Если в новой версии библиотеки изменится фон кнопки или ее размеры, в проекте для блока все равно применятся переопределенные правила.

Работа с DOM-деревом

DOM-узел экземпляра блока и элемента

В контексте экземпляра блока и элемента с DOM-представлением зарезервировано поле , содержащее jQuery-объект со ссылками на все DOM-узлы, с которыми связан данный экземпляр.

Поиск экземпляров блоков и элементов в DOM-дереве

Обращение к другому блоку в выполняется из текущего блока, размещенного на определенном узле DOM-дерева. Поиск других блоков в DOM-дереве может вестись по трём направлениям (осям) относительно DOM-узла текущего блока:

  • Внутри блока — на DOM-узлах, вложенных в DOM-узел текущего блока.

    Вспомогательные методы:

    • ;

    • ;

    • ;

    • .

  • Снаружи блока — на DOM-узлах, потомком которых является DOM-узел текущего блока.

    Вспомогательные методы:

    • ;

    • ;

    • ;

    • .

  • На себе — на том же DOM-узле, на котором размещен текущий блок. Это актуально в случае (микс).

    Вспомогательные методы:

    • ;

    • ;

    • ;

    • .

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

Сигнатура вспомогательных методов поиска блоков идентична:

block {Function|Object} – класс или описание искомого блока. Описанием служит хеш вида { block : MyBlock, modName : ‘my-mod’, modVal : ‘my-val’ }.

Для методов поиска элементов:

  • – имя, класс или описание искомого элемента. Описанием служит хеш вида или ;

  • – нужно ли учитывать вложенность одноимённых блоков.

Вспомогательные методы для поиска парные. Различаются возвращаемым значением:

  • и – возвращает первый найденный экземпляр

  • – возвращает коллекцию найденных экземпляров

Пример

modules.define('attach', , function(provide, bemDom, Button) {

provide(bemDom.declBlock(this.name, {
    onSetMod: {
        'js': {
            'inited' : function(modName, modVal) {
                this._button = this.findChildBlock(Button);
            }
        }
    }
}));

});

Кэширующие методы поиска экземпляров элементов

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

elem {String|Function|Object} – имя, класс или описание искомого элемента. Описанием служит хеш вида { elem : MyElem, modName : ‘my-mod’, modVal : ‘my-val’ } или { elem : ‘my-elem’, modName : ‘my-mod’, modVal : ‘my-val’ }.

Аналогично с некэширующими методами поиска кеширующие методы различаются возвращаемым значением:

  • – возвращает первый найденный экземпляр элемента

  • – возвращает коллекцию найденных экземпляров элементов

Пример

modules.define('button', , function(provide, bemDom, ButtonControl) {

provide(bemDom.declBlock(this.name, {
    setName : function(name) {
        this._elem(ButtonControl).setName(name);
    },

    setValue : function(value) {
        this._elem(ButtonControl).setValue(value);
    }
}));

});

Кеширующий метод поиска экземпляра блока элемента

_block() — возвращает экземпляр блока для элемента.

Пример

modules.define('my-form__submit-control', , function(provide, bemDom) {

provide(bemDom.declElem('my-form', 'submit-control', {
    _onClick : function() {
        this._block().submit();
    }
}));

});

Проверка вложенности

containsEntity(entity) — проверяет вложен ли переданный экземпляр entity {i-bem-dom:Entity} в текущий экземпляр.

Динамическое обновление блоков и элементов в DOM-дереве

В модуле предусмотрены следующие функции для добавления и замены фрагментов DOM-дерева.

  • Удалить DOM-фрагмент:

    destruct(ctx, )

    Сигнатура функции:

    • – корневой DOM-элемент. Удаляется со всем вложенными DOM-узлами.

    • – не удалять корневой DOM-элемент, если значение . По умолчанию .

  • Добавить DOM-фрагмент:

    •  — в конец указанного контекста;

    •  — в начало указанного контекста;

    •  — перед указанным контекстом;

    •  — после указанного контекста;

  • Заместить DOM-фрагмент:

    •  — внутри указанного контекста;

    •  — заменить указанный контекст новым DOM-фрагментом.

    Сигнатура функций добавления и замены идентична:

    • – DOM-элемент

    • – содержимое

Все функции возвращают DOM-элемент с содержимым для которого была выполнена .

Чтобы упростить создание БЭМ-сущностей на обновляемых фрагментах DOM-дерева, можно использовать шаблонизатор BEMHTML, подключив его в качестве ym-модуля. БЭМ-сущности описываются в формате BEMJSON непосредственно в коде блока. Функция генерирует HTML-элементы по BEMJSON-декларации в соответствии с правилами именования БЭМ.

Пример

Метод блока удаляет элемент , если он существовал, и создает новый элемент с помощью функции :

modules.define( 'attach', , function(provide, BEMHTML, bemDom) {

provide(bemDom.declBlock(this.name, {
    _updateFileElem : function() {
        bemDom.replace(
            this._elem('file').domElem,
            BEMHTML.apply({
                block : 'attach',
                elem : 'file',
                content : this.getValue()
            }));
        return this;
    }
}));

});

Миксы

Позволяют:

  • совмещать поведение и стили нескольких сущностей без дублирования кода;

  • одинаково форматировать разные HTML-элементы.

Внешняя геометрия и позиционирование

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

Пример

HTML-реализация:

header class="header">
    button class="button header__button">...button>
header>

CSS-реализация кнопки:

.button {
    font-family: Arial, sans-serif;
    text-align: center;
    border: 1px solid black;    
}
.header__button {
    margin: 30px;               
    position: relative;
}

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

HTML-реализация:

footer class="footer">
    button class="button">...button>
footer>

Стилизация групп блоков

Иногда необходимо применить одинаковое форматирование сразу к нескольким различным HTML-элементам веб-страницы.
Обычно для решения подобных задач применяют групповые селекторы.

Пример

HTML-реализация:

article class="article">...article>

footer class="footer">
    div class="copyright">...div>
footer>

CSS-реализация:

.article, .footer div {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000;
}

В данном примере текст внутри блоков и имеет один и тот же цвет и шрифт.

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

Поэтому в БЭМ для того, чтобы единообразно отформатировать целый набор HTML-элементов, используют .

Пример

HTML-реализация:

article class="article text">...article>

footer class="footer">
    div class="copyright text">...div>
footer>

CSS-реализация:

.text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000;
}
Ссылка на основную публикацию