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
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
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
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
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
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