Верстка по БЭМ

@AlexZaw · Регистрация: 07.08.2016

Студворк — интернет-сервис помощи студентам

Доброго времени суток всем!
Долго ли коротко, решил изучить верстку по БЭМ, в теории я понимаю как нужно называть классы, но на практике понимаю что пишу какую-то дичь. Подскажите как бы вы именовали классы в следующем коде:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<div class="cart header__cart" id="cart">
  <i class="fas fa-shopping-cart"></i>
  <div class="cart__count">
    <span class="cart__count-value">0</span>
  </div>
  <div class="cart-dropdown">
    <div class="cart-dropdown__items">
      <div class="cart-dropdown__item">
        <a href="#" class="cart-dropdown__product-image">
          <img src="img/products/Layer_43.jpg" alt="product image">
        </a>
        <div class="cart-dropdown__product-info">
          <h6 class="cart-dropdown__product-title">Rebox Zane</h6>
          <div class="cart-dropdown__product-rating">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="cart-dropdown__product-count-and-price">
            <span class="cart-dropdown__product-count" data-count="1">1</span> x
            <span class="cart-dropdown__product-currency">$</span>
            <span class="cart-dropdown__product-price" data-product-price="250">250</span>
          </div>
        </div>
        <div class="cart-dropdown__product-delete">
          <i class="fas fa-times-circle"></i>
        </div>
      </div>
      <!-- /.cart-dropdown__item -->
      <div class="cart-dropdown__item">
        <a href="#" class="cart-dropdown__product-image">
          <img src="img/products/Layer_44.jpg" alt="product image">
        </a>
        <div class="cart-dropdown__product-info">
          <h6 class="cart-dropdown__product-title">Rebox Zane</h6>
          <div class="cart-dropdown__product-rating">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="cart-dropdown__product-count-and-price">
            <span class="cart-dropdown__product-count" data-count="1">1</span> x
            <span class="cart-dropdown__product-currency">$</span>
            <span class="cart-dropdown__product-price" data-product-price="250">250</span>
          </div>
        </div>
        <div class="cart-dropdown__product-delete">
          <i class="fas fa-times-circle"></i>
        </div>
      </div>
      <!-- /.cart-dropdown__item -->
    </div>
    <!-- /.cart-dropdown__items -->
    <div class="cart-dropdown__interface">
      <div class="cart-dropdown__price-info">
        <div class="cart-dropdown__price-text">
          Total
        </div>
        <div class="cart-dropdown__price-total">
          <span class="cart-dropdown__price-currency">$</span>
          <span class="cart-dropdown__price-value" data-total-price="500">500</span>
        </div>
      </div>
      <div class="cart-dropdown__buttons">
        <a href="#" class="cart-dropdown__btn cart-dropdown__btn-red">Checkout</a>
        <a href="#" class="cart-dropdown__btn">Go to cart</a>
      </div>
    </div>
    <!-- /.cart-dropdown__interface -->
  </div>
  <!-- /.cart-dropdown -->
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
.cart {
  position: relative;
  cursor: pointer;
  align-self: flex-end;
  display: inline-block;
}
 
.header__cart {
  margin-right: 26px;
}
 
.header__cart .fa-shopping-cart {
  font-size: 30px;
}
 
.cart .cart__count {
  position: absolute;
  top: -10px;
  right: -10px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  width: 19px;
  height: 19px;
  text-align: center;
  border-radius: 50%;
  background-color: #f16d7f;
}
 
.cart .cart__count-value {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
 
.cart-dropdown {
  padding: 25px 15px;
  border-radius: 5px;
  min-width: 270px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
  position: absolute;
  z-index: 1;
}
 
.cart-dropdown__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #ededed;
}
 
.cart-dropdown__item:not(:first-child) {
  padding-top: 15px;
}
 
.cart-dropdown__product-image {
  width: 72px;
  height: 85px;
}
 
.cart-dropdown__product-title {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 10px;
}
 
.cart-dropdown__product-info {
  margin-left: 15px;
}
 
.cart-dropdown__product-rating {
  color: #e4af48;
  font-size: 12px;
  margin-bottom: 10px;
}
 
