Як використовувати змінні в CSS і оптимізувати свій стиль

Автор

Змінні CSS: Покращення стилізації веб-сторінок

Для поліпшення зовнішнього вигляду та стилізації різних частин веб-сторінок, більшість сайтів використовують CSS. Хоча CSS (Cascading Style Sheets) технічно не є мовою програмування, її можна поєднувати з такими мовами, як JavaScript, для створення адаптивних та інтерактивних веб-сторінок.

Ті, хто знайомий з мовами програмування на кшталт JavaScript, знають про можливість оголошення змінних, надання їм значень та повторного використання у різних частинах коду. Приємна новина полягає в тому, що цю ж концепцію можна застосувати й у CSS.

У цій статті ми розглянемо, що таке змінні CSS, обговоримо їхні переваги, а також покажемо, як оголошувати та використовувати їх на практиці.

Що собою представляють змінні в CSS?

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

Чому варто використовувати змінні CSS? Ось декілька причин:

  • Спрощує оновлення коду: Оголосивши змінну, ви можете використовувати її у всій таблиці стилів без необхідності ручного оновлення кожного окремого елемента.
  • Зменшує дублювання: У міру розростання кодової бази, ви зіткнетесь зі схожими класами та елементами. Замість того, щоб створювати CSS-код для кожного з них, можна просто використовувати змінні CSS.
  • Спрощує підтримку коду: Підтримка коду є критично важливою для стабільної роботи вашого бізнесу.
  • Покращує читабельність: У сучасному світі заохочується співпраця. Застосування змінних у CSS дозволяє створювати більш компактну та зрозумілу кодову базу.
  • Легше підтримувати узгодженість: Змінні CSS допомагають підтримувати єдиний стиль при зростанні кодової бази або збільшенні масштабу програми. Наприклад, ви можете оголосити відступи, поля, стиль шрифту та кольори, які використовуватимуться для кнопок на веб-сайті.

Як оголошувати змінні в CSS

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

Щоб оголосити змінну CSS, почніть з імені елемента, потім поставте два дефіси (–), вкажіть потрібне ім’я та значення. Базовий синтаксис виглядає так:

element {
    --variable-name: value;
}

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

body {
    --padding: 1rem;
}

Область видимості змінних в CSS

Змінні CSS можуть бути локальними (доступні лише в межах певного елемента) або глобальними (доступні у всій таблиці стилів).

Локальні змінні

Локальні змінні призначаються конкретним селекторам. Наприклад, можна додати їх до кнопки. Ось приклад:

.button {
    --button-bg-color: #33ff4e;
}

Змінна кольору фону доступна для селектора кнопки та всіх її дочірніх елементів.

Глобальні змінні

Глобальні змінні можна використовувати в будь-якому елементі коду після їх оголошення. Для оголошення глобальних змінних використовується псевдоклас :root. Ось приклад:

:root {
    --primary-color: grey;
    --secondary-color: orange;
    --font-weight: 700;
}

У наведеному вище коді будь-яку з оголошених змінних можна використовувати для різних елементів, таких як заголовки, абзаци, блоки div, або навіть для всього тіла сторінки.

Як використовувати змінні в CSS

Для демонстрації, створимо проект з файлами index.html та styles.css.

У файлі index.html розмістимо простий div з двома заголовками (h1 та h2) та абзацом (p).

<div>
    <h1>Hello Front-end Dev!!!!</h1>
    <h2>This is how to use variables in CSS.</h2>
    <p> Keep scrolling</p>
</div>

У файлі style.css додамо наступний код:

:root {
    --primary-color: grey;
    --secondary-color: orange;
    --font-weight: 700;
    --font-size: 16px;
    --font-style: italic;
}
body {
    background-color: var(--primary-color);
    font-size: var(--font-size);
}
h1 {
    color: var(--secondary-color);
    font-style: var(--font-style);
}
h2 {
    font-weight: var(--font-weight);
}
p {
    font-size: calc(var(--font-size) * 1.2);
}

Після відображення веб-сторінки, отримаємо такий результат:

У наведеному коді, глобальні змінні оголошено в елементі :root. Для використання глобальної змінної в будь-якому елементі необхідно застосувати ключове слово var. Наприклад, для застосування фонового кольору, оголошеного як глобальна змінна, код буде виглядати так:

background-color: var(--primary-color);

Проаналізувавши інші елементи, ви помітите аналогічну тенденцію у застосуванні ключового слова var.

Використання змінних CSS з JavaScript

Для демонстрації використання змінних CSS з JavaScript, застосуємо локальні та глобальні змінні.

Додамо елемент сповіщення до нашого існуючого коду:

<div class="alert">Натисніть мене!</div>

Оновлений файл index.html виглядатиме наступним чином:

