Visual Studio Code (VS Code) — це безкоштовний, легкий кросплатформний редактор вихідного коду, розроблений компанією Microsoft для операційних систем Windows, macOS та Linux. Завдяки своїй швидкодії, гнучкості та величезній екосистемі розширень, VS Code став фактичним індустріальним стандартом серед веб-розробників та інженерів програмного забезпечення.

Архітектура та технологічний стек

На відміну від класичних «важких» інтегрованих середовищ розробки (Integrated Development Environment, IDE), таких як Visual Studio або продукти JetBrains, VS Code проектувався як швидкий редактор коду з можливістю модульного розширення до повноцінного середовища розробки.

• VS Code побудований на базі фреймворку Electron, який використовує Chromium (веб-движок для рендерингу інтерфейсу) та Node.js (для роботи з файловою системою та виконання скриптів). Це дозволяє редактору поєднувати гнучкість веб-технологій (HTML, CSS, TypeScript) з високою швидкістю роботи нативного додатка.
• Серцем текстового редактора є движок Monaco, який забезпечує плавне прогортання, миттєве підсвічування синтаксису та роботу з тисячами рядків коду без затримок.

Ключовий функціонал

VS Code «з коробки» має потужний набір інструментів, який мінімізує потребу в сторонньому софті:

• IntelliSense (Розумне автодоповнення). Технологія, яка аналізує контекст написаного коду і пропонує варіанти завершення функцій, тегів чи змінних, а також показує типи параметрів та документацію безпосередньо під час введення тексту.
• Вбудований Git-клієнт. Надає можливість виконувати базові операції контролю версій (коміти, пуші, створення гілок, вирішення конфліктів злиття) через графічний інтерфейс користувача (GUI) без використання командного рядка.
• Інтегрований термінал. Наявність вбудованої консолі (PowerShell/CMD на Windows, Bash/Zsh на Linux/macOS) надає розробнику можливість запускати локальні сервери, збірки проєктів чи Git-команди, не виходячи з вікна редактора.

Модульність та екосистема розширень

Головна сила VS Code полягає в Marketplace — магазині розширень (Extensions), який допомагає кастомізувати редактор під будь-яку технологію. Розширення поділяються на кілька категорій:

1. Інструменти автоматизації та форматування:
   • Prettier — автоматично вирівнює відступи, розставляє дужки та крапки з комою відповідно до стандартів чистого коду.
   • Live Server — запускає локальний веб-сервер, який автоматично оновлює сторінку в браузері в реальному часі при кожній зміні HTML/CSS/JS коду.
2. Покращення інтерфейсу:
   • Auto Rename Tag — автоматично змінює парний тег HTML/XML, якщо розробник редагує відкриваючий або закриваючий тег.
   • Material Icon Theme — додає наочні іконки для різних типів файлів та папок в дереві проєкту, спрощуючи навігацію.

ШІ-трансформація

Сучасний етап розвитку VS Code характеризується глибокою інтеграцією штучного інтелекту в робочий процес інженера (AI-Workflow).

• ШІ-інструменти (такі як GitHub Copilot, Codeium, Claude Code) вбудовуються безпосередньо в інтерфейс. Вони здатні аналізувати відкриті файли проєкту та генерувати код на основі коментарів розробника або автодописувати логічні конструкції в реальному часі.
• Вікна чату (Chat Interfaces)надають можливість вести діалог з ШІ безпосередньо в бічній панелі VS Code. Розробник може виділити фрагмент коду і попросити ШІ:
  1. Пояснити логіку роботи (корисно для навчання).
  2. Провести рефакторинг (оптимізувати структуру, винести змінні).
  3. Знайти та виправити баг (генерація виправлень та опис помилки).

Вибір розширень для Visual Studio Code залежить від технологічного стека, але є золотий набір інструментів, який повинен мати кожен сучасний веб-інженер. Цей набір поділяється на базову автоматизацію та ШІ-асистентів, які кардинально прискорюють написання коду.

ШІ-асистенти

