БЭМ. Просто и доступно презентация

Содержание

Слайд 2

ВЛАДИМИР ЯЗЫКОВ Просто хороший человек

ВЛАДИМИР ЯЗЫКОВ

Просто хороший человек

Слайд 3

ДЛЯ КОГО ЗАНЯТИЕ? Вы знаете, как написать базовую HTML-страницу Вы

ДЛЯ КОГО ЗАНЯТИЕ?

Вы знаете, как написать базовую HTML-страницу
Вы знаете, как сделать

её хотя бы немного красивой с помощью CSS
Вы просто любите аббревиатуры
Слайд 4

ПРОБЛЕМЫ

ПРОБЛЕМЫ

Слайд 5

СВОБОДА Как освободиться от общества и что потом с этим делать?

СВОБОДА

Как освободиться от общества и что потом с этим делать?

Слайд 6

«ПРОБЛЕМЫ» HTML/CSS Вы можете делать всё так, как вам нравится

«ПРОБЛЕМЫ» HTML/CSS

Вы можете делать всё так, как вам нравится («Я художник,

я так вижу»)
Нет никаких ограничений («Пишу код где хочу и как хочу»)
Множество путей сделать одно и то же («Пути верстальщиков неисповедимы»)
В командной разработке трудно понять работу коллег
Через N месяцев код проекта вылетает из головы
Слайд 7

ЧЕМ БОЛЬШЕ СИЛА, ТЕМ БОЛЬШЕ ОТВЕТСТВЕННОСТЬ Дядя Бэн

ЧЕМ БОЛЬШЕ СИЛА, ТЕМ БОЛЬШЕ ОТВЕТСТВЕННОСТЬ

Дядя Бэн

Слайд 8

РЕШЕНИЯ

РЕШЕНИЯ

Слайд 9

ПРОИЗВОДИТЕЛЬНОСТЬ ВЁРСТКИ? Это вообще легально?

ПРОИЗВОДИТЕЛЬНОСТЬ ВЁРСТКИ?

Это вообще легально?

Слайд 10

КАК ЗАГРУЖАЕТСЯ СТРАНИЦА

КАК ЗАГРУЖАЕТСЯ СТРАНИЦА

Слайд 11

КАК СТРОИТСЯ СТРАНИЦА Символы Токены Узлы DOM CSSOM DOM + CSSOM = Render tree (Модель визуализации)

КАК СТРОИТСЯ СТРАНИЦА

Символы
Токены
Узлы
DOM
CSSOM
DOM + CSSOM = Render tree (Модель визуализации)

Слайд 12

ПРОИЗВОДИТЕЛЬНОСТЬ HTML - меньше тегов => Меньше DOM => Меньше

ПРОИЗВОДИТЕЛЬНОСТЬ

HTML - меньше тегов => Меньше DOM => Меньше модель визуализации

=> Меньше оперативной памяти для отображения
CSS
меньше css-селекторов
меньше css-правил
более «плоский» CSSOM
…прочее в данном вебинаре не важно, а то не успеем по времени (но есть ещё)
причины те же
Слайд 13

ПРОИЗВОДИТЕЛЬНОСТЬ CSS [style] #id .class, [attr], :pseudo tag * Вложенность, условные селекторы

ПРОИЗВОДИТЕЛЬНОСТЬ CSS

[style]
#id
.class, [attr], :pseudo
tag
*
Вложенность, условные селекторы

Слайд 14

ПРОБЛЕМЫ СЕЛЕКТОРОВ #id - неудобен, тк уникален tag - медленный, неудобен

ПРОБЛЕМЫ СЕЛЕКТОРОВ

#id - неудобен, тк уникален
tag - медленный, неудобен

Слайд 15

МЕТОДОЛОГИИ Волшебная пилюля

МЕТОДОЛОГИИ

Волшебная пилюля

Слайд 16

МЕТОДОЛОГИИ БЭМ OOCSS SMACSS Atomic CSS MCSS AMCSS FUN и это не полный список!

МЕТОДОЛОГИИ

БЭМ
OOCSS
SMACSS
Atomic CSS
MCSS
AMCSS
FUN
и это не полный список!

Слайд 17

БЭМ Одна из многих, но распространённая

БЭМ

Одна из многих, но распространённая

Слайд 18

ОСНОВНЫЕ ПРИНЦИПЫ Во всём должна быть логика Отталкивайтесь не от

ОСНОВНЫЕ ПРИНЦИПЫ

Во всём должна быть логика
Отталкивайтесь не от оформления, а от

смысла
Смотрите на разработку, как ваши родители и бабушки/дедушки
Части страницы должны быть независимы!
Слайд 19

БЛОКИ

БЛОКИ

Слайд 20

ЭЛЕМЕНТЫ

ЭЛЕМЕНТЫ

Слайд 21

МОДИФИКАТОРЫ

МОДИФИКАТОРЫ

Слайд 22

ОСНОВНЫЕ ОШИБКИ

ОСНОВНЫЕ ОШИБКИ

Слайд 23

ОСНОВНЫЕ ОШИБКИ Не допускайте в классах цифр или соответствующих им

ОСНОВНЫЕ ОШИБКИ

Не допускайте в классах
цифр или соответствующих им обозначений «third», «fourth»

(хотя в описании методологии можно)
не пишите названия тегов в классах
названий стилей или из значений вроде «red», «float-left»
несоблюдение стандарта разделения
слишком много модификаторов
слишком много блоков
1 блок внутри 1 блока
элемент модификатор
Слайд 24

ФАЙЛОВАЯ СТРУКТУРА

ФАЙЛОВАЯ СТРУКТУРА

Слайд 25

СБОРКА

СБОРКА

Имя файла: БЭМ.-Просто-и-доступно.pptx
Количество просмотров: 78
Количество скачиваний: 0