Группирование селекторов: применение нескольких правил одним стилем

Зачем группировать селекторы? 🤔

Когда пишешь CSS, часто приходится повторять одни и те же свойства для разных элементов. Например:

h1 {
  color: #2c3e50;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 20px;
}

h2 {
  color: #2c3e50;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 15px;
}

h3 {
  color: #2c3e50;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 10px;
}

Видишь повторения? Это неэффективно и усложняет поддержку кода. Группировка селекторов решает проблему!

Как группировать селекторы? ️

Просто перечисляешь нужные селекторы через запятую и применяешь к ним общие стили:

h1, h2, h3 {
  color: #2c3e50;
  font-family: 'Roboto', sans-serif;
}

h1 { margin-bottom: 20px; }
h2 { margin-bottom: 15px; }
h3 { margin-bottom: 10px; }

Теперь:
- Общие свойства (color, font-family) заданы один раз.
- Уникальные свойства (margin-bottom) остаются у каждого элемента.

💡 Совет: Группируй только те селекторы, которые действительно используют одинаковые стили. Не стоит объединять всё подряд — это может усложнить чтение кода.

Где это особенно полезно? 🎯

1. Сброс стилей браузера

Часто нужно «обнулить» стандартные отступы и списки:

body, h1, h2, h3, p, ul, ol {
  margin: 0;
  padding: 0;
}

2. Оформление кнопок

Если у нескольких кнопок общий стиль:

.btn-primary, .btn-secondary, .btn-outline {
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.btn-primary { background: #3498db; color: white; }
.btn-secondary { background: #2ecc71; color: white; }
.btn-outline { border: 2px solid #3498db; background: transparent; }

3. Анимации и состояния

Например, одинаковый эффект при наведении для ссылок и кнопок:

a:hover, button:hover, .card:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

Ошибки, которых стоит избегать

❌ Слишком большие группы

Не стоит делать так:

/* Плохо: слишком обширная группа */
header, .main-content, footer, .sidebar, .card, .btn {
  font-family: 'Arial', sans-serif;
}

Лучше разбить на логические части:

/* Хорошо: осмысленное разделение */
body, .card, .btn {
  font-family: 'Arial', sans-serif;
}

❌ Путаница с вложенными селекторами

Группировка работает только на одном уровне. Например:

/* Не сработает: */
article h1, h2 { ... }  /* Это не группировка h1 и h2, а два разных правила! */

/* Правильно: */
article h1, article h2 { ... }

Практика: улучшаем реальный код 🔥

Было:

.nav-link {
  color: #3498db;
  text-decoration: none;
  padding: 5px 10px;
}

.footer-link {
  color: #3498db;
  text-decoration: none;
  padding: 5px 10px;
}

.social-link {
  color: #3498db;
  text-decoration: none;
  padding: 5px 10px;
}

Стало:

.nav-link, .footer-link, .social-link {
  color: #3498db;
  text-decoration: none;
  padding: 5px 10px;
}

/* Дополнительные уникальные стили */
.nav-link { border-bottom: 2px solid transparent; }
.social-link { font-size: 1.2em; }

Результат:
- Код стал короче и чище.
- Изменения в общих стилях вносятся в одном месте.

Итоги

Группировка селекторов — это:
✅ Экономия времени — меньше повторяющегося кода.
✅ Удобство поддержки — правки в одном месте, а не в десяти.
✅ Читаемость — код становится структурированнее.

Попробуй применить этот подход в своём проекте и почувствуй разницу! 🚀

📺 Если хочешь глубже разобрать тему, загляни на YouTube-канал Данилы Бежина — там есть отличные разборы CSS-приёмов!