• GitHub Copilot або Codeium — найкращі інструменти для автодоповнення коду в реальному часі та контекстного чату в бічній панелі. Вони пишуть функції, шукають баги та пояснюють чужий код.
• Tabnine — альтернатива, якщо потрібен локальний ШІ, який не надсилає код на зовнішні сервери.

ШІ-асистенти (GitHub Copilot/Codeium) — інтегруються безпосередньо в інтерфейс редактора коду. Вони працюють за двома сценаріями: Inline Completion (автодописування коду на основі контексту під час друкування) та Chat Interface (вікно розмови, де можна давати інструкції на генерацію цілих блоків або рефакторинг наявного коду за допомогою промптів).

Веб-розробка (HTML/CSS/JavaScript)

• Live Server — запускає локальний сервер в один клік. Сторінка в браузері автоматично оновлюється щоразу, як натиснути Ctrl+S в VS Code.
• Auto Rename Tag — при зміні відкриваючого тегу HTML (наприклад, <div> на <section>), розширення автоматично зміняє і закриваючий парний тег. Рятує від рутинних помилок.
• Tailwind CSS IntelliSense — якщо до сторінки підключено Tailwind. Він підказує назви класів прямо під час введення, показує колірні палітри та CSS-еквіваленти класів.

Форматування та якість коду

• Prettier - Code formatter — автоматично вирівнює відступи, розставляє крапки з комою та лапки. Робить код ідеально структурованим і чистим.
• SonarLint або ESLint — це персональні QA-інспектори. Вони підсвічують підозрілі місця в коді, потенційні баги та застарілі конструкції під час написання коду.
• Error Lens — підсвічує помилки та попередження прямо в рядку коду (inline), детально розписуючи, що саме не так, без потреби наводити курсор чи заглядати в термінал.

Продуктивність та Git

• GitLens — Git supercharged — показує навпроти кожного рядка коду, хто, коли і яким комітом його змінив. Незамінна річ для командної роботи.
• Path Intellisense — автоматично підказує правильні шляхи до файлів (картинок, стилів, скриптів), коли їх прописують в атрибутах src="" чи href="".

Візуальна кастомізація

• Material Icon Theme — заміняє стандартні іконки файлів в дереві проєкту на красиві, кольорові та інтуїтивно зрозумілі значки для кожного формату (.html, .css, .js, .json).
• Community Material Theme або One Dark Pro — топові темні теми для зменшення навантаження на очі під час тривалого кодингу.

Не потрібно встановлювати всі розширення одночасно. VS Code побудований на базі Electron (Chromium + Node.js), і якщо встановити 50 плагінів, він почне споживати багато оперативної пам'яті та довше запускатися.

Варто почати з базової трійки: Live Server, Prettier та будь-якого ШІ-асистента (Codeium/Copilot). Цього вистачить, щоб закривати 90% навчальних та комерційних завдань. Інші роширення встановлюють відповідно до поточного завдання

• <header> — верхня або вступна частина сторінки. Зазвичай містить логотип компанії, назву сайту, навігаційне меню, пошуковий рядок або короткий вступний текст.
• <nav> — область навігації сайту. Використовується для групування основних навігаційних посилань: головного меню, меню розділів сайту, списку категорій та навігаційних панелей. Наявність тегу <nav> допомагає допоміжним технологіям швидко знаходити блоки навігації.
• <main> — основний унікальний вміст сторінки. Цей тег містить центральний контент документа. На одній HTML-сторінці повинен бути лише один елемент <main>, оскільки він позначає головну частину контенту.
• <section> — логічний тематичний розділ документа. Використовується для об'єднання пов'язаного контенту в окремі частини, наприклад «Про нас», «Послуги», «Відгуки», «Контакти». Кожна секція повинна мати власний заголовок (<h2>–<h6>), який описує її зміст.
• <article> — незалежний самодостатній фрагмент контенту. Це може бути новина, публікація в блозі, коментар користувача, картка товару або запис на форумі. Вміст <article> може існувати окремо від сторінки та бути поширеним або використаним в іншому контексті.
• <aside> — додатковий або другорядний вміст. Найчастіше використовується для бічних панелей, рекламних блоків, списків популярних статей, тегів, додаткових посилань або іншої інформації, яка пов'язана з основним контентом, але не є його ключовою частиною.
• <footer> — нижня частина сторінки або розділу. Зазвичай містить інформацію про авторські права, контактні дані, посилання на політику конфіденційності, додаткову навігацію, посилання на соціальні мережі та інші службові відомості.

