Статичные значения вместо переменных
На первый взгляд использование конкретных значений в коде кажется удобным – просто и быстро. Но со временем это превращается в ловушку, ведь из-за них нужно точно знать, куда и какое значение вносить, а глобальные изменения стилей становятся почти невозможными.
Например, вы используете #0066ff как основной цвет везде: для текста, фонов, кнопок и в десятках других мест. Но если нужно будет изменить оттенок, вам придется менять его на новое значение в каждом месте. Это очень долгий и не очень увлекательный процесс по поиску и замене каждого вхождения.
Как исправить: запишите #0066ff в переменную, например «—primary», и затем используйте в стилях вместо статичного значения «(var(—primary))». Запомнить и ввести параметр легче 1 раз, что позволит в случае чего изменить цвет в одном месте. Такой подход в использовании переменных в CSS делает правки моментальными, гарантирует гибкость, поддерживает порядок в стилях и целостность дизайна.
Стили на уровне ID
Многие визуальные редакторы и конструкторы сайтов автоматически присваивают ID элементам. На бумаге это выглядит безобидно, но на практике использование ID-селекторов создает две проблемы:
- Идентификаторы (ID) нельзя использовать повторно. Каждый стилизуемый элемент требует свой уникальный ID, что приводит к раздутому HTML-коду и дублированию правил CSS.
- У ID высокий уровень спецификации, что делает их трудно перезаписываемыми без использования !important.
Как исправить: используйте классы для стилизации контента. Их можно переиспользовать, они легко комбинируются и имеют предсказуемый, управляемый вес, что легко позволяет проекту расти.
Если ваши редакторы не поддерживают систему классов, то лучшим решением будет отказаться от них в пользу более современных инструментов.
Ошибки в Margin и Padding
Неправильное использование внешних отступов (margin) и внутренних отступов (padding) превращает верстку и стилизацию в настоящую проблему, приводит к непредсказуемому поведению отступов, где каждый новый элемент ломает всю композицию. Это легко заметить при добавлении цвета у фона, стилей для границ, «схлопывании» отступов и адаптивной верстки.
Многие путают их назначение, а ведь разница есть:
Margin создает пространство снаружи границы элемента, влияя на его расположение относительно соседних элементов
Padding создает пространство внутри границы элемента, влияя на внутренние отступы вокруг контента
и, конечно же, есть Gap, который «умно» создает пространство между элементами
Как исправить:
- Если нужно задать расстояние от одного элемента до другого, используйте подход «сначала gap, потом margin».
- Если нужно задать отступ от элемента до границ его родительского контейнера, используйте padding.
Такая дисциплина делает верстку предсказуемой, адаптивной, аккуратной и простой для правок, что напрямую влияет на скорость реализации задач и качество конечного продукта.
Игнорирование семантической верстки
HTML‑разметка влияет на SEO-продвижение, доступность сайта и удобство сопровождения кода. В погоне за скоростью, особенно в среде современных фреймворков (на JavaScript фреймворках по типу React’а), разработчики иногда превращают все элементы страницы в груду универсальных <div> и <span>.
Использование <div> вместо <header>, <nav>, <article>, <section> или <footer> лишает сайт семантической структуры. Это ухудшает доступность для людей с ограниченными возможностями (скринридеры не смогут корректно ориентироваться на странице), затрудняет понимание кода другими разработчиками и негативно сказывается на продвижении SEO. Поисковые системы ценят семантически правильную разметку, так как она помогает точнее понимать содержание и контекст.
Как исправить: используйте HTML-элементы по назначению: section, nav, article, header, footer и т.д. Заголовки (h1–h6) должны отражать иерархию, а не визуальную часть. Всегда можно сделать, чтобы h2 выглядел как h4, если того требует дизайн при помощи CSS и сохранить правильную структуру. Чем она чище семантика, тем сильнее SEO и стабильнее проект.
Грамотная семантика повышает шансы на успешное продвижение и правильное восприятие поисковыми системами. Кстати, при аудите сайта мы часто фиксируем именно эту ошибку и устраняем ее.
Неправильное использование изображений
Часто визуальные эффекты создают вручную в графическом редакторе: добавляют скругления, тени, градиенты и наложения прямо на картинку. Такие визуальные эффекты увеличивают размер файлов, мешают адаптивной верстке под разные экраны и плохо масштабируются при большом количестве изображений. А если заказчик захочет поменять цвет фона или форму рамки, придется редактировать файлы одно за другим.
Многие такие изменения можно реализовать средствами CSS. Визуал должен быть легким, гибким и подконтрольным. Именно так работает качественная веб‑разработка.
Как исправить: используйте CSS, когда это возможно. Современный CSS позволяют создавать большинство визуальных эффектов напрямую: свойства border-radius, box-shadow, градиенты, трансформации и фильтры дают тот же результат, но с лучшей производительностью и гибкостью.
И никогда не делайте текст частью изображений! Это делает информацию недоступной программам чтения с экрана и сильно бьет по SEO, ведь поисковики не умеют «читать» картинки и полагаются на alt-атрибуты.
