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

Digital-студия WNDER

Семантика — не просто модное слово

Многие начинающие верстальщики используют <div> для всего подряд. Кнопка? Див. Заголовок? Див. Список? Тоже див. В итоге получается «дивный» код, в котором сам черт ногу сломит. Семантические теги (<header>, <nav>, <main>, <footer>, <button> и другие) не только делают код понятнее, но и помогают поисковикам и скринридерам.

Вот пример плохой верстки:

<div class="header">
  <div class="nav">
    <div class="link">Главная</div>
    <div class="link">О нас</div>
  </div>
</div>
<div class="content">
  <div class="title">Заголовок</div>
  <div class="text">Текст...</div>
</div>

А вот как должно быть:

<header>
  <nav>
    <a href="#">Главная</a>
    <a href="#">О нас</a>
  </nav>
</header>
<main>
  <h1>Заголовок</h1>
  <p>Текст...</p>
</main>
Правило: Прежде чем взяться за <div>, спросите себя: «А нет ли для этого более подходящего тега?» Скорее всего, есть.

Каскад и специфичность: кто кого перебьет?

CSS-селекторы иногда ведут себя как дети в песочнице: каждый хочет быть главным. Новички часто пишут слишком сложные селекторы или используют !important направо и налево. Это приводит к конфликтам и непредсказуемому поведению стилей.

Пример плохого кода:

div.container > ul.list > li.item > a.link {
  color: red !important;
}

А лучше использовать более простые селекторы и избегать !important без крайней необходимости. Например, добавить класс непосредственно ссылке:

.link-highlight {
  color: red;
}

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

Блочная модель: как не сломать макет

Каждый элемент в CSS — это коробка с содержимым, padding, border и margin. Если не учитывать это, элементы могут вылезать за пределы родителя или перекрывать друг друга. Особенно часто путают box-sizing: content-box (по умолчанию) и border-box.

Сравним:

Свойство content-box (по умолчанию) border-box
width Ширина только контента Ширина включает padding и border
Расчет общей ширины width + padding + border width (уже включает padding и border)
Удобство Часто требует вычислений Проще для адаптивной верстки

Совет: добавьте глобально box-sizing: border-box; для всех элементов — это спасет от многих головных болей.

*, *::before, *::after {
  box-sizing: border-box;
}

Адаптивность: не забудьте про мобильные устройства

Многие верстают сайт на большом мониторе, а потом удивляются, почему на телефоне все разъезжается. Адаптивность — это не просто «резиновые» картинки. Нужно использовать медиазапросы и гибкие единицы измерения (%, rem, vw).

Пример: фиксированная ширина контейнера.

.container {
  width: 1200px;
}

На экране 800px такой блок будет обрезан. Лучше задать max-width: 100% или использовать width: 100% с ограничением:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
Лайфхак: Всегда проверяйте верстку в режиме эмуляции мобильных устройств в DevTools. И не забывайте про мета-тег viewport.

Валидация и кроссбраузерность

Даже опытные разработчики иногда забывают проверять код на валидность. Ошибки в HTML могут привести к неожиданному отображению. Используйте W3C Validator — это бесплатно и быстро.

Кроссбраузерность — отдельная песня. Например, некоторые свойства нужно писать с префиксами для старых браузеров. Но сегодня, к счастью, большинство современных браузеров поддерживают стандартные свойства. Однако всегда стоит проверять в нескольких браузерах.

Пример: свойство user-select требует префиксов для Safari и старых Chrome:

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

Организация кода: не превращайте CSS в свалку

Когда стилей становится много, легко запутаться. Используйте методологии вроде BEM, разбивайте CSS на модули (например, с помощью препроцессоров или CSS-in-JS). Старайтесь не использовать вложенность глубже 2-3 уровней.

Плохо:

.header .nav .list .item .link {
  color: blue;
}

Хорошо (BEM):

.nav__link {
  color: blue;
}

Также не забывайте про комментарии и логическую структуру файлов.

Что в итоге?

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

Студия WNDER