В чем разница между class и id?

Разница между class и id в HTML и CSS

Это одна из фундаментальных концепций в web разработке. Class и id — это два способа идентифицировать и стилизировать HTML элементы, но они используются в совершенно разных целях.

1. Уникальность

ID — уникален на странице:

<div id="header">Header</div>
<div id="main-content">Content</div>
<div id="footer">Footer</div>

<!-- НЕ ПРАВИЛЬНО: повторное использование ID -->
<div id="header">Это неправильно!</div>  <!-- Конфликт! -->

Class может использоваться много раз:

<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>

<!-- Правильно! Один класс используется везде -->
<button class="btn btn-primary">Button</button>
<button class="btn btn-secondary">Button</button>

2. Специфичность в CSS

ID имеет НАМНОГО выше специфичность, чем class:

/* Специфичность: (0, 1, 0) — очень высокая */
#header {
  background: red;  /* ВЫИГРЫВАЕТ */
}

/* Специфичность: (0, 0, 1) — низкая */
.header {
  background: blue;  /* ПРОИГРЫВАЕТ */
}

/* Даже 100 классов проигрывают одному ID! */
.card.card-large.card-highlighted.card-special { background: blue; }
#card { background: red; }  /* Красный выигрывает */

Иерархия специфичности:

Inline styles      (style="")          — (1, 0, 0) САМАЯ ВЫСОКАЯ
ID selector        (#id)               — (0, 1, 0)
Class selector     (.class)            — (0, 0, 1)
Element selector   (div, p, span)      — (0, 0, 0) САМАЯ НИЗКАЯ

3. Назначение

ID используется для:

• Уникальных элементов на странице (header, footer, main)
• Якорей для перехода по странице (#section-1)
• JavaScript селекторов (document.getElementById())
• Form элементов (связь label с input через for="id")

<label for="email">Email:</label>
<input id="email" type="email" />

<a href="#section-1">Перейти к разделу</a>
<h2 id="section-1">Раздел 1</h2>

Class используется для:

• Стилизирования (CSS классы)
• Группировки элементов с одинаковым стилем
• JavaScript функциональности (слушатели событий)
• Переиспользуемых компонентов

<!-- Один класс для много элементов -->
<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>

<!-- Несколько классов для одного элемента -->
<button class="btn btn-primary btn-large">Primary Large</button>

4. JavaScript селекторы

ID в JavaScript:

// Быстро и специализировано
const header = document.getElementById('header');

// Современный селектор querySelector
const header = document.querySelector('#header');

// Есть прямой доступ (в глобальном scope, но не рекомендуется)
header.textContent = 'New Header';  // id="header" доступен как переменная

Class в JavaScript:

// Один элемент
const button = document.querySelector('.btn');

// Все элементы с классом
const buttons = document.querySelectorAll('.btn');
buttons.forEach(btn => btn.addEventListener('click', () => {...}));

// Современный способ
const buttons = document.getElementsByClassName('btn');

// Манипуляция классами
button.classList.add('active');
button.classList.remove('disabled');
button.classList.toggle('highlighted');
button.classList.contains('primary');  // true/false

5. HTML атрибуты

ID в HTML:

<!-- Якоря для навигации -->
<h1 id="about">About Us</h1>
<a href="#about">Go to About</a>

<!-- Form элементы -->
<label for="username">Username:</label>
<input id="username" type="text" />

<!-- Script точки входа -->
<div id="root"></div>  <!-- React app mounts here -->
<div id="app"></div>   <!-- Vue app mounts here -->

Class в HTML:

<!-- Кастомные элементы с повторяющимся стилем -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>

<!-- Несколько классов для разных свойств -->
<div class="card card-large card-featured card-dark">
  Featured Card
</div>

<!-- BEM нотация -->
<div class="card card--featured card__header">
  <h3 class="card__title">Title</h3>
</div>

6. Специфичность и масштабируемость

ID приводит к проблемам в больших проектах:

/* PAGE 1 */
#sidebar {
  background: white;
  width: 300px;
}

/* PAGE 2 — хочется другой стиль */
#sidebar {
  background: gray;  /* КОНФЛИКТ! Не может быть двух ID -->
  width: 250px;
}

/* Нужно использовать !important — антипаттерн */
#sidebar { background: gray !important; }

Class решает эту проблему:

.sidebar--light {
  background: white;
  width: 300px;
}

.sidebar--dark {
  background: gray;
  width: 250px;
}

<!-- Page 1 -->
<div class="sidebar sidebar--light"></div>

<!-- Page 2 -->
<div class="sidebar sidebar--dark"></div>

7. Производительность

getElementById самый быстрый:

// Самый быстрый (native browser API)
const el = document.getElementById('header');  // O(1)

// Быстро
const el = document.querySelector('#header');  // O(n)

// Медленнее (ищет во всех элементах)
const el = document.querySelector('.header');  // O(n)
const els = document.querySelectorAll('.header');  // O(n)

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

8. Практические рекомендации

ИСПОЛЬЗУЙ ID ДЛЯ:

<!-- Главные layout элементы -->
<header id="header"></header>
<main id="main"></main>
<footer id="footer"></footer>
<aside id="sidebar"></aside>

<!-- Form элементы (связь label-input) -->
<label for="email">Email:</label>
<input id="email" type="email" />

<!-- Якоря для навигации -->
<h2 id="section-features">Features</h2>

<!-- App точки монтирования -->
<div id="root"></div>

ИСПОЛЬЗУЙ CLASS ДЛЯ:

<!-- Стилизирование -->
<button class="btn btn-primary">Click me</button>
<button class="btn btn-secondary">Click me</button>

<!-- Переиспользуемые компоненты -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>

<!-- Вариации компонентов -->
<button class="btn btn--large btn--disabled">Disabled</button>

<!-- JavaScript функциональность -->
<div class="toggle">Toggle me</div>
<script>
  document.querySelectorAll('.toggle')
    .forEach(el => el.addEventListener('click', toggle));
</script>

9. Современные практики

BEM нотация (CSS методология):

.button { }                    /* Block */
.button__text { }              /* Element */
.button--primary { }           /* Modifier */
.button--primary__text { }     /* Modifier + Element */

/* НИКОГДА не используй ID в BEM */

Не смешивай ID и class:

/* ❌ ПЛОХО */
#button.active { }  /* Высокая специфичность */

/* ✅ ХОРОШО */
.button.active { }  /* Одинаковая специфичность */

Таблица сравнения

┌──────────────────┬───────────────┬──────────────────────┐
│ Характеристика   │ ID            │ Class                │
├──────────────────┼───────────────┼──────────────────────┤
│ Уникальность     │ Уникален      │ Может повторяться    │
│ Специфичность    │ Очень высокая │ Низкая               │
│ Масштабируемость │ Плохо         │ Отлично              │
│ JavaScript       │ Быстро        │ Стандартно           │
│ Использование    │ Редко         │ Часто                │
│ Якоря            │ Да            │ Нет                  │
│ BEM нотация      │ Не используй  │ Используй            │
│ !important       │ Часто нужен   │ Редко нужен          │
└──────────────────┴───────────────┴──────────────────────┘

Итог

ID — уникальный селектор с высокой специфичностью CSS для особых элементов (header, footer, app root). Class — переиспользуемый селектор с низкой специфичностью для стилизирования и функциональности. В современных проектах используй class для стилей (BEM нотация) и ID только для уникальных layout элементов. Избегай ID в CSS, так как это приводит к проблемам специфичности и масштабируемости.