C'n'C #27 - Front-end Руслан Хомяк Front-end розробник в компанії stfalcon.com.

1. CSS по БЕМ
Руслан Хомяк,
1

2. CSS до БЕМ
#header div span a {...}
.content .container div span p {...}
.wrapper form .line input {...}
div.footer.black ul li span {...}
.main-content div div a {...}
footer div > div p a.button {...}
01.
02.
03.
04.
05.
06.
2

3. 3

4. БЕМ (Блок, Елемент, Модифікатор) — методологія, яка забезпечує
компонентний підхід до веб-розробки. В її основі лежить принцип розділу
інтерфейсу на незалежні блоки. Це дозволяє легко і швидко розробляти
інтерфейси будь-якої складності і повторно використовувати існуючий
код.
4

5. Блок
Логічно і функціонально абсолютно незалежний компонент сторінки, який
є самодостатнім і може бути використаний в будь-якому місці проекту,
при цьому не втрачаючи свого смислу.
5

6. Особливості блоку
1. Назва повинна характерезувати смисл блоку, а не його стан.
2. Блок не повинен впливати на своє оточення (відступи, позиціонування).
6

7. Приклад блоку
<!-- Правильно. Семантично осмислений блок 'logo'-->
<div class="logo"></div>
<!-- Неправильно. Описано зовнішній вигляд -->
<div class="top-big-logo"></div>
7

8. Принцип роботи з блоками
Вкладеність
1. Блоки можна вкладати один в одного.
2. Дозволяється будь-яка вкладеність блоків.
8

9. <header class="header">
<nav class="menu">
</nav>
</header>
HTML реалізація блоків
<div class="logo"></div>
<ul class="submenu"></ul>
<div class="search"></div>
01.
02.
03.
04.
05.
06.
07.
9

10. CSS реалізація блоків
<!-- Правильно. Всі блоки абсолютно незалежні. Можуть бути використані у
будь-якому місці проекту.-->
.header {...}
.logo {...}
.menu {...}
.submenu {...}
.search {...}
01.
02.
03.
04.
05.
10

11. CSS реалізація блоків
<!-- Неправильно. Блоки залежні від своїх батьків і не можуть бути
використаними без них.-->
.header .logo {...}
.header .menu {...}
.header .menu .submenu {...}
.header .search {...}
01.
02.
03.
04.
11

12. Елемент
Частина блоку, яка зв'язана з ним по смислу і функціонально. Елемент не
може використовуватись без блоку до якого відноситься.
12

13. Особливості елементу
1. Назва повинна характерезувати смисл елементу, а не його стан.
2. Ім'я елементу відділяється від імені блоку двома підресленнями.
13

14. <div class="product">
</div>
Приклад елементів
<img class="product__picture">
<h4 class="product__name"></h4>
<span class="product__price"></span>
<button class="product__order"></button>
01.
02.
03.
04.
05.
06.
14

15. Принципи роботи з елементами
1. Вкладеність
2. Належність
3. Необов'язковість
15

16. Вкладеність елементів
1. Елементи можна вкладати один в одного.
2. Дозволяється будь-яка вкладеність елементів.
3. Елемент - це завжди частина блоку, тобто він не може бути частиною
іншого елементу.
16

17. <div class="product">
<div class="product__info">
</div>
<div class="product__action">
</div>
</div>
HTML реалізація елементів
<!-- Правильно. Структура назви елементів відповідає схемі: 'block-name__element-name'-->
<img class="product__picture">
<h4 class="product__name"></h4>
<span class="product__price"></span>
<a href="#" class="product__view"></a>
<button class="product__order"></button>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
17

18. CSS реалізація елементів
<!-- Правильно. Елементи знаходяться на одному рівні.-->
.product {...}
.product__picture {...}
.product__info {...}
.product__name {...}
.product__price {...}
.product__action {...}
.product__view {...}
.product__order {...}
Це дозволяє змінювати DOM-структуру без внесення змін в коді кожного окремого елементу.
01.
02.
03.
04.
05.
06.
07.
08.
18

19. CSS реалізація елементів
<!-- Неправильно. Присутній каскад для елементів.-->
.product {...}
.product__picture {...}
.product__info .product__name {...}
.product__info .product__price {...}
.product__action {...}
.product__action .product__view {...}
.product__action .product__order {...}
01.
02.
03.
04.
05.
06.
07.
19

20. <div class="product">
<div class="product__info">
</div>
<div class="product__action">
</div>
</div>
HTML реалізація елементів
<!-- Неправильно. Структура назви елементів не відповідає схемі: 'block-name__element-name'-->
<img class="product__picture">
<h4 class="product__info__name"></h4>
<span class="product__info__price"></span>
<a href="#" class="product__action__view"></a>
<button class="product__action__order"></button>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
20

21. <div class="product">
<div class="product__info">
</div>
<div class="product__action">
</div>
</div>
<!-- Неправильно. Структура назви елементів не відповідає схемі: 'block-name__element-name'-->
<img class="product__picture">
<h4 class="product__info__name"></h4>
<span class="product__info__description"></span>
<span class="product__info__price">
<span class="product__info__price__old"></span>
<span class="product__info__price__new"></span>
</span>
<a href="#" class="product__action__view"></a>
<button class="product__action__order"></button>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
21

