Для элемента header нужно прописывать id или class

Этот вопрос касается best practices в семантическом HTML и CSS-селекторах. Расскажу об обоих подходах и когда их использовать.

Что такое header элемент

Header - это семантический элемент HTML5 для обозначения шапки страницы или секции:

<!-- Шапка всей страницы -->
<header>
  <nav>...</nav>
  <h1>My Site</h1>
</header>

<!-- Или шапка статьи -->
<article>
  <header>
    <h1>Article Title</h1>
    <time>2024-04-02</time>
  </header>
  <p>Content...</p>
</article>

Когда использовать ID

ID нужен когда:

1. Якорь для навигации

<header id="top">
  <h1>Главная</h1>
</header>

<!-- Ссылка на якорь -->
<a href="#top">Вернуться в начало</a>

1. Уникальный идентификатор для JavaScript

<header id="main-header">
  <button id="menu-toggle">Меню</button>
</header>

<script>
const header = document.getElementById('main-header');
const btn = document.getElementById('menu-toggle');

btn.addEventListener('click', () => {
  header.classList.toggle('menu-open');
});
</script>

1. Связь с label или другими элементами

<header id="form-header">
  <h1>Форма регистрации</h1>
</header>

<!-- Использование aria-labelledby -->
<form aria-labelledby="form-header">
  <input type="text" placeholder="Имя">
</form>

ВАЖНО: ID должен быть уникальным на странице!

// НЕПРАВИЛЬНО - несколько ID с одним именем
<header id="header">...</header>
<footer id="footer">...</footer>
<div id="header">...</div> // Ошибка! Дублированный ID

// ПРАВИЛЬНО
<header id="page-header">...</header>
<footer id="page-footer">...</footer>

Когда использовать CLASS

Class нужен когда:

1. Стилизация с CSS (самый частый случай)

<header class="header">
  <nav class="header__nav">
    <a href="/" class="header__logo">Logo</a>
    <ul class="header__menu">
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<style>
.header {
  background: white;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.header__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__menu {
  display: flex;
  list-style: none;
  gap: 2rem;
}
</style>

1. Применение одного стиля к нескольким элементам

<!-- Несколько header с одинаковыми стилями -->
<header class="header header--dark">
  ...
</header>

<header class="header header--light">
  ...
</header>

<style>
.header {
  padding: 1rem;
}

.header--dark {
  background: #333;
  color: white;
}

.header--light {
  background: white;
  color: #333;
}
</style>

1. Модификаторы и состояния

<header class="header header--sticky">
  ...
</header>

<style>
.header {
  transition: all 0.3s ease;
}

.header--sticky {
  position: sticky;
  top: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header.mobile-menu-open {
  height: auto;
}
</style>

BEM нотация (Best Practice)

БЕМ (Block Element Modifier) - популярный подход к именованию классов:

<!-- Правильно -->
<header class="header">
  <nav class="header__nav">
    <a href="/" class="header__logo">Logo</a>
    <ul class="header__menu">
      <li class="header__menu-item">
        <a href="/" class="header__menu-link header__menu-link--active">
          Home
        </a>
      </li>
    </ul>
  </nav>
</header>

<style>
/* Block */
.header { ... }

/* Elements (вложенные элементы блока) */
.header__nav { ... }
.header__logo { ... }
.header__menu { ... }
.header__menu-item { ... }
.header__menu-link { ... }

/* Modifiers (вариации) */
.header__menu-link--active { ... }
.header__menu-link--disabled { ... }
</style>

Архитектурные подходы

1. Utility-first (Tailwind)

<!-- Классы утилиты вместо кастомных классов -->
<header class="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-40">
  <nav class="flex items-center justify-between max-w-7xl mx-auto px-4 py-3">
    <a href="/" class="text-xl font-bold text-gray-900">Logo</a>
    <ul class="flex gap-8 list-none">
      <li><a href="/about" class="text-gray-600 hover:text-gray-900 transition">About</a></li>
      <li><a href="/contact" class="text-gray-600 hover:text-gray-900 transition">Contact</a></li>
    </ul>
  </nav>
</header>

2. Component-based (React, Vue)

// Header.tsx
interface HeaderProps {
  variant?: 'light' | 'dark';
  sticky?: boolean;
}

export function Header({ variant = 'light', sticky = false }: HeaderProps) {
  return (
    <header className={cn(
      'header',
      `header--${variant}`,
      sticky && 'header--sticky'
    )}>
      <nav className="header__nav">
        <a href="/" className="header__logo">Logo</a>
        <ul className="header__menu">
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>
  );
}

/* Header.css */
.header {
  --padding: 1rem;
  --bg: white;
  --text: #333;
  
  padding: var(--padding);
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid #eee;
}

.header--dark {
  --bg: #333;
  --text: white;
}

.header--sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
}

Рекомендации

Используй ID когда:

• Нужна навигация по якорю (#top)
• Нужен JavaScript селектор для уникального элемента
• Нужна связь с ARIA атрибутами
• Элемент действительно уникален на странице

Используй CLASS когда:

• Нужна стилизация (99% случаев)
• Может быть несколько элементов с одинаковыми стилями
• Нужны модификаторы и состояния
• Нужна комбинация классов

Лучшие практики:

<!-- ХОРОШО: ID для якоря, class для стилей -->
<header id="main-header" class="header header--sticky">
  <nav class="header__nav">
    <a href="/" class="header__logo">Logo</a>
    <ul class="header__menu">
      <li class="header__menu-item">
        <a href="/about" class="header__menu-link">About</a>
      </li>
    </ul>
  </nav>
</header>

<!-- ПЛОХО: ID для стилей -->
<header id="my-header-123">
  <style>
    #my-header-123 { ... } /* Высокая специфичность, сложно переиспользовать */
  </style>
</header>

Итог

ID и class имеют разные назначения:

• ID - уникальная ссылка, якоря, ARIA
• Class - стилизация, переиспользование, состояния

Типичная структура:

<header id="page-header" class="header header--main">
  <!-- Идентификация + стилизация -->
</header>

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