Введение в БЭМ

Именование классов в CSS всегда было трудным для меня ». К счастью, несколько месяцев назад я наткнулся на соглашение об именах БЭМ. Соглашение об именах - это согласованный стиль именования вещей (в данном случае CSS). Существуют различные соглашения об именах CSS, такие как SMACSS, AMCSS, БЭМ и т. Д. Однако в этой статье я буду говорить о БЭМ.

Предварительные требования

• Базовые знания HTML и CSS.

Что такое БЭМ

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

Зачем нужен БЭМ

• БЭМ помогает нам писать CSS, который легко читать и поддерживать.
• В больших проектах БЭМ гарантирует отсутствие конфликтующих стилей.
• Он передает функцию и цель кода CSS.
• Это помогает разработчикам лучше понять взаимосвязь между HTML и CSS в данном проекте.

БЭМ помогает нам писать CSS, который легко читать и поддерживать.

• В больших проектах БЭМ гарантирует отсутствие конфликтующих стилей.
• Он передает функцию и цель кода CSS.
• Это помогает разработчикам лучше понять взаимосвязь между HTML и CSS в данном проекте.

Как использовать БЭМ
Теперь, когда мы знаем, что такое БЭМ и почему мы должны его использовать, самое время погрузиться в то, как это сделать. Родительские компоненты названы с помощью одного дефиса, как показано в примере ниже.

<section class=”about-us”>

Имена классов элементов, с другой стороны, получаются путем добавления двух знаков подчеркивания (__), за которыми следует имя элемента, например,

<h3 class=”about-us__title”>best title </h3>
<p class=”about-us__text”>I love bunnies</p>

при именовании модификаторов мы используем два дефиса (-), за которыми следует имя элемента

<span class=”about-us__title — green”>ever</span>

Собирая все вместе, мы получаем:

<section class=”about-us”>
 <h3 class=”about-us__title”>best title
 <span class=”about-us__title — green”>ever</span>
 </h3>
 <p class=”about-us__text”>I love bunnies</p>
</div>

мы могли бы стилизовать это так

.about-us{
 margin: 0 auto;
 color: #fff;
}
.about-us__title {
 font-weight: bold;
}
.about-us__title — green {
 color: #05b993;
}
.about-us__text {
 font-size: 24px;
}

Scss упрощает стилизацию БЭМ. Стилизация этого с помощью SCSS будет выглядеть так

.about-us{
 margin: 0 auto;
 color: #fff;
 &__title {
 font-weight: bold;
 & — green {
 color: #05b993;
 }
 }
 &__text {
 font-size: 24px;
 }
}

Довольно круто, правда?

Заключение
Действительно, БЭМ дает нашему CSS прочную структуру, которую легче понять. Вы можете не получить его прямо сейчас, но я уверен, что со временем вы получите. Получайте удовольствие от именования с БЭМ.