<div>
    <h1>Hello Front-end Dev!!!!</h1>
    <h2>This is how to use variables in CSS.</h2>
    <p> Keep scrolling</p>
</div>
<div class="alert">Click me!</div>

Стилізуємо нашу змінну. Додайте наступний код до існуючого CSS:

.alert {
    --bg-color: red; /* Визначаємо локальну змінну */
    background-color: var(--bg-color); /* Використовуємо локальну змінну для фонового кольору */
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: var(--font-weight); /* Використовуємо глобальну змінну для товщини шрифту */
    width: 50px;
}

Ми зробили наступне:

  • Визначили локальну змінну всередині елемента сповіщення: --bg-color: red;
  • Використали ключове слово var для доступу до цієї локальної змінної: background-color: var(--bg-color);
  • Використали глобальну змінну, оголошену раніше, як товщину шрифту: font-weight: var(--font-weight);

Додаємо код JavaScript

Зробимо наш елемент сповіщення інтерактивним. При натисканні на нього з’явиться спливаюче вікно з повідомленням: “Ми використовували змінні CSS із JavaScript!!!!”.

JavaScript-код можна додати безпосередньо в HTML, використовуючи теги <script/>. Код JavaScript має бути розміщений після HTML-коду, але перед закриттям тегу </body>.

Додайте такий код:

<script>
    const alertDiv = document.querySelector('.alert');
    alertDiv.addEventListener('click', function() {
        window.alert("We have used CSS Variables with JavaScript!!!!");
    });
</script>

Тепер ваш HTML-код повинен виглядати приблизно так:

Наш JavaScript-код виконує наступне:

  • Використовує document.querySelector() для пошуку елемента сповіщення.
  • Призначає елементу сповіщення змінну alertDiv.
  • В alertDiv використовує метод addEventListener() для додавання обробника події ‘click’.
  • Використовує window.alert() для відображення повідомлення при кліку.

Після відображення сторінки, ви отримаєте наступне:

При натисканні на сповіщення з’явиться повідомлення:

Запасні значення в змінних CSS

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

Запасні значення корисні в наступних випадках:

  • Якщо деякі браузери не підтримують змінні CSS, властивість матиме резервний варіант.
  • Якщо ви підозрюєте, що сторінка працює некоректно через змінну CSS, можна використовувати запасне значення для перевірки цієї гіпотези.

Ви можете задавати декілька резервних властивостей, розділених комами. Розглянемо наступний код:

:root {
    --primary-color: #007bff;
}
.btn {
    background-color: var(--primary-color, red, yellow);
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

Якщо при використанні глобальної змінної ви припуститесь помилки в слові “primary-color”, тобто змінна не буде оголошена, то використається колір “red” – запасне значення.

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

<style>
    :root {
        --primary-color: #007bff;
    }
    .btn {
        background-color: var(--primary-color, red);
        padding: 10px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
    }
</style>
<button class="btn">Click me!</button>

Якщо відобразити цей код у браузері, отримаємо наступне:

Змінимо лише один символ в імені змінної:

.btn {
    background-color: var(--primary-colr, red); /*Помилка в імені змінної: primary-colr*/
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

Тепер браузер покаже наступний результат:

Використання динамічних значень та змінних обчислених значень в CSS

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

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

<style>
    :root {
        --color: #333;
    }
    #color-input {
        margin-left: 1em;
    }
    #color-input {
        --color: var(--color-input);
    }
</style>
<label for="color-input">Choose a color:</label>
<input type="color" id="color-input">

Код вище виконує такі дії:

  • Оголошує змінну --color зі значенням за замовчуванням #333 за допомогою селектора :root.
  • Використовує #color-input для вибору елемента введення.
  • Значення --color встановлюється як var(--color-input), що означає, що колір буде оновлюватись, коли користувач вибере новий колір через палітру.

Обчислені значення виконують обчислення на основі інших властивостей або змінних. Розглянемо наступний приклад:

:root {
    --base-font-size: 14px;
    --header-font-size: calc(var(--base-font-size) * 3);
}
h2 {
    font-size: var(--header-font-size);
}

У цьому коді:

  • Є змінна --base-font-size, яка визначає базовий розмір шрифту.
  • --header-font-size в три рази більший за --base-font-size.
  • Селектор h2 використовує var з --header-font-size.
  • Отже, усі заголовки h2 на веб-сторінці будуть втричі більші за --base-font-size.

Підсумки

Тепер ви розумієте, як використовувати змінні CSS для прискорення процесу розробки та створення коду, який легко підтримувати. Змінні можна використовувати з HTML та бібліотеками, як React. Рекомендуємо ознайомитись з різними підходами до стилізації React за допомогою CSS.

Ви можете перевірити вихідний код за посиланням.