CSS Variables Learning

Покрокове навчання CSS custom properties (змінних) у форматі урок → завдання → фідбек, керованому Claude Code.

Це навчальний проєкт-курс для самостійного освоєння CSS-змінних (custom properties). Багато онлайн-курсів цю тему пропускають або згадують побіжно — а вона критично важлива для сучасного фронтенду: дизайн-системи, темізація, responsive без дублювань, інтерактивні стилі через JS.

Курс повністю інтерактивний. Claude (асистент) виступає в ролі персонального викладача:

• Готує теорію і практичні завдання
• Підготовляє HTML-розмітку, щоб ти зосередився на CSS
• Перевіряє твої рішення і дає конкретний фідбек
• Веде журнал прогресу і адаптується під твій темп

Курс складається з 7 тематичних уроків і 1 фінального екзамену, що поєднує всі теми в один проєкт.

1. Читаєш lesson.md           ← теорія від Claude
2. Дивишся index.html         ← готова розмітка з класами
3. Відкриваєш solution.css    ← порожній стартовий файл, пишеш у нього стилі
4. Пишеш "перевір 0X"         ← Claude читає твій код
5. Отримуєш фідбек            ← конкретні зауваження + похвала
6. Доробляєш якщо треба
7. Переходиш далі

• Claude робить: теорія (lesson.md), завдання (task.md), HTML-розмітка (index.html), перевірка
• Студент робить: заповнює solution.css (а в уроках 06 і 08 ще solution.js) — вони вже створені порожніми у кожній папці уроку

Це навмисне рішення: тема навчання — CSS-змінні, не верстка. Готова розмітка дозволяє повністю зосередитись на CSS.

css-root-learn/
│
├── CLAUDE.md                        Контекст для Claude (твій профіль, прогрес, конвенції)
├── README.md                        Цей файл — як користуватися курсом
│
└── lessons/
    │
    ├── 01-basics/                   Урок 1 — Основи CSS-змінних
    │   ├── lesson.md                  Теорія: --name, var(), :root
    │   ├── task.md                    Завдання: картка профілю
    │   ├── index.html                 Готова розмітка
    │   └── solution.css               ← порожній стартовий файл, пишеш сюди
    │
    ├── 02-scope-cascade/            Урок 2 — Scope і каскад
    │   ├── lesson.md
    │   ├── task.md
    │   ├── index.html
    │   └── solution.css               ← порожній стартовий файл, пишеш сюди
    │
    ├── 03-fallbacks/                Урок 3 — Fallback-значення
    │   ├── lesson.md
    │   ├── task.md
    │   ├── index.html
    │   └── solution.css               ← порожній стартовий файл, пишеш сюди
    │
    ├── 04-theming/                  Урок 4 — Темізація (light/dark)
    │   ├── lesson.md
    │   ├── task.md
    │   ├── index.html
    │   └── solution.css               ← порожній стартовий файл, пишеш сюди
    │
    ├── 05-calc-and-math/            Урок 5 — calc() і скейли
    │   ├── lesson.md
    │   ├── task.md
    │   ├── index.html
    │   └── solution.css               ← порожній стартовий файл, пишеш сюди
    │
    ├── 06-with-js/                  Урок 6 — Взаємодія з JavaScript
    │   ├── lesson.md
    │   ├── task.md
    │   ├── index.html
    │   ├── solution.css               ← порожній стартовий файл, пишеш сюди
    │   └── solution.js                ← порожній стартовий файл, пишеш сюди
    │
    ├── 07-responsive/               Урок 7 — Змінні в media queries
    │   ├── lesson.md
    │   ├── task.md
    │   ├── index.html
    │   └── solution.css               ← порожній стартовий файл, пишеш сюди
    │
    └── 08-final-exam/               Фінальний екзамен — Дашборд
        ├── exam.md                    Завдання-сумарій з чек-листом по всіх темах
        ├── index.html
        ├── solution.css               ← порожній стартовий файл, пишеш сюди
        └── solution.js                ← порожній стартовий файл, пишеш сюди

Що означають типи файлів:

