Здравствуйте, друзья,
В сегодняшней статье мы поговорим об именовании классов в 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, вам будет проще увидеть взаимосвязь между компонентами/блоками дизайна, просто взглянув на разметку.