Наслідування кольору для тегу <a> : як писати чистий та гнучкий CSS

Привіт:) У цій замітку покажу яким чином унаслідується колір для тегу <a>.

Коли ми працюємо з посиланнями всередині списків або карток, часто виникає потреба змінити їхній колір відповідно до батьківського контейнера. Проте спосіб, яким ми це робимо, безпосередньо впливає на підтримку та чистоту коду.

Розглянемо стандартну структуру:

<ul>
  <li class="link">
    <a href="#">Текст посилання</a>
  </li>
</ul>

Традиційний підхід та його недоліки

Зазвичай розробники використовують селектор за тегом, щоб змінити колір посилання:

.link a {
   color: red;
}

Хоча цей код працює, він має кілька мінусів:

1. Складність підтримки. Вам доводиться прописувати стилі для кожного окремого випадку (наприклад, .footer a, .sidebar a, .nav a).
2. Селектори за тегом. У сучасній верстці (особливо в методологіях на кшталт БEM) використання селекторів за типом елемента вважається поганою практикою, оскільки це підвищує специфічність і ускладнює перевизначення стилів.

Елегантне рішення: властивість inherit

Замість того, щоб вказувати колір безпосередньо для кожного посилання, ми можемо змусити всі теги <a> на сайті "слухатися" свого батьківського елемента.

Для цього використовується значення inherit (наслідування).

Крок 1: Глобальне налаштування

Додайте цей код у ваш базовий файл стилів:

a {
   color: inherit;
   text-decoration: none; /* Опціонально: прибираємо підкреслення */
}

Крок 2: Керування кольором через батька

Тепер вам достатньо змінити колір лише у батьківського класу:

.link {
  color: red;
}

Тепер для всіх посилань, що знаходяться у блоці з класом .link, автоматично буде застосовуватися червоний колір.

Чому це зручно? (Приклади)

Тематичні блоки

Уявіть, що у вас є світлий та темний блоки. Замість того, щоб писати стилі для посилань у кожному з них, ви просто міняєте колір тексту самого блоку:

.dark-section {
  color: white; /* Посилання стануть білими автоматично */
}

.light-section {
  color: black; /* Посилання стануть чорними автоматично */
}

Ховер-ефекти

Використання inherit дозволяє створювати лаконічні ефекти при наведенні:

.card {
  color: grey;
  transition: color 0.3s;
}

.card:hover {
  color: blue; /* Колір посилання всередині картки теж зміниться на синій */
}

Висновок

Використання color: inherit для посилань — це підхід, що базується на природній ієрархії CSS. Це робить вашу верстку більш передбачуваною, зменшує кількість коду та дозволяє легко керувати палітрою сайту через високорівневі класи.