37 ошибок верстальщиков. Не делай так!

Привет! Ошибки допускают все, даже опытные верстальщики. И часто эти ошибки не поддаются никакому объяснению - они просто есть. То класс не так написан, то в сафари все поехало...В общем, в этом видео я хотел бы рассмотреть аж 37 подобных случаев, ошибок, которые не нужно допускать. В этом видео я не смеюсь над теми, кто их совершает, да даже сам некоторые до сих пор совершаю. Я хочу лишь донести то, что это действительно ошибки, и как их исправить. Поехали! Содержание: 00:00 - Вступление и критерии верстки 01:30 - Названия классов транслитом 02:38 - Названия классов не по назначению 03:44 - Названия классов верные, но теги - нет 04:40 - Большая длина названий классов 05:28 - Большая вложенность классов 06:40 - Проблема именования в БЭМ - элемент элемента 08:08 - Проблема именования в БЭМ - модификаторы 09:08 - Неверная табуляция кода 10:08 - Неправильная семантика в html 11:00 - Большая вложенность в html 12:26 - Неверное использование заголовков 14:22 - Использование тегов там, где их использовать нельзя 15:52 - Неверное использование ссылок и кнопок 17:48 - Декоративные элементы в html 18:48 - Декоративные изображения в html 19:44 - Проблема переполнения на сайте 21:26 - Не соблюдается базовая доступность 21:53 - Кириллица в названиях классов, картинок и т.д. 23:18 - Использование id для стилизации 24:15 - Бездумное использование br 25:36 - Использование инлайн-стилей 26:15 - Неверное использование абсолютного позиционирования 28:02 - Организация отступов в верстке 29:25 - Использование фиксированной высоты 30:35 - Следите за наследованием шрифтов 31:45 - Ошибки в стилизации textarea 33:52 - cursor: pointer и hover для интерактивных элементов 34:38 - Удаление outline без альтернативы 35:46 - Сброс и нормализация стилей 36:29 - Фоновые изображения и фоновый цвет 37:27 - Дробные пиксели 38:14 - анимация через left вместо transform 39:16 - Большое количество медиа-запросов 40:09 - Использование !important 41:22 - Неверный подход к верстке 42:20 - Несоответствие кодстайлу 43:03 - Кроссбраузерность 43:24 - Проблемы адаптива 44:02 - Заключение - частоиспользуемые слова в классах - последняя проверка работ на канале - как семантика влияет на доступность - видео по методологии БЭМ - can i include (можно ли вложить?) - отличная статья по ссылкам и кнопкам - декоративные и контентные изображения - Типограф - focus-visible - организация отступов в верстке - - кодстайл - видео про stylelint Поддержать канал: Мой блог: Мой сайт: Канал в телеграм: Чат для верстальщиков: Тема VS Code: One Monokai Шрифт VS Code: Consolas, ’Courier New’, monospace #maxgraph #trueверстка