Краткое введение в Модификаторы Блочных Элементов (БЭМ)

Модификатор блочного элемента

Всем привет! Итак, вы хотите лучше понять БЭМ? Я думаю, что если вы читаете это, вы можете не знать, что означает БЭМ. Если вы этого не сделаете, это аббревиатура от блочного элемента и модификатора.

Что такое БЭМ?

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

Это означает, что BEM - это система методов, которая помогает вам писать код HTML и CSS, чтобы его можно было легко использовать повторно и совместно использовать с другими частями вашего кода.

БЭМ в действии.

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

блок

«Блок» относится к любому объекту, который может оставаться в одиночестве и при этом иметь смысл. Примерами блоков являются заголовок, ввод и флажок. Примерами объектов, которые не являются блоками, являются заголовки заголовков, элементы в списке или метки для флажков.

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

Посмотри на это:

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

Это настоящее разделение на блоки:

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

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

элементы

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

Давайте посмотрим на это снова:

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

Код для скриншота выше будет выглядеть примерно так:

У нас есть три элемента, которые составляют блок параметров: option__text, option__radio-button, option__note. Тем не менее, мы можем изменить один из этих элементов в отдельный блок:

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

Модификатор

Модификатор - это флаг, который изменяет внешний вид или поведение блока или элемента. Например:

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

Давайте посмотрим, как выглядит код для этого:

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

Согласно правилам БЭМ, наша кнопка флага - зеленая имеет «побочный эффект», который может привести к путанице, которая является свойством box-shadow. Наш флаг делает то, о чем его имя не говорит нам. Но это нормально, потому что в нашем маленьком проекте у нас никогда не будет зеленой кнопки с рамкой-тенью. Если мы когда-либо сделаем, мы можем сломать флаг:

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

Заключение

БЭМ - это очень хороший способ написать и структурировать ваш HTML и CSS код. Это руководство не охватывает 100% всего БЭМ, но этого должно быть достаточно, чтобы дать вам четкое понимание методологии. Вы можете прочитать больше о БЭМ здесь.

Я надеюсь, что вы чему-то научились из этого, и что вы лучше понимаете БЭМ и то, как он выглядит в реальном мире. Если вы это сделаете, не стесняйтесь оставить комментарий и несколько хлопков.

Есть вопросы? Вы можете отправить мне DM в твиттере @THEozmic.