22. Належність елементів
Елемент - це завжди частина блоку, він не повинен використовуватись
окремо від нього.
22

23. <div class="product">
</div>
HTML реалізація
<!-- Правильно. Елементи лежать всередині блоку 'product'.-->
<img class="product__picture">
<h4 class="product__name"></h4>
<span class="product__price"></span>
<button class="product__order"></button>
01.
02.
03.
04.
05.
06.
23

24. <div class="product">
</div>
HTML реалізація
<!-- Неправильно. Елементи лежать поза блоком 'product'.-->
<span class="product__price"></span>
<button class="product__order"></button>
<img class="product__picture">
<h4 class="product__name"></h4>
01.
02.
03.
04.
05.
06.
24

25. <footer class="footer">
</div>
Необов'язковість елементів
Елемент - необов'язкова частина блоку. Не у всіх блоків, повинні бути
елементи.
Наприклад:
<nav class="menu"></nav>
<ul class="social"></ul>
01.
02.
03.
04.
25

26. Це блок чи елемент?
26

27. <div class="product">
</div>
Можна легко змінити елемент на блок або
навпаки
<img class="illustration product__picture">
<h4 class="product__name"></h4>
<span class="product__price"></span>
<button class="product__order"></button>
01.
02.
03.
04.
05.
06.
27

28. Модифікатор
Сутність, яка визначає зовнішній вигляд, стан або поведінку блоку чи
елементу і не може бути викорстана окремо від них. Модифікатор має ім'я
і може мати значення. У блоку або елементу, може бути декілька
модифікаторів одночасно.
28

29. Особливості модифікаторів
1. Назва повинна характерезувати зовнішній вигляд, стан, або поведінку.
2. Ім'я модифікатора відділяється від імені блоку чи елементу одним
підкресленням.
29

30. Типи модифікаторів
1. Булевий
2. Ключ-значення
<!-- Блок 'button' має булевий модифікатор 'disabled'-->
<button class="button button_disabled"></button>
<!-- Блок 'button' має модифікатор 'size' зі значенням 's'-->
<button class="button button_size_s"></button>
30

31. Префікси
1. b- (block) - для позначення звичайного блоку.
2. h- (holster) - для задавання відступів групі блоків.
3. l- (layout) - для розташування інших блоків.
4. g- (global) - для глобальних модифікаторів.
5. js- (JavaScript) - для блоків, які використовують JavaScript.
6. ...
<!-- Приклад використання префіксів -->
<div class="b-button"></div>
<div class="g-clearfix"></div>
З розвитком БЕМ, Яндекс відмовився від префіксів.
31

32. Мікс
Це прийом, який дозволяє використовувати різні БЕМ-сутності на одному
DOM-вузлі.
32

33. Мікси дозволяють
1. Поєднувати поведінку і стилі декількох сутностей без дублювання коду.
2. Створювати семантично нові компоненти інтерфейсу на основі тих, які вже
є.
33

34. header__logo
header__menu
header__search
HTML реалізація міксів
<header class="header">
<div class="logo "></div>
<nav class="menu ">
<ul class="submenu"></ul>
</nav>
<div class="search "></div>
</header>
01.
02.
03.
04.
05.
06.
07.
34

35. CSS реалізація міксів
.header {...}
.header__logo {зовнішня геометрія, позиціювання}
.header__menu {зовнішня геометрія, позиціювання}
.header__search {зовнішня геометрія, позиціювання}
.logo {...}
.menu {...}
.submenu {...}
.search {...}
01.
02.
03.
04.
05.
06.
07.
08.
35

36. БЕМ і препроцесори
.product {
&__picture {...}
&__info {...}
&__name {...}
&__price {...}
&__action {...}
&__view {...}
&__order {...}
}
36

37. БЕМ і CSS-каскад
Основний принцип БЕМ — незалежні блоки. Вкладені селектори
збільшують зв'язаність коду і роблять його повторне використання
неможливим. Каскад не забороняється, але не рекомендується.
37

38. Наприклад, можна використати вкладеність для зміни теми елементів блоку:
.nav {...}
.nav_theme_light .nav__item {'зміна теми пунктів меню'}
.nav__item {...}
або коли потрібно вивести тест з WYSIWYG:
.text h2 {...}
.text p {...}
.text ul li {...}
38

39. Які переваги надає БЕМ
• Незалежні блоки
• Семантика
• Відсутність колізій
• Структурованість коду
• Масштабування
• Зменшується час на розробку та підтримку проекту
• Поріг входу на проект мінімальний
39

40. Як перейти на CSS по БЕМ
• Не використовувати id та теги для селекторів
• Абстрагуватись від DOM-моделі і навчитись створювати блоки
• Мінімізувати кількість вкладених селекторів
• Використовувати правила по іменуванню CSS-класів
• Використовувати мікси
• Повторно використовувати блоки
40

41. Чому не можна використовувати теги або тег
і клас для селекторів
<a class="button button_active"></a>
a.button {...}
a.button_active {...}
З розвитком проекту можуть з'явитись блоки input.button, span.button,
button.button
41

42. 42

43. https://ru.bem.info/
43

44. Дякую за увагу
44