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

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

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

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

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

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

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

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

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

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

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

Pro code

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

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

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

Данные ошибки часто встречаются в БЭМ, но и в нейминг 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 (не рекомендую)

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

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

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

Конец

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