• lesson.md — теоретичне пояснення з прикладами коду, типовими помилками і резюме
• task.md — практичне завдання з критеріями виконання і бонусними пунктами
• index.html — готова HTML-структура з потрібними класами; редагувати не треба
• solution.css / solution.js — твої файли з рішенням; HTML уже їх підключає
• exam.md — для фінального екзамену; містить чек-лист по всіх 7 темах

Що вчиш:

• Що таке custom properties і чим вони відрізняються від змінних Sass
• Синтаксис оголошення: --name: value;
• Використання: var(--name)
• Селектор :root як глобальний scope
• Правила іменування і типові помилки

Завдання: Картка профілю з 6 обов'язковими змінними (фон, текст, акцент, відступи).

Ключові концепції: --, var(), :root, kebab-case, повторне використання значень.

Що вчиш:

• Як змінні успадковуються від батька до нащадків
• Локальний scope: оголошення змінних на компоненті
• Перевизначення на нащадку через каскад
• Чому це найкоротший шлях до варіантів компонента
• Правила специфічності для змінних

Завдання: Три варіанти картки (звичайна, success, danger). Стилі картки пишуться один раз, варіанти створюються виключно перевизначенням змінних.

Ключові концепції: успадкування, локальний scope, варіанти без дублювання.

Що вчиш:

• Синтаксис var(--name, fallback)
• Що буває, якщо змінна не оголошена
• Ланцюжкові fallback'и: var(--a, var(--b, red))
• Коли fallback не спрацює (некоректне значення ≠ відсутнє)
• Кейс опційної кастомізації через інлайн style="--name: value"

Завдання: Кнопки з кастомізацією через fallback'и. Жодних змінних у :root — усі значення приходять або з fallback'ів, або з модифікаторів, або з інлайн-стилів.

Ключові концепції: значення за замовчуванням, безпечні стилі, перевикористовувані компоненти.

Що вчиш:

• Як зробити дві теми через перевизначення набору змінних
• Селектор [data-theme="dark"] vs клас vs prefers-color-scheme
• Семантичні імена змінних (--bg-surface) vs імена за кольором (--white)
• Які властивості зазвичай темізують, а які ні
• Best-practice: prefers-color-scheme як дефолт + явний перемикач

Завдання: Сторінка-блог з двома темами. Перемикається в DevTools зміною атрибута data-theme (без JS — це урок про CSS).

Ключові концепції: темізація без дублювань, семантичні імена, decoupling стилів від теми.

Що вчиш:

• calc() всередині var() — арифметика зі змінними
• Правила синтаксису (пробіли навколо +/-, множення тільки на безрозмірне число)
• Побудова типографічного скейлу з одного --font-base і --type-ratio
• Побудова spacing-скейлу з --space-base
• Знайомство з min(), max(), clamp() для responsive

Завдання: Дизайн-система з типографічним і spacing-скейлами. Зміна однієї базової змінної має пропорційно змінити всі похідні.

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

Що вчиш:

• Чим CSS-змінні відрізняються від Sass-змінних (рантайм vs preprocess-time)
• getComputedStyle(el).getPropertyValue('--name') — читання
• el.style.setProperty('--name', value) — запис
• el.style.removeProperty('--name') — видалення
• Найкращий патерн для тем: JS міняє атрибут, CSS робить решту
• Збереження вибору в localStorage
• Тонкощі: значення як рядок, обмеження getComputedStyle за продуктивністю

Завдання: Інтерактивна панель з color-пікером для акценту, кнопкою перемикання теми і кнопкою скидання. Стан зберігається між перезавантаженнями.

Ключові концепції: реактивні стилі, інтерактивність без переписування CSS, persistent UI state.

Що вчиш:

• Чому повторювати правила в кожному @media — антипаттерн
• Перевизначення змінних на :root всередині media queries
• Як стилі компонентів пишуться один раз
• Mobile-first vs desktop-first підхід
• Коли clamp() краще за media queries
• Контейнер-queries (@container) як майбутнє responsive

Завдання: Адаптивний лендінг з 6 картками: 1 колонка на мобілі, 2 на планшеті, 3 на десктопі. Жодного media query для конкретного селектора — тільки на :root.

Ключові концепції: DRY responsive, mobile-first, дискретні (@media) vs плавні (clamp) адаптації.

Що демонструєш: Усі попередні теми разом в одному проєкті.

Завдання: Реалістичний дашборд з:

