![Page 1: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/1.jpg)
Обозреватель
1
![Page 2: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/2.jpg)
Основные группы браузеров
2
![Page 3: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/3.jpg)
Архитектура браузера
3
![Page 4: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/4.jpg)
Жизненный цикл веб-страницы
4
![Page 5: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/5.jpg)
Networking
5
![Page 6: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/6.jpg)
Внутри браузера
6
![Page 7: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/7.jpg)
Внутри браузера: ввели адрес
7
![Page 8: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/8.jpg)
Внутри браузера: кэш
8
![Page 9: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/9.jpg)
Внутри браузера: кэш
9
![Page 10: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/10.jpg)
Внутри браузера: DNS
10
![Page 11: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/11.jpg)
Внутри браузера: получение IP
11
![Page 12: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/12.jpg)
Внутри браузера: запрос
12
![Page 13: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/13.jpg)
Внутри браузера: ответ
13
![Page 14: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/14.jpg)
Внутри браузера: снова кэш
14
![Page 15: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/15.jpg)
Внутри браузера: страница
15
![Page 16: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/16.jpg)
Путь одного запроса
16
![Page 17: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/17.jpg)
Путь одного запроса
17
![Page 18: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/18.jpg)
W3C resourse hints<link rel="dns-prefetch" href="//yandex.ru/">
<link rel="preconnect" href="https://yandex.ru/">
<link rel="prefetch" href="//api.maps.yandex.ru/">
<link rel="preload" href="libertad.woff2" as="font">
<link rel="prerender" href="//urfu.ru/">
https://w3c.github.io/resource-hints/18
![Page 20: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/20.jpg)
Браузерные движки
20
![Page 21: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/21.jpg)
EdgeHTML(ex. Trident)
Gecko Webkit
Blink(fork Webkit)
21
![Page 22: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/22.jpg)
22
![Page 23: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/23.jpg)
Анализ документа
23
![Page 24: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/24.jpg)
24
![Page 25: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/25.jpg)
HTML parsing tolerance («Щадящий» алгоритм)
25
![Page 26: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/26.jpg)
Неправильное использование тегов</br>
<br>
26
![Page 27: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/27.jpg)
Неправильное вкладывание тегов<a href="#"> <a href="#"> inner link </a>
outer link </a>
<a href="#"></a> <a href="#"> inner link </a>
outer link </a>
<a href="#"></a> <a href="#"> inner link </a> outer link
27
![Page 28: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/28.jpg)
Использование вложенных форм<form action="#a1"> outer form <form action="#a2"> inner form
</form> </form>
<form action="#a1"> outer form inner form
</form>
28
![Page 29: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/29.jpg)
CSS parsing
29
![Page 30: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/30.jpg)
CSSOMbody { font-size: 16px } p { font-weight: bold } span { color: red } p span { display: none } img { float: right }
30
![Page 31: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/31.jpg)
CSS error handling.foo { width: 10em height: 10em;
background: red; } .bar { width: 10bem; height: 10em; background: red; font: 10px Arial color red; .baz { width: 10em; 31
![Page 32: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/32.jpg)
CSS error handling.foo { width: 10em height: 10em;
background: red; } .bar { width: 10bem; height: 10em; background: red; font: 10px Arial color red; .baz { width: 10em; 32
![Page 33: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/33.jpg)
CSS error handling.foo { width: 10em height: 10em;
background: red; } .bar { width: 10bem; height: 10em; background: red; font: 10px Arial color red; .baz { width: 10em; 33
![Page 34: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/34.jpg)
CSS error handling.foo { width: 10em height: 10em;
background: red; } .bar { width: 10bem; height: 10em; background: red; font: 10px Arial color red; .baz { width: 10em; 34
![Page 35: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/35.jpg)
CSS error handling.foo { width: 10em height: 10em;
background: red; } .bar { width: 10bem; height: 10em; background: red; font: 10px Arial color red; .baz { width: 10em; 35
![Page 36: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/36.jpg)
36
![Page 38: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/38.jpg)
Render Tree
38
![Page 39: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/39.jpg)
39
![Page 40: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/40.jpg)
40
![Page 41: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/41.jpg)
41
![Page 42: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/42.jpg)
42
![Page 43: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/43.jpg)
DOM → Render Tree
Получается при складывании DOM и CSSOM
Не все блоки из DOM попадают в Render Tree
На один DOM-блок может создаваться несколькоблоков в Render Tree
CSS так же оказывает влияние на Render Tree (::a�er,::before)
43
![Page 44: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/44.jpg)
Как применяется CSS?
44
![Page 45: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/45.jpg)
1456
45
![Page 46: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/46.jpg)
Как применяется CSS?.section .select .value a { padding-right: 30px }
46
![Page 47: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/47.jpg)
Как применяется CSS?.section .select .value a /* 1456 -> found 11 */
47
![Page 48: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/48.jpg)
Как применяется CSS?.section .select .value a /* 1456 -> found 11 */
/* 1245 -> found 2 */
48
![Page 49: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/49.jpg)
Как применяется CSS?.section .select .value a /* 1456 -> found 11 */
/* 1245 -> found 2 */ /* 90 -> found 2 */
49
![Page 50: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/50.jpg)
Как применяется CSS?.section .select .value a /* 1456 -> found 11 */
/* 1245 -> found 2 */ /* 90 -> found 2 */ /* 2 -> found 2 */ /* total: 2688 lookups */
50
![Page 51: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/51.jpg)
Как применяется CSS?.section .select .value a /* 1456 -> found 327 */
51
![Page 52: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/52.jpg)
Как применяется CSS?.section .select .value a
/* 1456 -> found 327 */ /* 327 * 6 = 1962 -> found 2 */
52
![Page 53: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/53.jpg)
Как применяется CSS?.section .select .value a /* 1456 -> found 327 */
/* 327 * 6 = 1962 -> found 2 */ /* 2 * 6 = 12 -> found 2 */
53
![Page 54: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/54.jpg)
Как применяется CSS?.section .select .value a /* 1456 -> found 327 */
/* 327 * 6 = 1962 -> found 2 */ /* 2 * 6 = 12 -> found 2 */ /* 2 * 5 = 10 -> found 2 */ /* total: 3335 lookups > 2682 */
54
![Page 55: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/55.jpg)
Медленно
55
![Page 56: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/56.jpg)
Как применять CSS эффективно?.section .select .value a .category-value
/* 1456 vs 3335 */
56
![Page 57: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/57.jpg)
Методологии именования классов иорганизации разметки
(Яндекс)
(Youtube)
(Одноклассники)
(Yahoo, + Amazon (свой аналог))
(±Wikipedia)
БЭМ
OOCSS
MCSS
SMACSS
ACSS
Axiomatic CSS57
![Page 58: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/58.jpg)
BEM
Блок
Элемент
Модификатор
58
![Page 59: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/59.jpg)
BEM
Блок - Функционально независимый компонент страницы,который может быть повторно использован.
Название блока характеризует смысл, а не состояние
Блок не должен влиять на свое окружение, т. е. блоку неследует задавать внешнюю геометрию (в виде отступов,границ, влияющих на размеры) и позиционирование.
Блоки можно вкладывать друг в друга.
59
![Page 60: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/60.jpg)
BEM <!-- Верно. Семантически осмысленный блок `header` -->
<div class="header"></div> <!-- Неверно. Описывается внешний вид --> <div class="red-text"></div>
<!-- Блок `header` --> <header class="header"> <!-- Вложенный блок `logo` --> <div class="logo"></div> <!-- Вложенный блок `search-form` --> <form class="search-form"></form> </header>
60
![Page 61: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/61.jpg)
61
![Page 62: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/62.jpg)
62
![Page 63: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/63.jpg)
BEM
Элемент - Составная часть блока, которая не можетиспользоваться в отрыве от него.
Название элемента характеризует смысл, а не состояние
Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента.
Элементы можно вкладывать друг в друга.
Элемент — всегда часть блока, а не другого элемента.block__elem1__elem2. 63
![Page 64: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/64.jpg)
BEM <form class="search-form"> <div class="search-form__content">
<input class="search-form__input"> <button class="search-form__button">Найти</button> </div> </form>
<div class="block"> <div class="block__elem1"> <div class="block__elem2"> <div class="block__elem3"></div> </div> </div> </div>
64
![Page 65: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/65.jpg)
65
![Page 66: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/66.jpg)
66
![Page 67: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/67.jpg)
BEM
Модификатор - сущность, определяющая внешний вид,состояние или поведение блока либо элемента.
Имя модификатора отделяется от имени блока или элементаодним подчеркиванием (_).
67
![Page 68: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/68.jpg)
BEM <!-- Блок `search-form` имеет булевый модификатор `focused` --> <form class="search-form search-form_focused"> <input class="search-form__input">
<!-- Элемент `button` имеет булевый модификатор `disabled` --> <button class="search-form__button search-form__button_disabled"> Найти </button> </form>
<!-- Блок `search-form` имеет модификатор `theme` со значением `islands` --> <form class="search-form search-form_theme_islands"> <input class="search-form__input"> <!-- Элемент `button` имеет модификатор `size` со значением `m` --> <button class="search-form__button search-form__button_size_m"> Найти </button> </form>
68
![Page 69: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/69.jpg)
69
![Page 70: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/70.jpg)
70
![Page 71: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/71.jpg)
MIX <!-- Блок `header` --> <div class="header">
<!-- К блоку `search-form` примиксован элемент `search-form` блока `header` --> <div class="search-form header__search-form"> ... </div> </div>
71
![Page 72: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/72.jpg)
72
![Page 73: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/73.jpg)
73
![Page 74: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/74.jpg)
Компоновка
74
![Page 75: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/75.jpg)
Компоновка (Reflow)
Последовательно
Элементы расставляются слева направо, сверху вниз
Элементы, встречающиеся позже, не влияют нагеометрию предыдущих (кроме таблиц и grid'ов сauto значениями)
Элемент определяет собственную ширину
На основании суммарной высоты дочернихэлементов, полей и отступов, вычисляется высота
75
![Page 76: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/76.jpg)
Gecko Re�ow Visualization - mozilla.orgПосмотреть позже Поделиться
76
![Page 77: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/77.jpg)
Глобальный Reflow
Первоначальное отображение страницы
Изменение окна браузера
Изменение размеров шрифта
и другие подобные глобальные события
77
![Page 78: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/78.jpg)
Инкрементный Reflow
Вставка новых элементов в DOM
Изменение атрибутов (например, смена HTMLкласса)
Смена состояния элемента (ховер, выбор чекбокса,фокус ..)
78
![Page 79: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/79.jpg)
Инкрементный Reflow
<html> <p><span></span></p> <div> 79
![Page 80: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/80.jpg)
Инкрементный Reflow: background
<html> <p><span></span></p> <div> 80
![Page 81: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/81.jpg)
Инкрементный Reflow: transform
<html> <p><span></span></p> <div> 81
![Page 82: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/82.jpg)
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 82
![Page 83: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/83.jpg)
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 83
![Page 84: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/84.jpg)
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 84
![Page 85: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/85.jpg)
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 85
![Page 86: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/86.jpg)
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 86
![Page 87: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/87.jpg)
87
![Page 88: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/88.jpg)
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 88
![Page 89: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/89.jpg)
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 89
![Page 90: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/90.jpg)
Инкрементный Reflow: width
<html> <p><span></span></p> <div> 90
![Page 91: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/91.jpg)
Инкрементный Reflow: width
<html> <p><span></span></p> <div> 91
![Page 92: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/92.jpg)
Инкрементный Reflow: width
<html> <p><span></span></p> <div> 92
![Page 94: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/94.jpg)
Painting
94
![Page 95: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/95.jpg)
RenderTree
95
![Page 96: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/96.jpg)
RenderObject
Есть у каждого DOM-элемента с визуальнымпредставлением
RenderObject хранит знание как отобразить элементв текущем юзер-агенте, т.е в случае браузера речь обидёт об растеризации элемента
RenderObject’ы хранятся в параллельной структуре –RenderTree
96
![Page 97: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/97.jpg)
LayerTree
97
![Page 98: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/98.jpg)
RenderLayer
Каждый RenderObject ассоциируется с RenderLayer
RenderLayer’ы нужны для того чтобы отображатьпересекающиеся элементы
Есть условия, которые ведут к созданию новогоRenderLayer’а
98
![Page 99: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/99.jpg)
Новый RenderLayer
Корневой элемент страницы
position ≠ static
transform3d
opacity
overflow
CSS filter
<canvas> + WebGL99
![Page 100: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/100.jpg)
Композитный слой
Некоторые RenderLayer’ы, но не все,создают собственную подложку отрисовки
(так же её называют композитный слой). Так как создавать на каждый RenderLayer
композитный слой дорого и расточительно,то следующие свойства форсируют его
создание:
transform3d или перспектива100
![Page 101: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/101.jpg)
Примеры:
ОЗИИТНЫЙ
101
![Page 102: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/102.jpg)
Александр Завьялов, Яндекс | Веб-анимация на JS и CSS | FrontTalks 2015Посмотреть поз
102
![Page 103: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/103.jpg)
JavaScript
103
![Page 104: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/104.jpg)
Скрипты
104
![Page 105: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/105.jpg)
Скрипты
105
![Page 106: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/106.jpg)
Скрипты
106
![Page 107: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/107.jpg)
Скрипты
ScriptingHTML ParserScriptingHTML Parser
ScriptingHTML Parser
ScriptingHTML Parser
parser net runtime →execution
<script>
<script defer>
<script async>
107
![Page 108: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/108.jpg)
Ссылки
How browsers work
Принципы работы современных веб-браузеров
Презентация «Как работает вебкит»
БЭМ
108
![Page 109: Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый](https://reader030.vdocuments.us/reader030/viewer/2022041019/5ecd1572381ce046273d90b8/html5/thumbnails/109.jpg)
Вопросы?109