Небольшая сводка ошибок которые встречались во Frontende и Вёрстке за время работы с разными проектами. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним. Мб кому-то этого и не хватало))
UI / UX / Code, 2018-2022г
Не забывайте читать подписи к картинкам - там раскрыта основная суть)
Для иконок лучше всего использовать что-то типо https://realfavicongenerator.net/ таких генераторов
Немного про чтение макетов
Пройдемся по кейсам со слайда:
Найдите точку "опоры" - якорную точку привязку от куда считать размеры, не забывайте что у нас резиново-адаптивный дизайн, а не вёрстка на абсалютах от точки (0/0).
Мыслите отступами и контейнерами (надеюсь ваш дизайнер делает так же).
Размеры кнопок это не ширина - а текст + отступы.
Смотрите на то что отрисовано- очевидно, что если в списке отрисован скрол, то значит это максимальная высота списка
Конечно не забывайте включать логику, потому что все ошибаются и какие-то элементы могли быть отрисованы по ошибке
Pro code
Лучшие варианты - это иконочные шрифты (например https://fontawesome.com/v4/) и библиотеки компонетов (https://ant.design/components/icon) или их рукописные аналоги.
Варианты с png спрайтами и инлайн svg кодом лучше не рассматривать.
Типограф — позволит вам правильно переносить слова по строкам по правилам русского языка, а так же заменит спецсимволы их кодовом аналогом. Или заменит «минус» на дефис
Особенно это актуально для больших объемов текста в том числе динамических.
Если вы делаете дизайнерский заголовок на лендосе — пожалуйста используйте <br /> никто вас не поругает
Если вы ещё пишите на БЭМ (и не только)
Данные ошибки часто встречаются в БЭМ, но и в нейминг css-in-js и просто в нейминг компонентов могут утекать.
По кейсам:
__p - ну во-первых это не понятное название (не понятно когда его использовать) И этот класс так и умрет без возможности его редактировать. Называйте классы по их назначению например __title, а __p через год жизни проекта уже будет применён к div / h2 / span и любым другим элементам
__p-active - это не новый элемент, это вид первого
Использование общих селекторов замедляет обработку css
.name.name.name - ну тут хз ваще)
Не надо использовать слова style если это и так файл стилей и вы описываете стиль (уберите тавтологию если и так все понятно из контекста)
Смотри пункт (5)
p.s. не стал расписывать подробно - просто смотрим, что бывает в реальных проектах
А когда?
— Когда нет прямого доступа к верстке (Например контентные блоки которые напираются в админке или документы которые генерируются для просмотра)
— Когда задаются исходные стили
— Нормалайз / resetCss (не рекомендую)
Если у вас кончились все положительные числа от 0 до 999999..., то пожалуй можете начать использовать отрицательные. Контекст наложения никто не отменял, так что у вас в запасе 999(9) * 999(9) комбинаций
И еще пару слайдов
Вам будет проще верстать когда положение элемента будет таким какое оно описано в css, и не нужно будет искать дополнительный класс анимации и держать в уме вычисленные значения
Конец
Источник вдохновения и просто хороший сайт с примерами - https://webmasters.teamdev.com/
