Способы изменения блока

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

• Модификатором

• Миксом

• Уровнем переопределения

• Контекстом

Все способы изменения блока не требуют:

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

• изменять исходную реализацию блока;

• создавать новый блок на основе существующего.

Как выбрать способ изменения блока

• Используйте модификатор, чтобы изменить один конкретный экземпляр блока. Установка и снятие модификатора должны влиять только на изменяемый блок и не иметь отношения к окружающим блокам.

• Используйте микс:

  • чтобы позиционировать один блок в составе другого блока;

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

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

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

Изменение блока модификатором

Изменение блока производится установкой/снятием модификатора, код которого описывает изменения. Блоку можно добавлять одновременно неограниченное количество модификаторов.

Модификатор может задавать блоку:

• внешний вид

• поведение

• состояние

• структуру

Рассмотрим изменение блока с помощью модификатора на примере блока popup.

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

<!-- Блок popup -->
<div class="popup">...</div>

Изменение внешнего вида блока

Модификатор theme в значении sun задает желтый фон всплывающему окну.

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

<!-- Блок popup с модификатором theme в значении sun-->
<div class="popup popup_theme_sun">...</div>

Изменение поведения блока

Модификатор direction отвечает за направление открытия всплывающего окна.

Например, модификатор direction в значении right открывает всплывающее окно вправо.

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

<!-- Блок popup -->
<div class="popup popup_direction_right">...</div>

Изменение структуры блока

Модификатор has-tail в значении true добавляет блоку popup новый элемент — «хвостик». Также модификатор добавляет отступы блоку, освобождая место для хвостика.

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

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

<!-- Блок popup -->
<div class="popup popup_has-tail">...</div>

Изменение состояния блока

Модификатор disabled переводит блок button, открывающий всплывающее окно, в состояние «отключен», то есть отключает возможность показывать окно.

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

<!-- Блок button с модификатором disabled-->
<div class="button button_disabled">...</div>

Добавление нескольких модификаторов

Блоку можно добавлять неограниченное количество модификаторов. Например:

• theme в значении sun;

• has-tail в значении true.

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

<!-- Блок popup -->
<div class="popup popup_theme_sun popup_has-tail">...</div>

Всплывающее окно откроется вниз и будет иметь желтый фон и «хвостик»:

Изменение блока миксом

Изменение блока производится при помощи размещения дополнительных БЭМ-сущностей на одном DOM-узле с блоком. Миксы позволяют совмещать поведение и стили нескольких сущностей без дублирования кода.

Позиционирование одного блока в составе другого

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

Подробнее о внешней геометрии и позиционировании.

В примере рассмотрен блок header (шапки) из подключенной библиотеки. По умолчанию блок header ничего не знает о расположении вложенных в него блоков. Чтобы добавить в шапку блоки logo, search и user, необходимо определить отступы для каждого вложенного блока:

Шапка и вложенные в нее блоки logo, search и user должны остаться независимыми. Для этого позиционирование вложенных блоков задается через элементы блока header, которые примиксовываются к блокам.

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

<!-- Блок `header` -->
<header class="header">
    <div class="logo header__logo">...</div>
    <div class="search header__search">...</div>
    <div class="user header__user">...</div>
</header>

Стили вложенных блоков logo, search и user не изменились и по-прежнему не содержат отступы. Блоки остались независимыми и могут использоваться повторно в любом месте.

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

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

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

В примере тексту внутри блоков article и copyright необходимо задать один и тот же цвет и шрифт. Для этого нужно примиксовать блок text, стили которого определяют цвет и шрифт текста, к блокам article и copyright.

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;
}

Изменение блока уровнем переопределения

Изменение блока производится при помощи объединения свойств блока с разных уровней переопределения. Блоки можно доопределять и переопределять. Изменения блока описываются на отдельном уровне и подключаются при сборке.

Подробнее о принципах работы уровней переопределения.

Пример

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

Исходная реализация блока button в библиотеке:

Чтобы изменить цвет кнопки, необходимо доопределить CSS-правила блока button на уровне проекта (project.blocks).

Файловая структура с новыми правилами для кнопки (button.css) на уровне project.blocks:

project/
    library.blocks/
        button/
            button.css   # исходная CSS-реализация кнопки в библиотеке

    project.blocks/
        button/
            button.css   # переопределение на уровне проекта

В результате для блока button применятся правила с обоих уровней переопределения:

@import "library.blocks/button/button.css"; /* Исходные CSS-правила с уровня библиотеки */
@import "project.blocks/button/button.css"; /* Особенности с уровня project.blocks */

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

Больше примеров использования уровней переопределения.

Изменение блока контекстом

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

Важно Изменять внешний вид и поведение блока контекстом следует только в том случае, если невозможно использовать микс. Изменения с помощью контекста ограничивают независимость блоков.

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

Например, можно заранее определить правила для основных тегов, которые может применить пользователь:

.comments p {
    font-family: Arial, sans-serif;
    text-align: center; 
}