Вёрстка — это не тупо

Небольшая сводка ошибок которые встречались во Frontende и Вёрстке за время работы с разными проектами. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним. Мб кому-то этого и не хватало))
UI / UX / Code, 2018-2022г

Не забывайте читать подписи к картинкам - там раскрыта основная суть)

* "Не заставляйте меня думать" - Книга Стива Круга о взаимодействии человека и компьютера

Вспомните как вас это бесит там где это невозможно

Обязательно должны быть, даже на начальном этапе разработки

Для иконок лучше всего использовать что-то типо https://realfavicongenerator.net/ таких генераторов

* https://habr.com/ru/articles/459054/

Не забывайте напомнить дизайнеру если он о них забыл

Подсказка должна отображать дополнительную информацию или описание неочевидного действия, а не копировать текст из кнопки/ссылки

Описание картинки (alt) - должно быть описанием картинки, а не "avatar"

Проверяйте сайт или библиотеку на доступность если вашим сайтом пользуются люди

Так же к доступности относится навигация с клавиатуры

Немного про чтение макетов

Пройдемся по кейсам со слайда:

1. Найдите точку "опоры" - якорную точку привязку от куда считать размеры, не забывайте что у нас резиново-адаптивный дизайн, а не вёрстка на абсалютах от точки (0/0).

   Мыслите отступами и контейнерами (надеюсь ваш дизайнер делает так же).

2. Размеры кнопок это не ширина - а текст + отступы.

3. Смотрите на то что отрисовано- очевидно, что если в списке отрисован скрол, то значит это максимальная высота списка

Конечно не забывайте включать логику, потому что все ошибаются и какие-то элементы могли быть отрисованы по ошибке

Pro code

Зависит от того как с ним взаимодействовать, где исходники нужно ли пользователю сохранять картинку нужно ли её динамически менять, или например лениво загружать

Если вы знаете только 1 - пройдитесь по всем, не так давно их было около 6. Мб вы найдете для себя более удобный

Лучшие варианты - это иконочные шрифты (например https://fontawesome.com/v4/) и библиотеки компонетов (https://ant.design/components/icon) или их рукописные аналоги.
Варианты с png спрайтами и инлайн svg кодом лучше не рассматривать.

Вспомните про адаптивность и резиновость, лучше воспользоваться Типографом https://www.artlebedev.ru/typograf/

Типограф — позволит вам правильно переносить слова по строкам по правилам русского языка, а так же заменит спецсимволы их кодовом аналогом. Или заменит «минус» на дефис
Особенно это актуально для больших объемов текста в том числе динамических.
Если вы делаете дизайнерский заголовок на лендосе — пожалуйста используйте <br /> никто вас не поругает

Не надо использовать и basis и width одновременно, это путает и усложняет дебаг. basis сам подтянется из width

Если вы ещё пишите на БЭМ (и не только)

Данные ошибки часто встречаются в БЭМ, но и в нейминг css-in-js и просто в нейминг компонентов могут утекать.

По кейсам:

1. __p - ну во-первых это не понятное название (не понятно когда его использовать) И этот класс так и умрет без возможности его редактировать. Называйте классы по их назначению например __title, а __p через год жизни проекта уже будет применён к div / h2 / span и любым другим элементам

2. __p-active - это не новый элемент, это вид первого

3. Использование общих селекторов замедляет обработку css

4. .name.name.name - ну тут хз ваще)

5. Не надо использовать слова style если это и так файл стилей и вы описываете стиль (уберите тавтологию если и так все понятно из контекста)

6. Смотри пункт (5)
   p.s. не стал расписывать подробно - просто смотрим, что бывает в реальных проектах
   

Пример рефактора

А когда?

— Когда нет прямого доступа к верстке (Например контентные блоки которые напираются в админке или документы которые генерируются для просмотра)
— Когда задаются исходные стили
— Нормалайз / resetCss (не рекомендую)

Если у вас в проекте есть отрицательный index значит не правильно настроены высоты и дыры закрываются костылем.

Если у вас кончились все положительные числа от 0 до 999999..., то пожалуй можете начать использовать отрицательные. Контекст наложения никто не отменял, так что у вас в запасе 999(9) * 999(9) комбинаций

И еще пару слайдов

Конечное статическое положение должно быть в точке 0,0 - так будет проще работать с элементами

Вам будет проще верстать когда положение элемента будет таким какое оно описано в css, и не нужно будет искать дополнительный класс анимации и держать в уме вычисленные значения

Положением и размером элементов должны управлять сетки, сам элемент уже будет подстраиваться и корректно отображаться в зависимости от размера и контекста

Конец

Источник вдохновения и просто хороший сайт с примерами - https://webmasters.teamdev.com/