• Топбаром з контролами (color-picker, theme toggle, reset)
• Hero-секцією
• Трьома stat-картками з модифікаторами (primary / success / warning)
• Responsive-грідом постів (1/2/3 колонки)
• Темізацією (light/dark)
• Скейлами через calc()
• JS-логікою з localStorage
• Перевизначенням змінних у media queries

Чек-лист на 25+ пунктів, оцінка по балах. Це твоя «фінальна перевірка» володіння темою.

Усі команди пиши прямо в чат з Claude:

Якщо стоп — пиши вільним текстом. Claude розуміє контекст і може допомогти, навіть якщо команда не з цього списку.

1. Відкрий проєкт у Claude Code:

   cd "css-root-learn"
   claude

2. Перейди в папку першого уроку:

   lessons/01-basics/
   

3. Прочитай теорію — lesson.md

4. Прочитай завдання — task.md

5. Глянь HTML — index.html, щоб зрозуміти які класи доступні

6. Відкрий solution.css у тій самій папці (він уже існує, поки порожній) і пиши стилі

7. Відкрий index.html у браузері (просто подвійний клік) — побач результат

8. Як готово — пиши Claude: перевір 01

9. Отримай фідбек, доробляй якщо треба

10. Переходь до наступного уроку

lesson.md — це не довідник, а пояснення з мотивацією. Якщо одразу йти в task.md, можна виконати завдання механічно і не зрозуміти чому. CSS-змінні — це не синтаксис, це підхід до організації стилів.

Половина цінності курсу — в самостійному наборі коду і помилках, які ти зробиш. Якщо застряг — спершу спробуй сам, потім питай Claude. Готові відповіді з Stack Overflow дадуть результат, але не дадуть розуміння.

Кожне завдання заохочує робити маленькі експерименти: змінити значення змінної в DevTools, додати/прибрати атрибут, ресайзнути вікно. Це найшвидший спосіб зрозуміти, як працює механізм.

У більшості завдань є необов'язкові бонусні пункти (prefers-color-scheme, clamp(), ланцюжкові fallback'и). Це не складніше, ніж основне завдання, але охоплює сценарії, з якими реально стикаєшся в продакшені.

Спершу пройдись по чек-листу в task.md сам — частину помилок ти знайдеш швидше за Claude. Це теж навичка: вміти перевіряти свій код по специфікації.

Якщо в процесі зрозумів, що структура CSS вийшла кривою — стерти і переписати чистіше нормально. Чистий код важливіший за збережений час.

Після фінального екзамену ти будеш впевнено володіти CSS-змінними у всіх типових сценаріях. Подальші напрямки:

• CSS-in-JS — фреймворки типу styled-components теж використовують custom properties під капотом
• Дизайн-токени — як великі компанії будують design systems (Material Design, Atlassian, IBM Carbon)
• Container queries — @container для компонент-орієнтованого responsive
• CSS @layer — керування каскадом і специфічністю
• Tailwind CSS / UnoCSS — як утилітарні фреймворки використовують змінні для тем

Можеш попросити Claude додати урок на будь-яку з цих тем — структура курсу гнучка.

• HTML/CSS: semantic HTML5, modern CSS (без префіксів — підтримка змінних 97%+ браузерів)
• JS: vanilla, без фреймворків. ES6+ синтаксис
• Інструменти не потрібні: жодного npm, build-кроку, dev-сервера. Просто відкривай index.html подвійним кліком
• Браузер: будь-який сучасний (Chrome, Firefox, Safari, Edge — всі підтримують custom properties давно)

Курс — open source. Якщо знайшов помилку, неточність або хочеш запропонувати додатковий урок:

• Відкрий issue на GitHub з описом
• Або зроби fork → правки → pull request
• Покращення вітаються: уточнення в теорії, додаткові завдання, переклади на інші мови

Цей проєкт ліцензований під MIT License — повний текст у файлі LICENSE.

Коротко: можеш вільно використовувати, копіювати, модифікувати і поширювати — для особистих, навчальних чи комерційних цілей. Єдина вимога — зберегти текст ліцензії при копіюванні.

Якщо знайдеш помилку у завданні чи теорії, або хочеш запропонувати додатковий урок — просто скажи Claude про це у чаті.