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

Digital-студия WNDER

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

Многие начинают верстку с кучи <div>. Кажется, что разницы нет: что <div>, что <header>. Но семантические теги помогают поисковикам и скринридерам понимать структуру страницы. Это как подписывать коробки при переезде: потом легче найти нужное.

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

<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>

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

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
Правило: Используйте семантические теги (<header>, <nav>, <main>, <footer>, <article>, <section>) вместо безликих <div>. Это улучшает доступность и SEO.

Блочная модель: как не сломать ширину

Каждый элемент в CSS — это коробка с контентом, padding, border и margin. Новички часто забывают, что padding и border добавляются к ширине, если не установлен box-sizing: border-box. В результате верстка «плывет».

Пример ошибки:

<style>
  .box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
  }
</style>
<div class="box">Контент</div>

Фактическая ширина такого блока будет 300 + 40 + 10 = 350px. Чтобы избежать сюрпризов, добавьте глобальное правило:

<style>
  *, *::before, *::after {
    box-sizing: border-box;
  }
</style>

Теперь ширина включает padding и border.

Лайфхак: Всегда начинайте CSS с box-sizing: border-box для всех элементов. Это спасет от многих головных болей.

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

CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей. Стили применяются по определенным правилам, и если вы не понимаете специфичность, ваши стили могут не работать.

Чем более конкретный селектор, тем выше его приоритет. Например, #id перебьет .class, а .class перебьет div. Но не злоупотребляйте !important — это как кувалда для забивания гвоздя.

Сравнение селекторов по специфичности:

Селектор Вес Пример
Инлайн-стиль 1000 style="color: red"
ID 100 #header
Класс, атрибут, псевдокласс 10 .button, [type="text"], :hover
Тег, псевдоэлемент 1 div, ::before

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

Правило: Старайтесь обходиться без !important. Если без него не получается, скорее всего, у вас проблема с архитектурой CSS.

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

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

Плохо:

<style>
  .container {
    width: 1200px;
  }
</style>

Хорошо:

<style>
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  @media (max-width: 768px) {
    .container {
      padding: 0 15px;
    }
  }
</style>

И не забудьте про мета-тег viewport в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Лайфхак: Используйте относительные единицы (%, rem, vw) для гибкости. А для изображений задавайте max-width: 100% и height: auto.

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

Даже опытные разработчики иногда допускают опечатки в HTML. Незакрытые теги, неверные атрибуты — все это может привести к неожиданному отображению. Всегда проверяйте код валидатором W3C.

Кроссбраузерность — отдельная боль. Свойства могут работать по-разному в разных браузерах. Используйте префиксы и autoprefixer, но не забывайте проверять вручную.

Пример использования префиксов:

<style>
  .element {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
</style>

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

Правило: Регулярно прогоняйте HTML через валидатор W3C. Это бесплатно и спасает от многих ошибок.

Что в итоге

Верстка — это навык, который приходит с практикой. Избегайте бездумного использования <div>, следите за блочной моделью, понимайте специфичность CSS, не забывайте про адаптивность и проверяйте код валидатором. И помните: даже если что-то пошло не так, всегда можно открыть DevTools и найти ошибку.

Надеюсь, эти советы помогут вам сверстать сайт без лишней головной боли. Удачи!

Студия WNDER