15 ошибок новичков в CSS, которые ломают вёрстку

Это уже третья статья про распространенные ошибки начинающих фронтенд-разработчиков. Если интерфейс твоего проекта вдруг сломался, возможно, ты найдёшь решение здесь или в наших предыдущих статьях:

• 10 ошибок начинающих frontend-разработчиков и как их избежать
• 10 ошибок в JavaScript, из-за которых сайт тормозит

✨ Читай внимательно, в статье спрятано слово! Если соберёшь фразу, сможешь принять участие в розыгрыше сертификата Ozon! Подробнее о розыгрыше мы писали здесь.

А теперь перейдём к ошибкам в CSS.

Что происходит с интерфейсом: текст выходит за рамки блока, картинки обрезаются, элементы страницы перекрывают друг друга.

В чём проблема на стороне фронтенда?
Разработчик задал фиксированную высоту height: 300px в динамичном проекте, где содержимое меняется: другой текст, шрифт, длина строки, перевод — каждое такое обновление ломает блок.

Решение

• Использовать автоматическую высоту (height: auto). Фиксированная подходит только для неизменяемых объектов, например, баннеров.
• Там, где нужна минимальная высота — применять min-height, например в карточках товаров или статей, которые должны быть одинаковыми по высоте, но при этом способными растягиваться, если текста станет больше.
• Доверять потоку документа и гибким контейнерам — позволять элементам самим занимать нужную высоту и выстраиваться естественным образом без жёстких ограничений.

Что видит пользователь: элементы перекрывают друг друга, кнопки и тексты смещаются со своих мест, при изменении размеров окна страница выглядит неправильно.

В чём проблема на стороне фронтенда?
Разработчик ошибочно использовал position: absolute там, где нужна была гибкая вёрстка, в итоге элемент не реагирует на изменение контента и смещается или перекрывает соседние блоки.

Решение

• Использовать flexbox или CSS Grid для выравнивания: элементы остаются в потоке, подстраиваются под содержимое и сохраняют правильное расположение.
• Абсолют использовать только для фиксированных элементов, например, иконок, модальных окон или декоративных объектов.

Что происходит с интерфейсом: блоки выходят за границы контейнеров, появляется горизонтальная прокрутка, сетка выглядит сломанной.

В чём проблема на стороне фронтенда?
Разработчик задаёт ширину элемента через width, но не учитывает, что к этой ширине автоматически добавляются padding и border (отступы и рамка). В результате фактическая ширина блока оказывается больше, чем предполагалось, и соседние элементы смещаются или выходят за границы контейнера.

Решение
Использовать box-sizing: border-box для всех элементов, чтобы ширина включала padding и border, и всегда учитывать эти параметры при расчётах размеров.

Что происходит с интерфейсом: стили не применяются или ведут себя непредсказуемо, некоторые элементы не меняют внешний вид.

В чём проблема на стороне фронтенда?
Разработчик пишет слишком длинные и сложные CSS-правила, которые точно указывают, к каким элементам применять стили, например, .header .menu ul li a. Такие правила трудно изменить, и приходится использовать !important, чтобы переопределить их. Из-за этого порядок применения стилей нарушается, и поведение CSS становится непредсказуемым.

Решение
Использовать простые классы, методологии БЭМ или ITCSS для структурирования CSS и уменьшения специфичности.

Что происходит с интерфейсом: на разных устройствах блоки и текст выглядят неправильно, сетка ломается, элементы не помещаются.

В чём проблема на стороне фронтенда?
Разработчик ошибочно использовал пиксели для размеров элементов вместо гибких единиц. Пиксели — это фиксированные величины, которые не масштабируются под разные экраны и размеры шрифтов, они подходят для баннеров или иконок.

Решение
Использовать гибкие единицы: rem, em, %, vw, vh для текста и контейнеров. Они позволяют элементам и тексту подстраиваться под размер экрана или родительского блока, их применяют для адаптивных сайтов и интерфейсов, чтобы макет корректно отображался на любых устройствах.

Что происходит с интерфейсом: блоки ведут себя хаотично, появляются пустые области, элементы обтекают друг друга неправильно.

В чём проблема на стороне фронтенда?
Разработчик использует float для построения сетки или расположения блоков, хотя float предназначен только для обтекания текста или небольших элементов. При использовании float для макета блоки могут смещаться, накладываться друг на друга или создавать пустые пробелы, из-за чего верстка становится нестабильной и трудно управляемой.

Решение
Для построения сеток лучше применять Flexbox или CSS Grid, которые сохраняют порядок блоков и автоматически подстраиваются под содержимое и размеры экрана.

Что происходит с интерфейсом: одинаковые элементы выглядят по-разному в разных браузерах, появляются лишние отступы и непредсказуемые различия.

В чём проблема на стороне фронтенда?
Разработчик не учёл, что браузеры применяют свои встроенные стили к элементам по умолчанию, например, отступы у заголовков, списков или кнопок. Из-за этого один и тот же код отображается по-разному в Chrome, Firefox, Safari и других браузерах.

Решение
Использовать reset.css или modern-normalize, чтобы убрать встроенные стили и привести все элементы к единому базовому виду, на котором проще строить свой дизайн.

Что происходит с интерфейсом: элементы смещаются или накладываются при изменении ширины окна, интерфейс выглядит сломанным.

