css по БЕМ

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

1

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

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

є самодостатнім і може бути використаний в будь-якому місці проекту,

при цьому не втрачаючи свого смислу.

5

Особливості блоку1. Назва повинна характерезувати смисл блоку, а не його стан.

2. Блок не повинен впливати на своє оточення (відступи, позиціонування).

6

Приклад блоку

<div class="logo"></div>



<div class="top-big-logo"></div>

7

Принцип роботи з блоками

Вкладеність

1. Блоки можна вкладати один в одного.

2. Дозволяється будь-яка вкладеність блоків.

8

<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

CSS реалізація блоків

.header {...}

.logo {...}

.menu {...}

.submenu {...}

.search {...}

01.

02.

03.

04.

05.

10

CSS реалізація блоків

.header .logo {...}

.header .menu {...}

.header .menu .submenu {...}

.header .search {...}

01.

02.

03.

04.

11

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

може використовуватись без блоку до якого відноситься.

12

Особливості елементу1. Назва повинна характерезувати смисл елементу, а не його стан.

2. Ім'я елементу відділяється від імені блоку двома підресленнями.

13

<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

Принципи роботи з елементами1. Вкладеність

2. Належність

3. Необов'язковість

15

Вкладеність елементів1. Елементи можна вкладати один в одного.

2. Дозволяється будь-яка вкладеність елементів.

3. Елемент - це завжди частина блоку, тобто він не може бути частиною

іншого елементу.

16

<div class="product__info">

</div>

<div class="product__action">

</div>

</div>

HTML реалізація елементів




<a href="#" class="product__view"></a>


01.

02.

03.

04.

05.

06.

07.

08.

09.

10.

11.

17

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

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

</div>


</div>

</div>

HTML реалізація елементів


<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

</div>


</div>

</div>




<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

</div>

HTML реалізація





01.

02.

03.

04.

05.

06.

23

</div>

HTML реалізація





01.

02.

03.

04.

05.

06.

24

<footer class="footer">

</div>

Необов'язковість елементівЕлемент - необов'язкова частина блоку. Не у всіх блоків, повинні бути

елементи.

Наприклад:

<nav class="menu"></nav>

<ul class="social"></ul>

01.

02.

03.

04.

25

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

26


</div>

Можна легко змінити елемент на блок абонавпаки

<img class="illustration product__picture">




01.

02.

03.

04.

05.

06.

27

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

елементу і не може бути викорстана окремо від них. Модифікатор має ім'я

і може мати значення. У блоку або елементу, може бути декілька

модифікаторів одночасно.

28

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

2. Ім'я модифікатора відділяється від імені блоку чи елементу одним

підкресленням.

29

Типи модифікаторів1. Булевий

2. Ключ-значення



<button class="button button_disabled"></button>



<button class="button button_size_s"></button>

30

Префікси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

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

DOM-вузлі.

32

Мікси дозволяють1. Поєднувати поведінку і стилі декількох сутностей без дублювання коду.

2. Створювати семантично нові компоненти інтерфейсу на основі тих, які вже

є.

33

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

CSS реалізація міксів.header {...}

.header__logo {зовнішня геометрія, позиціювання}

.header__menu {зовнішня геометрія, позиціювання}

.header__search {зовнішня геометрія, позиціювання}

.logo {...}

.menu {...}

.submenu {...}

.search {...}

01.

02.

03.

04.

05.

06.

07.

08.

35

БЕМ і препроцесори.product {

&__picture {...}

&__info {...}

&__name {...}

&__price {...}

&__action {...}

&__view {...}

&__order {...}

}

36

БЕМ і CSS-каскадОсновний принцип БЕМ — незалежні блоки. Вкладені селектори

збільшують зв'язаність коду і роблять його повторне використання

неможливим. Каскад не забороняється, але не рекомендується.

37

Наприклад, можна використати вкладеність для зміни теми елементів блоку:

.nav {...}

.nav_theme_light .nav__item {'зміна теми пунктів меню'}

.nav__item {...}

або коли потрібно вивести тест з WYSIWYG:

.text h2 {...}

.text p {...}

.text ul li {...}

38

Які переваги надає БЕМ• Незалежні блоки

• Семантика

• Відсутність колізій

• Структурованість коду

• Масштабування

• Зменшується час на розробку та підтримку проекту

• Поріг входу на проект мінімальний

39

Як перейти на CSS по БЕМ• Не використовувати id та теги для селекторів

• Абстрагуватись від DOM-моделі і навчитись створювати блоки

• Мінімізувати кількість вкладених селекторів

• Використовувати правила по іменуванню CSS-класів

• Використовувати мікси

• Повторно використовувати блоки

40

Чому не можна використовувати теги або тегі клас для селекторів<a class="button button_active"></a>

a.button {...}

a.button_active {...}

З розвитком проекту можуть з'явитись блоки input.button, span.button,

button.button

41

https://ru.bem.info/

43

https://ru.bem.info/

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

44

css по БЕМ

Education