Небольшая сводка ошибок которые встречались во Frontende и Вёрстке за время работы с разными проектами. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним. Мб кому-то этого и не хватало))
UI / UX / Code, 2018-2022г
Не забывайте читать подписи к картинкам - там раскрыта основная суть)
![* "Не заставляйте меня думать" - Книга Стива Круга о взаимодействии человека и компьютера * "Не заставляйте меня думать" - Книга Стива Круга о взаимодействии человека и компьютера](https://habrastorage.org/getpro/habr/upload_files/be0/d00/a9b/be0d00a9b2031d6bc9d0c786ab798d65.png)
![Вспомните как вас это бесит там где это невозможно Вспомните как вас это бесит там где это невозможно](https://habrastorage.org/getpro/habr/upload_files/2ea/c14/edb/2eac14edb346ae8c04410b29c25d8436.png)
![Обязательно должны быть, даже на начальном этапе разработки Обязательно должны быть, даже на начальном этапе разработки](https://habrastorage.org/getpro/habr/upload_files/f4e/bb1/64d/f4ebb164d5301830eec512e6dba6e0ed.png)
Для иконок лучше всего использовать что-то типо https://realfavicongenerator.net/ таких генераторов
![* https://habr.com/ru/articles/459054/ * https://habr.com/ru/articles/459054/](https://habrastorage.org/getpro/habr/upload_files/844/81e/74a/84481e74a157f93dd1d3a32b4c0958e4.png)
![Не забывайте напомнить дизайнеру если он о них забыл Не забывайте напомнить дизайнеру если он о них забыл](https://habrastorage.org/getpro/habr/upload_files/442/a3f/add/442a3faddbff13e58ef8a80a6a1d8cf2.png)
![Подсказка должна отображать дополнительную информацию или описание неочевидного действия, а не копировать текст из кнопки/ссылки Подсказка должна отображать дополнительную информацию или описание неочевидного действия, а не копировать текст из кнопки/ссылки](https://habrastorage.org/getpro/habr/upload_files/d96/ce1/b11/d96ce1b117bbfe750360361228ae279f.png)
![Описание картинки (alt) - должно быть описанием картинки, а не "avatar" Описание картинки (alt) - должно быть описанием картинки, а не "avatar"](https://habrastorage.org/getpro/habr/upload_files/f07/6f0/4ee/f076f04ee9a68e8ecee981c56fdf4db7.png)
![Проверяйте сайт или библиотеку на доступность если вашим сайтом пользуются люди Проверяйте сайт или библиотеку на доступность если вашим сайтом пользуются люди](https://habrastorage.org/getpro/habr/upload_files/5a8/875/cde/5a8875cdec86066162524c2141ab1bba.png)
![Так же к доступности относится навигация с клавиатуры Так же к доступности относится навигация с клавиатуры](https://habrastorage.org/getpro/habr/upload_files/a19/cd6/b2a/a19cd6b2afc1b6e08453ebd536f5051f.png)
Немного про чтение макетов
![](https://habrastorage.org/getpro/habr/upload_files/74a/0cd/9b9/74a0cd9b96bfcedb8f8e820d9ba5b665.png)
Пройдемся по кейсам со слайда:
Найдите точку "опоры" - якорную точку привязку от куда считать размеры, не забывайте что у нас резиново-адаптивный дизайн, а не вёрстка на абсалютах от точки (0/0).
Мыслите отступами и контейнерами (надеюсь ваш дизайнер делает так же).
Размеры кнопок это не ширина - а текст + отступы.
Смотрите на то что отрисовано- очевидно, что если в списке отрисован скрол, то значит это максимальная высота списка
Конечно не забывайте включать логику, потому что все ошибаются и какие-то элементы могли быть отрисованы по ошибке
Pro code
![Зависит от того как с ним взаимодействовать, где исходники
нужно ли пользователю сохранять картинку
нужно ли её динамически менять, или например лениво загружать Зависит от того как с ним взаимодействовать, где исходники
нужно ли пользователю сохранять картинку
нужно ли её динамически менять, или например лениво загружать](https://habrastorage.org/getpro/habr/upload_files/97f/4ae/9df/97f4ae9dfe3d4c14b2f0a0e461140ba7.png)
![Если вы знаете только 1 - пройдитесь по всем, не так давно их было около 6. Мб вы найдете для себя более удобный Если вы знаете только 1 - пройдитесь по всем, не так давно их было около 6. Мб вы найдете для себя более удобный](https://habrastorage.org/getpro/habr/upload_files/d11/658/908/d11658908e8e7854ef58c61758d36ae5.png)
Лучшие варианты - это иконочные шрифты (например https://fontawesome.com/v4/) и библиотеки компонетов (https://ant.design/components/icon) или их рукописные аналоги.
Варианты с png спрайтами и инлайн svg кодом лучше не рассматривать.
![Вспомните про адаптивность и резиновость, лучше воспользоваться Типографом https://www.artlebedev.ru/typograf/ Вспомните про адаптивность и резиновость, лучше воспользоваться Типографом https://www.artlebedev.ru/typograf/](https://habrastorage.org/getpro/habr/upload_files/b28/8c4/697/b288c46978f2625872708d50526ae8d8.png)
Типограф — позволит вам правильно переносить слова по строкам по правилам русского языка, а так же заменит спецсимволы их кодовом аналогом. Или заменит «минус» на дефис
Особенно это актуально для больших объемов текста в том числе динамических.
Если вы делаете дизайнерский заголовок на лендосе — пожалуйста используйте <br /> никто вас не поругает
![Не надо использовать и basis и width одновременно, это путает и усложняет дебаг. basis сам подтянется из width Не надо использовать и basis и width одновременно, это путает и усложняет дебаг. basis сам подтянется из width](https://habrastorage.org/getpro/habr/upload_files/422/ff7/041/422ff70419766fadba20316151cf377c.png)
Если вы ещё пишите на БЭМ (и не только)
![](https://habrastorage.org/getpro/habr/upload_files/bd7/261/1f1/bd72611f1108c68dcb439dcc03f7ac9f.png)
Данные ошибки часто встречаются в БЭМ, но и в нейминг css-in-js и просто в нейминг компонентов могут утекать.
По кейсам:
__p - ну во-первых это не понятное название (не понятно когда его использовать) И этот класс так и умрет без возможности его редактировать. Называйте классы по их назначению например __title, а __p через год жизни проекта уже будет применён к div / h2 / span и любым другим элементам
__p-active - это не новый элемент, это вид первого
Использование общих селекторов замедляет обработку css
.name.name.name - ну тут хз ваще)
Не надо использовать слова style если это и так файл стилей и вы описываете стиль (уберите тавтологию если и так все понятно из контекста)
Смотри пункт (5)
p.s. не стал расписывать подробно - просто смотрим, что бывает в реальных проектах
![Пример рефактора Пример рефактора](https://habrastorage.org/getpro/habr/upload_files/54a/443/17f/54a44317f112189714471e06563b987e.png)
![](https://habrastorage.org/getpro/habr/upload_files/e96/46c/da0/e9646cda02d4895af0a93c133dbdeb6e.png)
А когда?
— Когда нет прямого доступа к верстке (Например контентные блоки которые напираются в админке или документы которые генерируются для просмотра)
— Когда задаются исходные стили
— Нормалайз / resetCss (не рекомендую)
![Если у вас в проекте есть отрицательный index значит не правильно настроены высоты и дыры закрываются костылем. Если у вас в проекте есть отрицательный index значит не правильно настроены высоты и дыры закрываются костылем.](https://habrastorage.org/getpro/habr/upload_files/865/406/c8a/865406c8acca3482d23da08f063249ac.png)
Если у вас кончились все положительные числа от 0 до 999999..., то пожалуй можете начать использовать отрицательные. Контекст наложения никто не отменял, так что у вас в запасе 999(9) * 999(9) комбинаций
И еще пару слайдов
![Конечное статическое положение должно быть в точке 0,0 - так будет проще работать с элементами Конечное статическое положение должно быть в точке 0,0 - так будет проще работать с элементами](https://habrastorage.org/getpro/habr/upload_files/974/13c/a22/97413ca22c2db0dd7b32d63e1980c724.png)
Вам будет проще верстать когда положение элемента будет таким какое оно описано в css, и не нужно будет искать дополнительный класс анимации и держать в уме вычисленные значения
![Положением и размером элементов должны управлять сетки, сам элемент уже будет подстраиваться и корректно отображаться в зависимости от размера и контекста Положением и размером элементов должны управлять сетки, сам элемент уже будет подстраиваться и корректно отображаться в зависимости от размера и контекста](https://habrastorage.org/getpro/habr/upload_files/941/e22/7f6/941e227f60ee086fb1813729952e40e8.png)
Конец
Источник вдохновения и просто хороший сайт с примерами - https://webmasters.teamdev.com/