CSS Flexbox — гнучке розташування елементів в одному напрямку

CSS Flexible Box Layout (Flexbox) призначений для створення одновимірних макетів, в яких елементи розташовуються або в рядок, або в стовпець. Flexbox надає можливість легко керувати вирівнюванням, порядком елементів, відстанями між ними та їхньою поведінкою при зміні розміру екрану.

Найчастіше Flexbox застосовується для створення:

• горизонтальних навігаційних меню;
• панелей інструментів;
• груп кнопок;
• карток товарів в рядок;
• форм введення даних;
• компонентів інтерфейсу, елементи яких повинні рівномірно розподілятися за шириною або висотою.

Основною перевагою Flexbox є його здатність автоматично адаптувати розташування елементів залежно від доступного простору. Наприклад, меню може автоматично розтягуватися по всій ширині сторінки, а блоки — переноситися на новий рядок на малих екранах. Це значно спрощує створення адаптивного дизайну без використання складних обчислень ширини елементів.

CSS Grid — потужна система двовимірних сіток

CSS Grid Layout є інструментом для побудови двовимірних структур, де розробник може одночасно керувати рядками та стовпцями макета. На відміну від Flexbox, який працює лише в одному напрямку, Grid надає можливість точно визначати положення кожного елемента в межах сітки.

CSS Grid особливо ефективний при створенні:

• загальної структури вебсторінки (шапка, бічна панель, основний контент, підвал);
• складних адаптивних галерей зображень;
• інформаційних панелей;
• багатоколонкових макетів;
• складних компонентів з різними областями розташування контенту.

Grid надає можливість визначати кількість стовпців і рядків, їхню ширину, відстані між ними та правила автоматичного розміщення елементів. Завдяки цьому можна створювати складні макети з мінімальною кількістю HTML-коду, не використовуючи додаткові обгортки або сторонні CSS-фреймворки.

CSS Custom Properties — змінні для централізованого керування стилями

Ще одним важливим інструментом сучасного CSS є CSS Custom Properties, або CSS-змінні. Вони надають можливість зберігати значення, які багаторазово використовуються в різних частинах стилів, і керувати ними з одного місця.

Зазвичай глобальні змінні оголошуються в спеціальному селекторі :root, який представляє кореневий елемент документа. В цьому блоці можна зберігати:

• основні та допоміжні кольори інтерфейсу;
• кольори тексту та фону;
• параметри шрифтів;
• розміри відступів і проміжків між елементами;
• радіуси заокруглення;
• значення тіней та анімацій.

Наприклад, замість багаторазового використання однакового значення кольору в десятках CSS-правил, розробник задає змінну один раз і використовує її у всьому проєкті. Якщо в майбутньому необхідно змінити фірмовий колір сайту, достатньо змінити лише значення відповідної змінної.

Особливо важливими CSS-змінні є при реалізації сучасних функцій інтерфейсу, таких як перемикання між світлою та темною темами. Для цього достатньо перевизначити набір змінних для певного класу або атрибута, не переписуючи всі CSS-правила.

Основний синтаксис

CSS
:root {
    --primary-color: #0066ff;     /* основний синій */
    --text-color: #333333;        /* колір тексту */
    --font-size-base: 16px;       /* базовий розмір шрифту */
    --border-radius: 8px;         /* заокруглення */
    --container-width: 1200px;    /* максимальна ширина контенту */
}
.button {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 24px;
    border-radius: var(--border-radius);
}
.card {
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
}

Використання CSS змінних є значно ефективніше, ніж просто писати значення. Отримується багато переваг: легко підтримувати проєкт, швидко змінювати тему (світла/темна), робиться менше помилок, код стає чистішим і зрозумілішим.

• Без змінних (старий підхід):