.cart-dropdown__product-count-and-price {
  color: #f16d7f;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
 
.cart-dropdown__product-delete {
  height: 15px;
  width: 15px;
  color: #c0c0c0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}
 
.cart-dropdown__interface {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 20px;
}
 
.cart-dropdown__price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
 
.cart-dropdown__buttons {
  margin-top: 30px;
}
 
.cart-dropdown__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4a4a4a;
  border: 1px solid #eaeaea;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 20px 0;
  margin-top: 10px;
}
 
.cart-dropdown__btn-red {
  color: #f16d7f;
  border-color: #f16d7f;
}

подключение font awesome:

HTML5
1
<script src="https://kit.fontawesome.com/761bd8c251.js"></script>

Нужна только разметка с классами по БЭМ, ибо понимаю что у меня классы имеют слишком громоздкие названия
Картинка с макета:

@Tamre · 18.08.2019, 10:35

Имею небольшой опыт в БЭМ. Скажу сразу использую оттуда только (css БЭМ) потому-что все остальное мне не пригодилось.
Правда заключается в том что все используют БЭМ по разному. Но имея длительный опыт с БЭМОМ скажу чем проще пишите тем лучше. Модификаторы почти не использую. Цифры 1,2,3 и.т.д указываю в элементах, а не модификаторах. Вот мои примеры.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<ul class="nav">
    <li>
        <a class="nav__link nav__link_active" href="/">Home</a>
    </li>
    <li>
        <a class="nav__link" href="#">About</a>
    </li>
    <li>
        <a class="nav__link" href="#">Products</a>
    </li>
    <li>
        <a class="nav__link" href="#">Prices</a>
    </li>
    <li>
        <a class="nav__link" href="#">Gallery</a>
        <ul class="sub-nav">
            <li><a href="#" class="sub-nav__link">Topic</a></li>
            <li><a href="#" class="sub-nav__link">Bob</a></li>
            <li><a href="#" class="sub-nav__link">Flat</a></li>
        </ul>
    </li>
    <li>
        <a class="nav__link" href="#">FAQ´S</a>
    </li>
    <li>
        <a class="nav__link" href="#">Testimonials</a>
    </li>
    <li>
        <a class="nav__link" href="#">App</a>
    </li>
    <li>
        <a class="nav__link" href="#">
            <i class="far fa-edit"></i>
        </a>
    </li>
</ul>
 
<button class="toggler">
    <span class="toggler__line-1"></span>
    <span class="toggler__line-2"></span>
    <span class="toggler__line-3"></span>
</button>

В примере с тогглером, чтобы обратится к всем линиям использую селектор [class^="toggler__line"]

Добавлено через 9 минут
Что насчет именования лучше указывать имена полностью, а сокращения использовать только распространенные(img, nav и.т.д). Иначе через неделю сами не узнаете свою верстку.

@shvyrevvg · 18.08.2019, 10:37

Сообщение от AlexZaw

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

AlexZaw, а это нормально.

Сообщение от AlexZaw

ибо понимаю что у меня классы имеют слишком громоздкие названия

Очевидно, если проект чуть больше чем одностраничник с 1 секцией, то возможны пересечения имен блоков, остается либо использовать длинные имена cart-dropdown/cart-dropdown-product/etc., либо - модификаторы и каскады(которые БЭМ не рекомендует). Это все в теории и на детских примерах радужно.

@AlexZaw · 18.08.2019, 10:48 **[ТС]**

Сообщение от Tamre

Но имея длительный опыт с БЭМОМ скажу чем проще пишите тем лучше.

Это понятно, но вот как применить это на практике?

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

Сообщение от shvyrevvg

остается либо использовать длинные имена

Т.е. в моем случае это еще нормально?

@Tamre · 18.08.2019, 11:01

Сообщение от AlexZaw

как быть с моим примером - ума не приложу

У вас все правильно написано только тирешек можно поменьше и слов в элементе. И не обязательно все именовать можно что-то пропустить если незнаете как назвать. А то что длинные названия это нормально тут ничего уже не сделаешь.

@shvyrevvg · 18.08.2019, 11:09

Сообщение от AlexZaw

Т.е. в моем случае это еще нормально?

AlexZaw, а почему нет? Ну можно попробовать разбить еще на блоки

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div class="cart header__cart" id="cart">
  <i class="fas fa-shopping-cart"></i>
  <div class="cart__count">
    <span class="cart__count-value">0</span>
  </div>
  <div class="dropdown cart__dropdown">
    <div class="dropdown__list">
      <div class="product/item-cart/cart-item/etc. dropdown__item ">
        <a href="#" class="product__image">
          <img src="img/products/Layer_43.jpg" alt="product image" />
        </a>
        <div class="product__info">
          <h6 class="product__title">Rebox Zane</h6>
          <div class="product__rating">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="product__count-and-price"><!-- тут можно имена получше придумать -->
            <span class="product__count" data-count="1">1</span> x
            <span class="product__currency">$</span>
            <span class="product__price" data-product-price="250">250</span>
          </div>
        </div>
        <div class="product__delete">
          <i class="fas fa-times-circle"></i>
        </div>
      </div>
    </div>
    <div class="cart__interface">
      <div class="cart__price-info">
        <div class="cart__price-text">
          Total
        </div>
        <div class="cart__price-total">
          <span class="cart__price-currency">$</span>
          <span class="cart__price-value" data-total-price="500">500</span>
        </div>
      </div>
      <div class="cart__buttons">
        <a href="#" class="cart__button cart__button--checkout/active/accent/etc.">Checkout</a>
        <a href="#" class="cart__button">Go to cart</a>
      </div>
    </div>
  </div>
</div>

@mrtoxas · 18.08.2019, 23:03

CSS
1
class="cart header__cart"

header__cart - думаю, тут лишним будет.

<a href="#" class="cart-dropdown__product-image"> это не product-image, это ссылка - product-link, мы же БЭМ для большего понимания кода используем.

Кнопки можно сделать без привязки к cart, и они будут нормально использоваться в другом месте. Если надо поменять какие-то их стили конкретно для карточки, тогда можно смело вложенностями: .cart__buttons > .button. А то, если возникнет потребность в таких же кнопках, только уже, например, в галерее, и там уже не очень будут смотреться cart-dropdown__btn. Это касается и крестика, и рейтинга. Их можно сделать независимыми компонентами.

Насчет длинных имен классов, если смущает, есть минификаторы, например - тыц, но я с ними не работал. А вот, если посмотреть код фейсбука, то видно, что имена классов минимизировали.

@AlexZaw · 18.08.2019, 23:55 **[ТС]**

Сообщение от mrtoxas

header__cart - думаю, тут лишним будет.

У этого класса прописан margin, в БЭМ ведь нельзя задавать внешнюю геометрию блокам. Или через вложенность тогда лучше сделать?

@mrtoxas · 19.08.2019, 00:08

Если у этого блока в хедере есть какие-то уникальные свойства, тогда можно через вложенность.

@Tamre · 19.08.2019, 08:45

Делить внешнюю геометрию и оформление плохая идея. Потому-что я так тоже начинал. То есть вы будете в 2 раза больше времени тратить(поверьте это так). По мне так БЭМ еще не доработан если честно. От него в данный момент нужно взять самое простое(это блоки и элементы и редко модификаторы). Все остальное только усложнит вашу жизнь. Если бы это все было автоматизировано и оно бы делило внешнюю геометрию и оформление вот это тогда имело бы смысл. Да разделение делает css код чуточку понятнее(структурированее), но тратить на это время я бы не советовал.

@AlexZaw · 19.08.2019, 14:26 **[ТС]**

Сообщение от Tamre

То есть вы будете в 2 раза больше времени тратить

В смысле в два раза больше времени. Допустим есть оформленный блок, без margin. Используется в разных местах сайта, но в разных местах имеет разные внешние отступы. В любом случае у этого блока придется менять внешнюю геометрию, хоть отделяй ее, хоть не отделяй, так почему будет тратиться больше времени?

@Tamre · 19.08.2019, 15:00

Возьму пример с БЭМА.

HTML5
1
2
3
<header class="header">
    <button class="button header__button">...</button>
</header>

CSS
1
2
3
4
5
6
7
8
9
.button {
    font-family: Arial, sans-serif;
    text-align: center;
    border: 1px solid black;    /* Рамка */
}
.header__button {
    margin: 30px;               /* Отступ */
    position: relative;
}

Теперь как бы я сделал:

HTML5
1
2
3
4
5
6
7
8
9
<header class="header">
    <button class="header__button">...</button>
</header>
 
<!-- или так -->
 
<header class="header">
    <button class="button">...</button>
</header>

CSS
1
2
3
4
5
6
7
.header__button {
    margin: 30px;               /* Отступ */
    position: relative;
    font-family: Arial, sans-serif;
    text-align: center;
    border: 1px solid black;    /* Рамка */
}

Вот что я имел ввиду.

@AlexZaw · 19.08.2019, 15:45 **[ТС]**

Сообщение от Tamre

Теперь как бы я сделал:

Теперь представим что точно такая же кнопка есть в другом месте сайта, но margin у нее не 30px, а допустим 10. Все равно ведь придется использовать дополнительный класс или вложенность для изменения margin. Так в чем тогда смысл?

@Tamre · 19.08.2019, 15:59

Сообщение от AlexZaw

Так в чем тогда смысл?

Ну да можно использовать дополнительный класс(модификатор тот же), а можно сделать проще.

HTML5
1
2
3
4
<div class="site">
  <button class="site__button-1"></button>
  <button class="site__button-2"></button>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
[class^="site__button"] {
   /* общие стили */
}
 
.site__button-1 {
  margin: 10px;
}
 
.site__button-2 {
  margin: 30px;
}

Вот такой вот я хитрец

@shvyrevvg · 19.08.2019, 17:23

Сообщение от Tamre

а можно сделать проще.

Tamre, ну это не сурьезно

Те же яйца - только в профиль.

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

Верстка по БЭМ

Решение

Решение

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	19.08.2019, 00:08
	Если у этого блока в хедере есть какие-то уникальные свойства, тогда можно через вложенность. 0

@Tamre 2 / 2 / 0 Регистрация: 06.10.2018 Сообщений: 34
	19.08.2019, 08:45
	Делить внешнюю геометрию и оформление плохая идея. Потому-что я так тоже начинал. То есть вы будете в 2 раза больше времени тратить(поверьте это так). По мне так БЭМ еще не доработан если честно. От него в данный момент нужно взять самое простое(это блоки и элементы и редко модификаторы). Все остальное только усложнит вашу жизнь. Если бы это все было автоматизировано и оно бы делило внешнюю геометрию и оформление вот это тогда имело бы смысл. Да разделение делает css код чуточку понятнее(структурированее), но тратить на это время я бы не советовал. 0