Спросят с вероятностью 13%
Методология BEM (Block, Element, Modifier) — это популярный подход к организации CSS классов и структуры HTML. Эта методология направлена на упрощение разработки и поддержки больших и масштабируемых проектов за счет введения строгой структуры для классов CSS.
Компоненты BEM:
1️⃣ Блок (Block): Независимый компонент страницы, который может быть повторно использован. В нем описывает сущность, которая имеет смысл сама по себе (например, кнопка, меню).
2️⃣ Элемент (Element): Часть блока, которая не может использоваться отдельно от него. Элементы связываются с блоками через двойное подчеркивание (
__). Например, пункт меню (menu__item) является элементом блока меню.3️⃣ Модификатор (Modifier): Свойство, которое изменяет внешний вид или поведение блока или элемента. Модификаторы обозначаются двойным дефисом (
--). Например, активное состояние кнопки может быть представлено как button--active.Преимущества:
✅ Модульность: Благодаря независимости блоков, их легко переиспользовать в разных частях проекта или даже в разных проектах.
✅ Ясность и понятность: Структура классов становится более очевидной, что облегчает понимание структуры проекта новыми разработчиками.
✅ Упрощение масштабирования: Методология облегчает добавление новых функций и стилей без страха нарушить существующие.
✅ Уменьшение каскадирования: Использование уникальных имен классов для блоков и элементов сокращает вероятность конфликтов и неожиданного наследования стилей.
<div class="menu">
<div class="menu__item menu__item--active">Главная</div>
<div class="menu__item">Новости</div>
</div>
В этом примере
menu является блоком, menu__item — элементом этого блока, а menu__item--active — модификатором элемента, указывающим на его активное состояние.Методология BEM предлагает систематический подход к структурированию классов CSS и HTML-разметки, который помогает создавать масштабируемые и легко поддерживаемые веб-проекты. Это достигается за счет разделения интерфейса на независимые блоки, что упрощает разработку, отладку и тестирование веб-приложений.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🧩 Идущий | 🔐 Собесы | 🔐 Тестовые