Урок 11. Старый vs Новый: Селекторы CSS

📁 Раздел: Основы CSS ⏱️ Время изучения: ~40 мин 🎯 Сложность: Начальная

#p #h1 #a #li #button #input

⚡ Кратко

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

Сравнение подходов

❌ Старый подход: отдельный id на каждый блок

Чтобы оформить три карточки, для каждой заводят свой id и дублируют правило. Добавили четвёртую карточку — снова правь CSS.

Карточка #card1

Карточка #card2

Карточка #card3

<section id="card1">…</section>
<section id="card2">…</section>
<section id="card3">…</section>

#card1, #card2, #card3 {
  padding: 12px;
  border: 1px solid #d1d5db;
}

✅ Новый подход: один переиспользуемый класс

Один класс .card описывает роль оформления. Сколько бы блоков ни добавили — правило не меняется. Специфичность ниже, переопределять легче.

Карточка .card

<section class="card">…</section>
<section class="card">…</section>
<section class="card">…</section>

.card {
  padding: 12px;
  border: 2px solid #0f766e;
  background: #ecfeff;
}