Модуль 24

CSS змінні (custom properties)

Ось готовий урок, створений за твоїм майстер-промптом.

🎨 УРОК: CSS Змінні (Custom Properties) — Магія керування хаосом

Привіт, друзі! Це CS50 (умовно 😉), і сьогодні ми поговоримо про те, як не збожеволіти, коли ваш проект розростається до тисяч рядків коду.

1. 🔥 Вступ: Проблема та мотивація

Уявіть ситуацію. Ви працюєте над величезним інтернет-магазином. Дизайнер обрав дуже специфічний відтінок синього для бренду — #0056b3. Ви сумлінно використали цей колір для кнопок, посилань, рамок, іконок та підкреслень. Усього 500 разів у 10 різних файлах.

За день до запуску приходить клієнт і каже: "Знаєте, цей синій трохи сумний. Давайте зробимо його яскраво-фіолетовим (#6f42c1)!"

Ваші дії? 1. Відкрити пошук (Ctrl+F) і робити "Find & Replace"? А якщо ви випадково заміните синій колір там, де не треба (наприклад, у фотографії товару або в іншій частині коду)? 2. Міняти вручну кожен рядок? (Прощавай, вихідні).

Риторичне питання: Хіба не було б круто, якби ми могли змінити колір в одному місці, і він автоматично оновився б на всьому сайті?

Аналогія: "Майстер-рубильник"

Уявіть, що у вашому будинку кожна лампочка підключена до окремого дроту, який йде на електростанцію. Щоб вимкнути світло, треба дзвонити туди 50 разів. Це — старий CSS. CSS Змінні — це як головний рубильник у вашій квартирі. Клац — і все світло змінилося.

Без цієї теми ви будете писати код, який неможливо підтримувати. З нею — ви стаєте архітектором, а не різноробом.

2. 🧠 Теоретична база (Як це працює під капотом)

CSS змінні (правильна назва — Custom Properties) — це контейнери для збереження значень, які можна використовувати повторно.

Як це виглядає?

Синтаксис дуже схожий на звичайні властивості CSS, але з однією особливістю.

  1. Оголошення (Створення): Ім'я змінної обов'язково починається з двох дефісів --.
  2. Використання: Ми використовуємо функцію var(), щоб дістати значення.
element {
  --main-color: red;  /* Оголошення */
  color: var(--main-color); /* Використання */
}

Де їх зберігати? (Scope / Область видимості)

Це найважливіше. * Якщо ви хочете, щоб змінна була доступна всюди на сайті, ви кладете її в :root. Це як глобальна змінна в C або Python. :root відповідає тегу <html>, тобто найвищому рівню. * Якщо ви оголосите змінну всередині .card, вона буде видна тільки всередині карток.

Що треба запам'ятати залізно:

CSS змінні підпорядковуються правилам каскаду (Cascading). Якщо ви перевизначите змінну нижче по коду або всередині конкретного елемента, нове значення "переможе" старе.

3. 🧪 Приклади (Від простого до реального)

Приклад 1: "Hello World" у світі змінних

Давайте просто пофарбуємо заголовок.

❓ Питання до вас: Що станеться, якщо я напишу цей код?

:root {
  --my-favorite-color: tomato;
}

h1 {
  color: var(--my-favorite-color);
}

Відповідь: Усі h1 стануть кольору tomato. Просто, правда?

Приклад 2: Реальний кейс (Кнопки)

Зазвичай у нас є основний колір (Primary) і колір тексту.

:root {
  --primary: #007bff; /* Синій */
  --text-light: #ffffff;
}

.btn {
  background-color: var(--primary);
  color: var(--text-light);
  padding: 10px 20px;
  border: 1px solid var(--primary); /* Рамка того ж кольору */
}

.btn:hover {
  /* Тут ми можемо трохи схитрувати з фільтрами, 
     але поки залишимо так для простоти */
  opacity: 0.8;
}

Чому це круто? Якщо ми змінимо --primary в одному місці, зміняться і фон кнопки, і її рамка.

