Бэм css что это

БЭМ (Блок-Элемент-Модификатор) — это методология именования классов в CSS, которая позволяет создавать читаемый, модульный и масштабируемый код.

Каждый элемент веб-страницы представляется в БЭМ как блок, элемент или модификатор.

• Блок (Block) — это независимый компонент, который не зависит от других элементов на странице. Он может содержать другие блоки и элементы, а также определять свои стили и поведение. Примеры блоков: header, menu, footer, button.
• Элемент (Element) — это часть блока, которая имеет свой смысл только в контексте этого блока. Он не может использоваться вне блока, к которому он относится. Имя элемента определяется как имя блока, затем двойное подчёркивание и название элемента. Пример элемента: menu__item и button__icon.
• Модификатор (Modifier) — это изменение внешнего вида или поведения блока или элемента. Он может изменять цвет, размер, расположение и другие свойства. Имя модификатора определяется как имя блока или элемента, затем двойное тире и название модификатора. Пример модификатора: button—green и menu__item—active.

Создание именно блоков, элементов и модификаторов, а не одиночных классов, позволяют легче понимать и использовать CSS-код, улучшают его переиспользуемость, упрощают и ускоряют процесс разработки, особенно при работе в команде.

БЭМ может использоваться в сочетании с другими методологиями и инструментами разработки, такими как Sass и PostCSS, что позволяет создавать мощный и эффективный CSS-код.