Articles
Введение в CSS
CSS и BEM

CSS и BEM

Эта статья объясняет CSS и BEM.

YouTube Video

HTML для предварительного просмотра

css-bem.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>BEM Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-bem.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS &amp; BEM(Block Element Modifier)</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>BEM Example</h2>
20        </header>
21        <article>
22            <h3>BEM HTML Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25<pre class="sample">
26&lt;div class=&quot;button button--primary&quot;&gt;
27    &lt;span class=&quot;button__text&quot;&gt;Click Me&lt;/span&gt;
28&lt;/div&gt;
29</pre>
30            </section>
31        </article>
32        <article>
33            <h3>BEM Example</h3>
34            <section>
35                <header><h4>HTML</h4></header>
36<pre class="sample">
37&lt;header class=&quot;header&quot;&gt;
38    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
39    &lt;nav class=&quot;header__nav&quot;&gt;
40        &lt;ul class=&quot;header__menu&quot;&gt;
41            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
42            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
43            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
44        &lt;/ul&gt;
45    &lt;/nav&gt;
46&lt;/header&gt;
47</pre>
48            </section>
49            <header><h4>HTML+CSS</h4></header>
50            <section class="sample-view">
51                <header class="header">
52                    <div class="header__logo">My Logo</div>
53                    <nav class="header__nav">
54                        <ul class="header__menu">
55                            <li class="header__menu-item header__menu-item--active">Home</li>
56                            <li class="header__menu-item">About</li>
57                            <li class="header__menu-item">Contact</li>
58                        </ul>
59                    </nav>
60                </header>
61            </section>
62        </article>
63        <article>
64            <h3>BEM Example</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67<pre class="sample">
68&lt;header class=&quot;header&quot;&gt;
69    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
70    &lt;nav class=&quot;header__nav&quot;&gt;
71        &lt;ul class=&quot;header__menu&quot;&gt;
72            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
73            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
74            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
75            &lt;li class=&quot;header__menu-item header__menu-item--disabled&quot;&gt;Disabled&lt;/li&gt;
76        &lt;/ul&gt;
77    &lt;/nav&gt;
78&lt;/header&gt;
79</pre>
80            </section>
81            <header><h4>HTML+CSS</h4></header>
82            <section class="sample-view">
83                <header class="header">
84                    <div class="header__logo">My Logo</div>
85                    <nav class="header__nav">
86                        <ul class="header__menu">
87                            <li class="header__menu-item header__menu-item--active">Home</li>
88                            <li class="header__menu-item">About</li>
89                            <li class="header__menu-item">Contact</li>
90                            <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91                        </ul>
92                    </nav>
93                </header>
94            </section>
95        </article>
96    </main>
97</body>
98</html>

CSS и BEM: Подход для эффективного управления стилями

CSS — это основной язык, используемый для определения внешнего вида веб-сайта. Однако эффективное управление CSS может быть сложным, особенно для крупных проектов. BEM (Block Element Modifier) — это соглашение по неймингу CSS, разработанное для решения этих проблем и улучшения повторного использования и поддержки.

Проблемы с CSS и необходимость BEM

Проблемы с CSS включают следующие трудности:.

  1. Конфликт глобального пространства имен: В CSS имена классов глобальны, что создает риск конфликта между различными компонентами.
  2. Чрезмерное использование сложных селекторов: Слишком сложные селекторы потомков или ID увеличивают специфичность, усложняя будущие изменения.
  3. Снижение повторного использования: Специфические стили становится сложнее использовать в других компонентах.

BEM был разработан для решения этих проблем.

Основные концепции BEM

BEM состоит из трех основных элементов:.

  1. Блок: Независимый компонент со своим собственным значением.
  2. Элемент: Часть блока, логически связанная с ним.
  3. Модификатор: Изменяет внешний вид или поведение блока или элемента.

Соглашения наименования BEM следуют следующему формату:.

.block__element--modifier
  • block: Имя компонента блока.
  • element: Элемент, который является частью блока.
  • modifier: Представляет определенное состояние или вариацию стиля.

Практический пример

Ниже приведен простой пример.

1<div class="button button--primary">
2  <span class="button__text">Click Me</span>
3</div>
  • button - это блок.
  • button__text - это элемент.
  • button--primary - это модификатор.

Преимущества BEM

Ниже приведены преимущества BEM.

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

Создание проекта с использованием BEM

Создание HTML

Вот пример HTML с использованием BEM.

 1<header class="header">
 2  <div class="header__logo">My Logo</div>
 3  <nav class="header__nav">
 4    <ul class="header__menu">
 5      <li class="header__menu-item header__menu-item--active">Home</li>
 6      <li class="header__menu-item">About</li>
 7      <li class="header__menu-item">Contact</li>
 8    </ul>
 9  </nav>
10</header>

Создание CSS

Напишите соответствующий CSS для HTML следующим образом.

 1.header {
 2  background-color: #333;
 3  color: #fff;
 4  padding: 10px;
 5}
 6
 7.header__logo {
 8  font-size: 24px;
 9}
10
11.header__nav {
12  display: flex;
13  justify-content: space-around;
14}
15
16.header__menu {
17  list-style: none;
18  margin: 0;
19  padding: 0;
20  display: flex;
21}
22
23.header__menu-item {
24  margin: 0 10px;
25  padding: 5px 10px;
26}
27
28.header__menu-item--active {
29  font-weight: bold;
30  border-bottom: 2px solid #fff;
31}
  • Этот CSS определяет модульные стили с использованием соглашения BEM (Block Element Modifier) для повышения повторного использования и поддерживаемости.

Расширение стилей

Давайте посмотрим, как добавить новый модификатор, чтобы сделать определённый пункт меню неактивным.

Соответствующий HTML будет выглядеть следующим образом.

1<li class="header__menu-item header__menu-item--disabled">Disabled</li>
1.header__menu-item--disabled {
2  opacity: 0.5;
3  pointer-events: none;
4}
  • Этот CSS определяет модификатор, который визуально затемняет неактивные элементы меню и отключает взаимодействие по клику.

Часто задаваемые вопросы

При использовании BEM следует помнить о следующих моментах.

Вопрос 1: Обязательно ли строго придерживаться правил именования BEM?

Не обязательно строго соблюдать правила именования BEM, но важно сохранять последовательность. Установите единые правила в рамках проекта и убедитесь, что вся команда их придерживается.

Вопрос 2: Не делает ли использование BEM CSS более многословным?

Введение BEM может привести к более длинным именам классов CSS, но это делает роли компонентов более понятными. В результате улучшается поддерживаемость, и преимущества перевешивают избыточность.

Вопрос 3: Можно ли использовать BEM вместе с другими CSS-фреймворками?

BEM может использоваться вместе с другими CSS-фреймворками. Например, даже при использовании Tailwind CSS или Bootstrap, вы можете применять BEM к пользовательским компонентам.

Заключение

BEM предоставляет чёткое соглашение об именовании для модульности и облегчения управления CSS. Используя этот метод, вы можете предотвратить конфликты стилей и значительно повысить поддерживаемость и повторное использование. Разработка подходящих соглашений об именовании способствует повышению качества и производительности проекта.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

`aspect-ratio` Свойство и адаптивный дизайн