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

Digital-студия WNDER

Ошибка первая: игнорирование семантики

Многие верстают так: «Есть <div> — и хватит». В итоге получается суп из дивов, в котором ни поисковик, ни скринридер не разберутся. Семантические теги — это не просто мода, а способ сделать сайт доступным и понятным.

Плохой пример:

<div class="header">
  <div class="nav">
    <div class="link">Главная</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">Заголовок</div>
    <div class="text">Текст статьи</div>
  </div>
</div>

Хороший пример:

<header>
  <nav>
    <a href="#">Главная</a>
  </nav>
</header>
<main>
  <article>
    <h1>Заголовок</h1>
    <p>Текст статьи</p>
  </article>
</main>

Семантика помогает и в SEO, и в доступности. Правило: если есть подходящий тег — используй его, а не div.

Лайфхак: Проверяй структуру через валидатор W3C. Он подскажет, где ты забыл про семантику.

Ошибка вторая: отсутствие адаптивности

Сайт, который отлично выглядит на мониторе, но разваливается на телефоне — классика. Забывать про медиазапросы или использовать фиксированные ширины — путь к боли.

Плохо:

.container {
  width: 1200px;
  margin: 0 auto;
}

Хорошо:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

И не забывай про медиазапросы. Например:

@media (max-width: 768px) {
  .container {
    padding: 0 10px;
  }
}

Совет: всегда начинай верстку с мобильной версии, а потом расширяй. Так проще не упустить важное.

Ошибка третья: каскад и специфичность

Когда стили не применяются, многие начинают пихать !important. Это как забивать гвозди микроскопом — работает, но выглядит ужасно. Проблема в специфичности селекторов.

Пример, где стиль не сработает:

<div id="header" class="header">...</div>
<style>
  .header { color: red; }
  #header { color: blue; }
</style>

Цвет будет синим, потому что id имеет больший вес. Решение — использовать более конкретные селекторы или БЭМ, чтобы избежать конфликтов.

Правило: не используй !important без крайней необходимости. Лучше разобраться в специфичности.

Ошибка четвертая: забытые вендорные префиксы

Некоторые CSS-свойства до сих пор требуют префиксов для старых браузеров. Например, user-select или backdrop-filter.

Пример с префиксами:

.element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

Ошибка пятая: плохая работа с изображениями

Картинки без указания размеров, тяжелые форматы, отсутствие адаптивности — все это бьет по производительности.

Плохо:

<img src="big-image.jpg">

Хорошо:

<img src="image.jpg" alt="Описание" width="800" height="600" loading="lazy">

И используй современные форматы: WebP, AVIF. Они весят меньше и грузятся быстрее.

Лайфхак: Всегда указывай alt для изображений. Это помогает и SEO, и доступности.

Таблица частых ошибок и решений

Ошибка Решение
Использование div для всего Применять семантические теги: header, nav, main, article, footer
Фиксированные ширины Использовать max-width и проценты
!important для всего Разобраться в специфичности, использовать БЭМ
Забытые вендорные префиксы Autoprefixer в сборке
Тяжелые изображения без размеров Указывать width/height, использовать lazy loading и современные форматы

Заключение

Верстка — это не только код, но и внимательность к деталям. Избегая этих ошибок, ты сэкономишь время себе и тем, кто будет поддерживать проект. Помни: семантика, адаптивность, аккуратные стили и оптимизация — твои лучшие друзья.

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

Студия WNDER