CSS BEM-модель — руководство по написанию масштабируемого и поддерживаемого CSS

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

1. Что такое БЭМ?

БЭМ означает:

• Блок: отдельный объект, имеющий самостоятельный смысл, например кнопка, меню или форма.
• Элемент: часть блока, выполняющая определенную функцию, например надпись кнопки или пункт меню.
• Модификатор: вариант или состояние блока или элемента, например отключенная кнопка или выделенный пункт меню.

Методология БЭМ делает упор на создание многоразового, предсказуемого и поддерживаемого CSS-кода.

Соглашение об именах BEM:

.block {}
.block__element {}
.block--modifier {}

• Блок: представляет основной контейнер.
• Элемент: следует за именем блока, разделенным двойным подчеркиванием (__).
• Модификатор: следует за именем блока или элемента, разделенным двойным дефисом (--).

2. Определение структуры

Давайте разберем структуру БЭМ на примере.

Пример:

    
Home
        
About
        
Contact
    

В этом примере:

• Блок: .menu — это основной блок, представляющий меню навигации.
• Элемент: .menu__list и .menu__item являются элементами внутри блока.
• Модификатор: .menu__item--active — модификатор, указывающий активное состояние пункта меню.

3. Блоки в БЭМ

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

Пример:

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

Здесь .button — это блок, определяющий стили компонента кнопки. Вы можете повторно использовать этот блок в нескольких частях вашего сайта.

4. Элементы в БЭМ

Элемент  — это часть блока, не имеющая отдельного значения. Он привязан к блоку и существует для выполнения функции, связанной с блоком.

Пример:

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

Здесь:

• .button__icon — это элемент в блоке .button, представляющий значок на кнопке.
• .button__label — еще один элемент, представляющий текстовую метку кнопки.

5. Модификаторы в БЭМ

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

Пример:

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

Здесь:

• .button--primary — это модификатор, который меняет цвет фона кнопки.
• .button--large — еще один модификатор, увеличивающий размер кнопки.

Модификаторы также можно применять к элементам:

.button__icon--small {
    width: 10px;
    height: 10px;
}

6. Преимущества использования БЭМ

• Масштабируемость: BEM спроектирован так, чтобы быть масштабируемым, что делает его идеальным для более крупных проектов с множеством компонентов.
• Повторное использование: блоки автономны и могут повторно использоваться в разных частях проекта.
• Удобство сопровождения: BEM поощряет четкое и последовательное именование, что упрощает поддержку CSS по мере роста проекта.
• Предсказуемость: вы можете легко определить, какие элементы каким блокам принадлежат, и понять их вариации на основе модификатора.

7. БЭМ в действии

Давайте рассмотрим более полный пример, включающий блоки, элементы и модификаторы:

HTML:

    

        
Card Title
    
    

        
This is a simple card component.
    
    

        Read More
    

CSS:

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

В этом примере:

• .card — это блок, представляющий весь компонент карты.
• .card__header, .card__title, .card__body и .card__footer — это элементы внутри блока карты.
• .card__button--primary — это модификатор, который применяет основной стиль к кнопке внутри карточки.

8. Распространенные ошибки, которых следует избегать в БЭМ

• Слишком много вложенных элементов: избегайте глубоко вложенных элементов, так как это может привести к излишне длинным именам классов.
• Ненужные модификаторы: используйте модификаторы только тогда, когда вам нужно изменить внешний вид или состояние блока или элемента.
• Сочетание BEM с другими соглашениями об именах: для обеспечения единообразия в проекте придерживайтесь BEM.

Заключение

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

Следуйте за мной в LinkedIn

Ридой Хасан