Краткое поступление к модификаторам блочного элемента (BEM)

1656557769 kratkoe postuplenie k modifikatoram blochnogo elementa bem

Майкла Озомена

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

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

Что такое BEM?

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

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

BEM в действии.

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

Блокировать

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

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

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

1*Buz2ehP8ELECMdgo4xbKUg

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

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

1*KANbx3IJWy-IzffvXIzRnQ

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

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

Элементы

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

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

1*Buz2ehP8ELECMdgo4xbKUg

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

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

У нас есть три элемента, из которых состоит option блок: option__text, option__radio-button, option__note. Однако мы могли бы изменить один из этих элементов в отдельный блок:

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

Модификатор

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

1*KQSkWS77mlkLqQTAspoUBA

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

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

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

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

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

Вывод

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

Надеюсь, вы чему-то научились этому, и вы лучше понимаете BEM и то, как он выглядит в реальном мире. Если вы это сделаете, не стесняйтесь оставить комментарий и несколько шлепков.

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

Добавить комментарий

Ваш адрес email не будет опубликован.