Как именовать классы в HTML и CSS с помощью BEM

Здравствуйте, друзья,

В сегодняшней статье мы поговорим об именовании классов в HTML и CSS. 

Мы обсуждаем соглашение об именовании BEM, где B — тело, E — элемент, M — модификатор. Вы можете ознакомиться с классами именования, подобными приведенному ниже

//Wrong
.catlystNavbar{ ... }
.catlystNavbarLogo{ ... }
.catlystNavbarBg{ ... }

//Correct
.catalyst-navbar {  ...}
.catalyst-navbar__logo{  ...}
.catalyst-navbar--bg{  ...}
Вход в полноэкранный режим Выход из полноэкранного режима

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

Для эффективного понимания давайте рассмотрим на примере нашей панели навигации
Навбар Catalysts

Приведенный выше navbar представляет собой элемент, такой как блок дизайна.

Который представляет собой первую букву BEM, то есть Block, и компонент стилизован подобным образом, как показано ниже.

.catalyst-navbar{  ... }
Вход в полноэкранный режим Выход из полноэкранного режима

E — Element

E означает Элемент в BEM

Например, catalyst-navbar имеет логотип и ссылки.

Логотип и ссылки — это все элементы внутри компонента. Их можно рассматривать как дочерние компоненты, то есть дочерние элементы общего родительского компонента.

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

.catalyst-navbar__logo{  ... }
.catalyst-navbar__content{  ... }
Вход в полноэкранный режим Выход из полноэкранного режима

M — Модификатор

M означает модификатор в BEM

Что если бы навигационная панель была изменена, и мы могли бы иметь синий или красный фон?

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

В BEM имена классов модификаторов образуются путем добавления двух дефисов, за которыми следует имя элемента.

Например:

.catalyst-navbar--bg{  ... }
.catalyst-navbar--red{  ... }
.catalyst-navbar--blue{  ... }
Вход в полноэкранный режим Выход из полноэкранного режима

Вот окончательный код, который я написал для этой панели навигации

Теперь возникает вопрос, зачем нужно соглашение об именовании?

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

Правильное именование вещей в CSS сделает ваш код более легким для чтения и сопровождения.

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

Оцените статью
devanswers.ru
Добавить комментарий