Приклад 3: "Магія" (Темна тема)

Ось тут починається справжня сила. Ми можемо змінювати значення змінних залежно від умов!

❓ Питання: Що буде, якщо ми додамо клас .dark-mode на <body>, і всередині нього змінимо значення тих самих змінних?

/* Стандартні (світлі) кольори */
:root {
  --bg-color: white;
  --text-color: black;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: 0.3s; /* Щоб перехід був плавним */
}

/* Перевизначення для темної теми */
body.dark-mode {
  --bg-color: #333;
  --text-color: #f0f0f0;
}

Результат: Вам не треба писати нові стилі для кожного елемента (h1, p, div). Ви просто змінили значення змінних на рівні body, і завдяки каскаду весь сайт перефарбувався.

4. 🛠 Практична частина

Час забруднити руки кодом! Відкривайте редактор (VS Code, CodePen).

🔹 Завдання 1: База

Створіть :root з трьома змінними: 1. --main-bg: світло-сірий (#f4f4f4). 2. --card-bg: білий (#fff). 3. --accent: ваш улюблений яскравий колір. Застосуйте їх до body (фон), div (картка) і button (кнопка).

🔹 Завдання 2: Локальний бунт

Створіть клас .special-card. Всередині цього селектора перевизначте змінну --card-bg на чорний, а --accent на білий. Перевірте: чи змінилися інші картки? Чому ні?

🔹 Завдання 3: План "Б" (Fallback)

Що буде, якщо змінна не існує? Спробуйте написати: color: var(--non-existent-variable, red);. Видаліть змінну (або зробіть помилку в назві) і подивіться, чи спрацює червоний колір. Це ваш "запасний парашут".

🔹 Завдання 4: Математика

Змінні можна комбінувати з calc(). Створіть змінну --base-size: 16px. Задайте розмір шрифту заголовка як calc(var(--base-size) * 2). Змініть --base-size на 20px і подивіться, як масштабується все.

🔹 Завдання 5: Міні-кейс "Світлофор"

У вас є три div-кола. Зробіть одну змінну --lamp-color. Задайте кожному колу свій стиль (атрибут style="..." прямо в HTML або окремі класи), змінюючи лише значення цієї однієї змінної локально для кожного кола (червоний, жовтий, зелений).

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі, дивлячись на CSS змінні?

❌ Типова помилка новачка: Назви кольорів

:root {
  --red: #ff0000; 
}
.error { color: var(--red); }

Чому це погано? Завтра дизайнер скаже: "Помилки мають бути помаранчевими". Ви змінюєте код на #orange, але змінна досі називається --red. Це збиває з пантелику!

✅ Як думає профі: Семантичні назви (За змістом)

:root {
  --error-color: #ff0000;
  --brand-color: #0056b3;
}

Тепер, якщо помилка стане помаранчевою, змінна --error-color просто отримає нове значення. Назва змінної описує функцію, а не вигляд.

Порада: Використовуйте змінні для всього, що повторюється більше 2 разів: кольори, відступи (--spacing-unit: 8px), радіус заокруглення, шрифти. Це робить вашу дизайн-систему цілісною.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? 1. Зрозуміли, що "хардкодити" кольори — це шлях до болю. 2. Навчилися створювати --змінні в :root (глобально) і локально. 3. Побачили, як легко робити теми (Light/Dark mode) зміною значень, а не переписуванням стилів. 4. Навчилися називати змінні правильно (семантично).

Тепер ви вмієте: Керувати стилем усього сайту з одного місця. Ви створили свій "Центр керування польотами".

🔍 Тизер: А знаєте, що найкрутіше? CSS змінні може бачити та змінювати JavaScript. У наступних уроках ми навчимося робити так, щоб користувач натискав кнопку, JS змінював значення змінної --hue, і сайт миттєво змінював колірну гаму без перезавантаження.

А поки що — практикуйтеся! Це був CS50. Побачимось! 👋

← До списку уроків Наступний урок →