Это пост о насущном. Почти каждый день сталкиваюсь с версткой других верстальщиков, иногда детский плевок в ладошку выглядит симпатичней. Не буду долго тянуть, начнем.
1. Ненадежная верстка
Хорошо, ты отверстал картинку новости размером 300х300px. Но кто остановит клиента загрузить туда картинку размером 50x4700px? А он загрузит, не сомневайся. И да, твоя верстка полетит.
Нужно предусматривать все максимально возможные варианты изменения контента сайта, будь то блок с текстом, блок с картинкой. Прибегай к использованию max-height, max-width, object-fit:cover и другим клевым штукам, которые не заставят краснеть.
Порой вместо img лучше использовать background-image. И да, если этот стиль задать линейно в html, то проблем при интеграции на CMS не возникнет.
2. Использование ID в HTML разметке
Речь про пренебрежение классами в пользу айдишек. Запомни простую вещь, id - для JS, class - для CSS.
Также, бекендер пожмет руку если все классы, которые используются в JS ты будешь помечать префиксом js_.
3. Деревянные элементы
А это кнопка? На ссылку можно нажать? Картинку можно увеличить? Чтобы избежать этих и других тупых вопросов от клиента - делай верстку отзывчивой не только для устройства, но и для человека.
Перед сдачей верстки обязательно проверь что все интерактивные элементы, которые должны работать - работают. Все ссылки и кнопки имеют стили для :hover, поля и textarea имеют стили для :focus. Элементы должны реагировать изменением цвета, подчеркиванием, размером, чем угодно. При наведении на такие элементы курсор должен становиться pointer.
Все что не понятно - спрашиваем у дизайнера.
4. Количество !important на 1 м² зашкаливает
Внимательно изучи как наследуются стили. В CSS следует избегать !important. Это грех.
Если это жизненно важно, то обоснуй в комментариях к коду зачем ты это делаешь. После этого обязательно ударь себя по плечу.
5. Забыл про консольку
Отлаживал свои грязные кодульки в JS? Подключал скрипты и забывал про них? Перед сдачей верстки, внимательно посмотри в консоль браузера. Там не должно быть JS ошибок и console.log().
6. PNG, карл
Изначально назвал статью "5 ошибок...", но не могу не написать про это. Более того, схитрю и впихну в этот пункт сразу 2 ошибки.
На дворе 21век, retina экраны, разная плотность пикселей. А ты все равно вытащил логотип из дизайна в png формате 100х50px? Ну не надо так.
Возьми за правило все иконки, логотипы и другую мелкую графику использовать только в SVG формате. Найди где живет дизайнер и любыми способами достань из него логотип в svg.
Если логотип графически сложный или в svg получить его не возможно - делай в png, но только пусть он будет хотя бы в 2 раза больше своего размера в браузере.
И главное, если используешь png, jpg или любые другие форматы векторной графики сжимай их тут, за тебя это никто не сделает, а отдуваться тебе.
p.s. раз уж на то пошло, есть интересный сервис который умеет сжимать и svg, но пользуйся им аккуратно.
Подписывайся на канал, впереди много интересного 🏄♂️
#html #верстка сайтов #frontend #веб-разработка