В чём проблема на стороне фронтенда?
Новичок пытается позиционировать блоки с помощью больших маргинов. Маргин (margin) — это внешний отступ элемента, который создаёт пространство вокруг него. Сам по себе маргин не предназначен для точного выравнивания сложных макетов, особенно если элементы должны динамически подстраиваться под размер окна или соседние блоки.

Решение
Использовать Flexbox или CSS Grid для выравнивания элементов и свойство gap для контроля расстояний между ними. Маргины лучше применять для небольших отступов между блоками, а не для глобального позиционирования.

Что происходит с интерфейсом: всплывающие окна, меню или подсказки оказываются за другими элементами и не кликаются.

В чём проблема на стороне фронтенда?
Разработчик неправильно использовал z-index — это свойство, которое управляет порядком слоёв элементов на экране. Но важно знать два простых правила:

1. z-index работает только у элементов, у которых задано позиционирование: position: relative, absolute, fixed или sticky. Если у элемента position: static (значение по умолчанию), то z-index на него не влияет.
2. У разных элементов могут быть свои контексты наложения. Если элемент находится внутри блока, который создаёт такой уровень, он может подниматься только внутри него. Он не сможет оказаться выше элементов из другого уровня, даже с большим значением z-index.

Решение
Использовать z-index только там, где действительно нужно поднять элемент над другими — например, для модального окна, выпадающего меню или подсказки. Перед этим обязательно задать позиционирование. Большие значения вроде 9999 не помогают — важнее правильно выстроить слои.

Что происходит с интерфейсом: элементы на странице ведут себя непредсказуемо: кнопки и ссылки могут иметь неожиданный цвет, текст смещается, блоки перекрывают друг друга. Интерфейс выглядит хаотично и неудобным для использования.

В чём проблема на стороне фронтенда?
Новичок пытается быстро исправить внешний вид элементов и ставит !important почти везде. Из-за этого браузер перестаёт понимать, какие правила нужно применять в первую очередь. Новые изменения ломают уже настроенные элементы, и страница становится непредсказуемой.

Решение
Придерживаться порядка при оформлении страницы, делать простые и понятные правила для каждого элемента и использовать !important только в крайних случаях.

Что происходит с интерфейсом: изменения в одном месте вызывают неожиданные баги в другом, например после редактирования внешнего вида кнопки, ломается меню.

В чём проблема на стороне фронтенда?
Стили написаны хаотично. Одинаковые правила могут повторяться много раз, а стили разных элементов конфликтуют между собой.

Решение
Использовать методологии (БЭМ, ITCSS), переменные CSS, компонентный подход и модульную структуру файлов.

Что происходит с интерфейсом: на мобильных устройствах элементы не помещаются, текст и кнопки накладываются друг на друга.

В чём проблема на стороне фронтенда?
Верстка рассчитана только десктоп, не адаптирована для других устройств.

Решение
Применять адаптивность с самого начала. Главный принцип — «mobile-first»: сначала верстаем для мобильных, а затем с помощью медиа-запросов расширяем стили для больших экранов.

Что происходит с интерфейсом: интерфейс выглядит старомодным, медленно работает или ведёт себя странно. Элементы могут «прыгать» или ломаться при изменении размера.

В чём проблема на стороне фронтенда?
Используются устаревшие методы, например, вёрстка на таблицах или на float — обтекание картинок текстом.

Решение
Изучать и применять современные стандарты CSS. Каждый инструмент решает свою задачу:

• CSS Grid и Flexbox — для создания гибких и сложных макетов сетки.
• Кастомные свойства (CSS-переменные) — для удобного управления цветами и размерами.
• Функции вроде clamp() — для «резинового», но контролируемого изменения размеров.
• Контейнерные запросы — чтобы стили зависели от размера конкретного блока, а не всего окна.

Что происходит с интерфейсом: картинки искажены, обрезаны или выходят за границы блока.

В чём проблема на стороне фронтенда?
Фиксированные размеры (width и height) не учитывают пропорции изображений и ломают адаптивность.

Решение
Использовать авторазмеры, object-fit: cover/contain и процентные значения, чтобы изображения сохраняли пропорции.

Что происходит с интерфейсом: текст выглядит «сбитым», строки налезают друг на друга или, наоборот, между ними слишком большие пустоты. В карточках и кнопках текст визуально не по центру, интерфейс кажется непрофессиональным.

В чём проблема на стороне фронтенда?
Новички часто либо вообще не задают line-height, полагаясь на браузерные значения по умолчанию, либо указывают его в пикселях без привязки к размеру шрифта. В результате при изменении font-size, шрифта или масштаба страницы межстрочные расстояния ломаются, особенно в адаптивной вёрстке.

Решение
Использовать относительный line-height без единиц измерения, например line-height: 1.4 или 1.6. Так значение автоматически масштабируется вместе со шрифтом и сохраняет читаемость текста на любых экранах.

Для разных типов текста стоит задавать разные значения:

• основной текст: 1.5–1.7
• заголовки: 1.1–1.3
• кнопки и лейблы: ближе к 1

Это простой приём, который сильно улучшает внешний вид и читабельность интерфейса.

Узнай больше о frontend-разработке на курсе с гарантией трудоустройства.