- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
БЭМ. Просто и доступно презентация
Содержание
- 1. БЭМ. Просто и доступно
- 2. ВЛАДИМИР ЯЗЫКОВ Просто хороший человек
- 3. ДЛЯ КОГО ЗАНЯТИЕ? Вы знаете, как написать
- 4. ПРОБЛЕМЫ
- 5. СВОБОДА Как освободиться от общества и что потом с этим делать?
- 6. «ПРОБЛЕМЫ» HTML/CSS Вы можете делать всё так,
- 7. ЧЕМ БОЛЬШЕ СИЛА, ТЕМ БОЛЬШЕ ОТВЕТСТВЕННОСТЬ Дядя Бэн
- 8. РЕШЕНИЯ
- 9. ПРОИЗВОДИТЕЛЬНОСТЬ ВЁРСТКИ? Это вообще легально?
- 10. КАК ЗАГРУЖАЕТСЯ СТРАНИЦА
- 11. КАК СТРОИТСЯ СТРАНИЦА Символы Токены Узлы DOM
- 12. ПРОИЗВОДИТЕЛЬНОСТЬ HTML - меньше тегов => Меньше
- 13. ПРОИЗВОДИТЕЛЬНОСТЬ CSS [style] #id .class, [attr], :pseudo tag * Вложенность, условные селекторы
- 14. ПРОБЛЕМЫ СЕЛЕКТОРОВ #id - неудобен, тк уникален tag - медленный, неудобен
- 15. МЕТОДОЛОГИИ Волшебная пилюля
- 16. МЕТОДОЛОГИИ БЭМ OOCSS SMACSS Atomic CSS MCSS AMCSS FUN и это не полный список!
- 17. БЭМ Одна из многих, но распространённая
- 18. ОСНОВНЫЕ ПРИНЦИПЫ Во всём должна быть логика
- 19. БЛОКИ
- 20. ЭЛЕМЕНТЫ
- 21. МОДИФИКАТОРЫ
- 22. ОСНОВНЫЕ ОШИБКИ
- 23. ОСНОВНЫЕ ОШИБКИ Не допускайте в классах цифр
- 24. ФАЙЛОВАЯ СТРУКТУРА
- 25. СБОРКА
- 26. СПАСИБО!
Слайд 3ДЛЯ КОГО ЗАНЯТИЕ?
Вы знаете, как написать базовую HTML-страницу
Вы знаете, как сделать
её хотя бы немного красивой с помощью CSS
Вы просто любите аббревиатуры
Вы просто любите аббревиатуры
Слайд 6«ПРОБЛЕМЫ» HTML/CSS
Вы можете делать всё так, как вам нравится («Я художник,
я так вижу»)
Нет никаких ограничений («Пишу код где хочу и как хочу»)
Множество путей сделать одно и то же («Пути верстальщиков неисповедимы»)
В командной разработке трудно понять работу коллег
Через N месяцев код проекта вылетает из головы
Нет никаких ограничений («Пишу код где хочу и как хочу»)
Множество путей сделать одно и то же («Пути верстальщиков неисповедимы»)
В командной разработке трудно понять работу коллег
Через N месяцев код проекта вылетает из головы
Слайд 11КАК СТРОИТСЯ СТРАНИЦА
Символы
Токены
Узлы
DOM
CSSOM
DOM + CSSOM = Render tree (Модель визуализации)
Слайд 12ПРОИЗВОДИТЕЛЬНОСТЬ
HTML - меньше тегов => Меньше DOM =>
Меньше модель визуализации
=>
Меньше оперативной памяти для отображения
CSS
меньше css-селекторов
меньше css-правил
более «плоский» CSSOM
…прочее в данном вебинаре не важно, а то не успеем по времени (но есть ещё)
причины те же
CSS
меньше css-селекторов
меньше css-правил
более «плоский» CSSOM
…прочее в данном вебинаре не важно, а то не успеем по времени (но есть ещё)
причины те же
Слайд 18ОСНОВНЫЕ ПРИНЦИПЫ
Во всём должна быть логика
Отталкивайтесь не от оформления, а от
смысла
Смотрите на разработку, как ваши родители и бабушки/дедушки
Части страницы должны быть независимы!
Смотрите на разработку, как ваши родители и бабушки/дедушки
Части страницы должны быть независимы!
Слайд 23ОСНОВНЫЕ ОШИБКИ
Не допускайте в классах
цифр или соответствующих им обозначений «third», «fourth»
(хотя в описании методологии можно)
не пишите названия тегов в классах
названий стилей или из значений вроде «red», «float-left»
несоблюдение стандарта разделения
слишком много модификаторов
слишком много блоков
1 блок внутри 1 блока
элемент модификатор
не пишите названия тегов в классах
названий стилей или из значений вроде «red», «float-left»
несоблюдение стандарта разделения
слишком много модификаторов
слишком много блоков
1 блок внутри 1 блока
элемент модификатор