CSS
h1 { color: #0066ff; }
.button { background: #0066ff; }
.link { color: #0066ff; }

• Зі змінними (сучасний підхід):

Змінили --primary-color на #ff5500 → всі елементи автоматично оновились.

Архітектура CSS-змінних

Для початківців як правильно організувати рекомендую таку структуру:

CSS
:root {
    /* 1. Кольори */
    --color-primary: #0066ff;
    --color-secondary: #ff5500;
    --color-text: #222222;
    --color-text-light: #666666;
    --color-background: #ffffff;
    --color-border: #eeeeee;

    /* 2. Типографіка */
    --font-family-base: 'Inter', system-ui, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;

    /* 3. Відступи та розміри */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* 4. Радіуси та тіні */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
}											

В Інтернеті історично склалося таке поняття як «безпечні» веб-шрифти. Безпечним шрифтом можна назвати шрифт, який є стандартним для всіх операційних систем. Нажаль, абсолютно безпечних шрифтів не існує. Окремі шрифти можна назвати безпечними з деякими обмовками.

Основою для визначення «безпечних» шрифтів послужили шрифти найбільш поширеної операційної системи Windows, які використовуються в інших операційних системах.

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Ці шрифти є в кожного користувача Windows, Mac OS і у переважної більшості користувачів Unix/Linux.

Для того, щоб текст сторінки міг відображатися однаково за задумом дизайнера в будь-якій операційній системі, існує можливість задавати кілька шрифтів для відображення тексту, тобто застосувати комбінації безпечних шрифтів - безпечні лінійки шрифтів.

p {
font-family: Tahoma, Verdana, sans-serif;
}

За замовченням, для відображення тексту буде застосовано перший за ліком шрифт. У разі його відсутності на комп’ютері користувача для відображення буде використано наступний за ліком шрифт, і так далі. Зрештою, браузер обере з переліку відповідний для відображення шрифт.

Для відображення довільних шрифтів розроблено багато технологій, і розробнику варто знати про всі, щоб обрати зручний для нього підхід.

Під’єднання шрифтів @ font-face в файлі стилів

Властивість CSS @font-face надає можливість втілити на сайт нестандартні шрифти, які можна вибрати в мережі або створити самостійно.

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

@font-face {
	font-family: "MyFontName";
	src: url('font.ttf');
}
body {
	font-family: "MyFontName";/використовуємо підключений шрифт */
}

Практичний приклад

  
@font-face {
	font-family: "PT Sans Narrow"
	url("fonts/PTSans-Narrow.ttf") format("truetype")
}	
body {
	font-family: 'PT Sans Narrow', sans-serif;
}

Google Fonts — безкоштовний сервіс з тисячами відкритих шрифтів, який надає можливість швидко та якісно інтегрувати сучасні шрифти в будь-який проєкт без необхідності завантажувати файли шрифтів на сервер.

На сервісі Google Web Fonts містяться інструкції по підключенню вибраного шрифту до сайту, проведення налаштування зовнішнього вигляду онлайн шрифту і отримання повного набору CSS властивостей, які потрібно додати у файл стилів сайту.

Вибраний онлайн шрифт для сайту буде довантажуватися до браузера користувача з серверів Google, що допоможе не створювати додаткове навантаження на сервер власного хостингу, як у випадку, коли онлайн шрифти для сайту зберігаються на його хостингу.

Способи підключення Google Fonts

1. Через HTML (рекомендовано для більшості проєктів):

   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap" rel="stylesheet">
   

2. Через CSS (@import):

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
   

Втілення в проєкті (практичні кроки)

• Обрати 1–2 шрифти (один для заголовків, один для основного тексту). Надмірна кількість шрифтів погіршує продуктивність.
• Використовувати параметр &display=swap — це забезпечує швидке відображення тексту (FOIT → FOUT).
• Інтегрувати шрифти через CSS-змінні для централізованого керування:

:root {
	--font-primary: 'Inter', system-ui, sans-serif;
	--font-heading: 'Space Grotesk', sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
}
body {
	font-family: var(--font-primary);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-semibold);
}

Переваги використання Google Fonts

• Швидке покращення візуальної якості макету без додаткових файлів.
• Легке поєднання з CSS Custom Properties — всі зміни шрифтів відбуваються в одному місці.
• Підтримка змінних шрифтів (variable fonts) — один файл замість кількох важких варіантів.
• Краща доступність і SEO (правильні font-fallbacks та display=swap).
• ШІ-асистенти (Copilot/Chat) можуть допомогти згенерувати оптимальний набір шрифтів та CSS-змінні за описом дизайну.

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

Популярні сучасні іконкові шрифти (на 2026р.)

• Font Awesome 6 — найпопулярніший набір (понад 2000 іконок, включаючи бренди, соціальні мережі, медичні, транспортні тощо).
• Material Symbols (від Google) — сучасні, змінні іконки з підтримкою різних стилів (Outlined, Rounded, Sharp).
• Bootstrap Icons — легкий і чистий набір іконок.
• Remix Icon або Tabler Icons — сучасні та мінімалістичні іконки.

Способи підключення

1. Через Google Fonts (Material Symbols)

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

2. Через CDN (найшвидший для лабораторної роботи)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

3. Локальне підключення (рекомендується для фінальних проєктів).

Практичне втілення в HTML+CSS

<i class="fas fa-home"></i>
<i class="fas fa-search"></i>
<button><i class="fas fa-arrow-right"></i> Перейти</button>

Перейти

Інтеграція з CSS-змінними (рекомендовано)

:root {
	--icon-font: "Font Awesome 6 Free";
	--icon-size: 1.25rem;
	--icon-color-primary: #6366f1;
}
.icon {
	font-family: var(--icon-font);
	font-size: var(--icon-size);
	color: var(--icon-color-primary);
}
/* Приклад темної теми */
[data-theme="dark"] {
	--icon-color-primary: #818cf8;
}

Переваги іконкових шрифтів

• Дуже малий розмір файлу порівняно з окремими SVG-файлами.
• Легко змінювати колір, розмір, тінь та анімацію через CSS.
• Масштабуються без втрати якості.
• Швидко інтегруються з ШІ-асистентами (достатньо описати потрібну іконку — Copilot підкаже клас).

В навчальних проєктах іконкові шрифти — відмінний інструмент для швидкого прототипування. В комерційних проєктах все частіше переходять на оптимізовані SVG-спрайти.

Строга семантичність

Код має промовляти своїми тегами, не вживати виключно <div> та <span>. Кожен блок повинен мати своє логічне призначення.

• Погано: <div class="header">, <div class="nav">, <span class="heading">
• Добре: <header>, <nav>, <h1>

Правильна ієрархія заголовків

Заголовки <h1>–<h6> будують скелет сторінки для пошукових роботів (SEO).

• На сторінці має бути лише один тег <h1> (назва всього лендингу чи статті).
• Не можна перескакувати через рівні (наприклад, після <h2> відразу ставити <h4>).

Обов'язкова доступність (Accessibility/a11y)

• Всі зображення <img> мусять мати атрибут alt="" з описом того, що зображено на картинці (для скрінрідерів). Якщо картинка суто декоративна, можна залишити його порожнім alt="", але не видаляти.
• Кнопки без тексту (наприклад, просто іконка-хрестик для закривання модального вікна) повинні мати атрибут aria-label="Закрити модальне вікно".

Чистота атрибутів та форматування

• Використовувати нижній регістр для тегів та атрибутів (<div class="...">, а не <DIV CLASS="...">).
• Слідкувати за правильними відступами (2 або 4 пробіли) за допомогою плагіна Prettier. Код не повинен вирівнюватися в один стовбчик чи мати хаотичну, не їєрархічну структуру.

Принцип DRY (Don't Repeat Yourself) через CSS-змінні

DRY — це один з основних принципів чистого коду, який перекладається як «Не повторюйся». В контексті CSS він означає: Не повторювати одні й ті самі значення (кольори, відступи, шрифти, розміри тощо) в багатьох місцях коду.

Якщо порушити принцип DRY в CSS, виникають серйозні проблеми:

• Важко підтримувати код. Якщо потрібно змінити основний колір бренду з #0066ff на #ff5500, доведеться вручну знайти і замінити його в 50–100+ місцях.
• Зростає ймовірність помилок. Можна пропустити одне місце і отримати невідповідність в дизайні.
• Код стає "брудним" і важким для читання.
• Складно впроваджувати зміни (наприклад, темну тему Dark Mode).

Приклад, як виглядає порушення DRY в CSS. Тут колір #0066ff повторюється 6 разів.

CSS.header {
    color: #0066ff;
    border-bottom: 3px solid #0066ff;
}
.button {
    background-color: #0066ff;
    border: 2px solid #0066ff;
}
.card {
    border: 1px solid #0066ff;
}
.link {
    color: #0066ff;
}

Для дотримання принципу DRY в сучасному CSS використовуються CSS-змінні.

CSS
:root {
    --color-primary: #0066ff;
    --color-primary-hover: #0052cc;
    --spacing-md: 16px;
    --radius-md: 8px;
}
.header {
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-primary);
}
.button {
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.card {
    border: 1px solid var(--color-primary);
}

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

Принцип DRY в CSS робить код легшим в підтримці, швидшим в змінах, більш професійним.

Відмова від inline-стилів

Прагнути не писати стилі всередині HTML-тегів через атрибут style="". Це повністю ламає архітектуру, унеможливлює кешування та перевикористання коду.

• Погано: <p style="color: red; font-size: 18px;">Текст</p>
• Добре: <p class="alert-text">Текст</p> (а стилі винесено в .css файл).

Логічна структура та архітектура іменування

Якщо писати "ванільний" CSS (без Tailwind), варто використовувати зрозумілу методологію іменування класів, наприклад BEM (Block, Element, Modifier). Назви мають бути логічними, а не залежати від зовнішнього вигляду.

• Погано: .red-button (якщо кнопка стане синьою, назва втратить сенс), .b1, .left_block.
• Добре: .button, .button--primary (модифікатор), .card__title (елемент всередині блоку)

Уникати використання !important

Надмірне використання !important — це ознака брудної архітектури та втрати контролю над каскадом CSS. Воно "забиває костилі" в код, які потім майже неможливо перевизначити. Стилі мають перемагати за рахунок правильної специфічності селекторів.

Групування властивостей всередині селектора

Тримати властивості в однаковому порядку всередині кожного класу. Наприклад, за специфікацією або за логічними блоками (Групування за моделлю коробки):

• Позиціонування (position, top, z-index)
• Блочна модель/Розміри (display, width, height, margin, padding)
• Текст/Типографіка (font-size, color, text-align)
• Візуальні ефекти (background, border, box-shadow, transition)

Виявлення дублювання

ШІ шукає, де є повтори однакових значень:

• Один колір #0066ff написано 15 разів.
• Відступ padding: 16px 24px; повторюється в 8 місцях.
• Шрифт font-family: 'Inter', sans-serif; є скрізь

Приклад «сирого» коду:

CSS
.header { color: #0066ff; }
.button { background: #0066ff; }
.card-title { color: #0066ff; }

Абстракція в CSS-змінні

ШІ виносить всі повторювані значення в секцію :root:

CSS
:root {
    --color-primary: #0066ff;
    --spacing-md: 16px;
    --font-base: 'Inter', system-ui, sans-serif;
}

ШІ замінює в коді CSS всі жорсткі значення на CSS змінні:

CSS
.header { color: var(--color-primary); }
.button { background: var(--color-primary); }
.card-title { color: var(--color-primary); }

Очищення коду

• Видалення стилів, які не використовуються в HTML-коді
• Оптимізація каскаду (порядок селекторів).
• Приведення назв класів до єдиного стилю (BEM або інший).
• Додавання коментарів до секцій.
• Підготовлення коду до легкого впровадження темної теми Dark Mode.

Приклад рефакторингу та оптимізації

До рефакторингу (сирий код):

CSS
.hero {
    background: #0066ff;
    padding: 80px 20px;
    color: white;
}
.btn {
    background: #0066ff;
    padding: 16px 32px;
    border-radius: 8px;
    color: white;
}
.card {
    padding: 24px;
    border: 1px solid #0066ff;
}

Після ШІ-рефакторингу:

CSS
/* =============================================
   ГЛОБАЛЬНІ ЗМІННІ
   ============================================= */
:root {
    --color-primary: #0066ff;
    --color-primary-hover: #0052cc;
    --spacing-xl: 80px;
    --spacing-md: 24px;
    --radius-md: 8px;
    --border-color: #e5e7eb;
}
/* =============================================
   КОМПОНЕНТИ
   ============================================= */
.hero {
    background-color: var(--color-primary);
    padding: var(--spacing-xl) 20px;
    color: white;
}
.btn {
    background-color: var(--color-primary);
    padding: 16px 32px;
    border-radius: var(--radius-md);
    color: white;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: var(--color-primary-hover);
}
.card {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

Універсальний промпт для рефакторингу

Ти — senior frontend-розробник з 8+ років досвіду. 
Виконай Refactoring Guard цього CSS-коду.

Правила:
1. Вияви всі дублювання (кольори, відступи, радіуси, шрифти).
2. Створи добре структуровану секцію :root зі змістовними назвами змінних.
3. Заміни всі повторювані значення (більше 3 разів) на var(--змінні).
4. Видали стилі, які не використовуються в HTML-коді.
5. Оптимізуй порядок і додай коментарі.
6. Підготуй код для легкого впровадження темної теми Dark Mode.

Надаю CSS код:
[paste your code here]

• IDE (Integrated Development Environment/Інтегроване середовище розробки) — комплексне програмне забезпечення для розробників, яке зазвичай містить текстовий редактор, інструменти автоматизації та відлагодження. В даній лабораторній роботі як IDE є Visual Studio Code (VS Code).
• Electron — технологічний фреймворк, на базі якого побудовано VS Code. Він поєднує веб-движок Chromium (для рендерингу інтерфейсу) та Node.js (для роботи з файловою системою), що надає можливість створювати кросплатформні додатки за допомогою HTML, CSS та TypeScript.
• Monaco Editor — внутрішній движок текстового редактора в VS Code, який забезпечує плавне прогортання, миттєве підсвічування синтаксису та швидку роботу з великими обсягами коду.
• IntelliSense — технологія розумного автодоповнення коду в VS Code, яка аналізує контекст, пропонує варіанти завершення функцій, тегів або змінних, а також виводить документацію безпосередньо під час введення тексту.
• ШІ-асистент (AI Assistant) — інструмент на базі нейромереж (наприклад, GitHub Copilot, Codeium, Tabnine), який інтегрується в редактор коду для прискорення розробки за допомогою генерації та аналізу коду.
• Inline Completion (Автодописування) — сценарій роботи ШІ, коли асистент аналізує відкриті файли і пропонує продовження рядка чи логічної конструкції безпосередньо під час друкування коду.
• Chat Interface (Інтерфейс чату) — вікно розмови з ШІ в бічній панелі або всередині файлу (швидкі дії Ctrl+I), де розробник може давати текстові інструкції (промпти) на пояснення, рефакторинг або пошук багів.
• Hot Reload (Гаряче оновлення) — технологія (що реалізована, наприклад, через розширення Live Server), яка автоматично оновлює сторінку в браузері в реальному часі при кожному збереженні змін в коді.

• Семантична розмітка (Semantic Markup) — підхід до проектування вебсторінок, за якого вибір тегів базується на їхньому змістовному значенні (семантиці), а не на зовнішньому вигляді.
• Div-мішанина (Div Soup) — поганий тон у веброзробці, який полягає в надмірному та безсистемному використанні універсальних контейнерів <div> замість відповідних семантичних тегів HTML5.
• Accessibility (Доступність) — властивість веб-інтерфейсів бути доступними та зручними для всіх користувачів, зокрема для людей з порушеннями зору, які використовують технології доступності (скрінрідери/екранні диктори).
• Пошукова оптимізація SEO (Search Engine Optimization) — комплекс заходів для підвищення видимості сайту в пошукових системах. Семантична розмітка безпосередньо покращує SEO-індексацію сайту роботами Google.
• W3C (World Wide Web Consortium) — консорціум Всесвітньої павутини, який розробляє та впроваджує технологічні стандарти для веб-індустрії.
• Валідатор (W3C Markup Validator) — інструмент Консорціуму Всесвітньої павутини для перевірки відповідності коду вебсторінки чинним стандартам і виявлення синтаксичних або структурних помилок.
• Семантичні вузли макета:
  • <header> — вступна частина сторінки або секції (логотип, меню).
  • <nav> — блок навігаційних посилань.
  • <main> — унікальний, центральний контент сторінки (може бути лише один на сторінці).
  • <section> — семантичний тег, що позначає тематичний розділ документа, зазвичай містить власний заголовок і групує пов'язаний за змістом контент.
  • <article> — семантичний тег, призначений для автономного, самодостатнього контенту, який можна витягнути з контексту сторінки й використати в іншому місці (наприклад, стаття, пост у блозі, картка товару).
  • <aside> — бічна панель (сайдбар) з додатковим чи непрямим контентом.

• Лайаут (Layout) — структура, каркас або модель розташування елементів на веб-сторінці в двовимірному просторі екрана.
• CSS Grid Layout — двовимірна система сіток в CSS, яка надає можливість одночасно керувати розташуванням елементів як по горизонталі (стовпці), так і по вертикалі (рядки). Використовується як макро-розмітка для створення загальної сітки сайту або складних галерей.
• CSS Flexbox (Flexible Box Layout) — одновимірна модель макетування (вздовж одного рядка або одного стовпчика), яка надає можливість ефективно розподіляти простір та вирівнювати елементи в межах одного напрямку (рядка або стовпця). ідеально підходить для мікро-елементів: навігаційних панелей, вирівнювання іконок, кнопок тощо.
• CSS-змінні (Custom Properties) — інструмент, який надає можливість оголошувати та зберігати певні динамічні значення (кольори, відступи, шрифти) в одному місці та повторно викликати їх через функцію var() по всьому проєкту.
• Фракція (1fr) — одиниця виміру в CSS Grid, що позначає одну частку (фракцію) вільного простору, який розподіляється між колонками чи рядками сітки.
• Gap (Відступ сітки) — CSS-властивість, яка задає відстань між комірками в Grid або Flexbox без використання стандартних зовнішніх відступів (margin), захищаючи дизайн від небажаних зсувів.

• Промпт-інжиніринг (Prompt Engineering) — процес проектування, написання та оптимізації текстових запитів (промптів) для штучного інтелекту з метою отримання максимально точного, валідного та структурованого коду.
• ШІ-чат IDE (In-Editor AI Chat) — інтегрований в середовище розробки (VS Code) інтерфейс взаємодії з нейромережею, який аналізує контекст проекту в реальному часі та допомагає писати, рефакторити чи виправляти код безпосередньо в редакторі.
• Ітеративний робочий процес (Iterative Workflow) — циклічний процес розробки за участю ШІ, що складається з генерації коду, його тестування/валідації, збору помилок та повторного запиту до ШІ для точкового виправлення дефектів до досягнення ідеального результату.

• Рефакторинг (Refactoring) — процес контрольованого переписування та оптимізації внутрішньої структури коду без зміни його зовнішньої поведінки чи функціоналу.
• Принцип DRY (Don't Repeat Yourself) — базовий принцип розробки, спрямований на уникнення дублювання інформації та коду. Забезпечується абстрагуванням повторюваних значень в CSS-змінні.
• Псевдоклас :root — псевдоклас в CSS, що відповідає найвищому рівню DOM-дерева (елементу <html>). Використовується для глобального оголошення CSS-змінних, щоб вони були доступні по всьому документу.
• Fallback (Значення за замовчуванням) — запасний варіант значення у функції var(), який спрацьовує та захищає стилі, якщо потрібна CSS-змінна не завантажилась або не була оголошена.
• Область видимості (Scope) — межі коду, в яких змінна є активною та доступною. Може бути глобальною (в :root) або локальною (всередині конкретного компонента чи блоку).