Ефективна Робота з CSS

Змінні

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

Щоб оголосити змінну, ми використовуємо псевдоклас :root у верхній частині нашого CSS-файлу і додаємо до імені змінної префікс --. Наприклад, давайте визначимо змінну --blue-color зі значенням #3f42f3 у нашому блоці :root:

css
9
1
2
3
:root {
  --blue-color: #3f42f3;
}

Оголосивши змінну, ми можемо застосувати її до будь-якої властивості CSS за допомогою функції var(). Наприклад, щоб присвоїти властивості color елемента <h1> значення нашої змінної --blue-color, ми можемо написати

css
9
1
2
3
h1 {
  color: var(--blue-color);
}

Давайте об'єднаємо знання про оголошення та використання змінних у наступному прикладі:

У цьому прикладі ми визначаємо дві змінні, --background-color і --text-color, і застосовуємо їх до властивостей background-color і color відповідно. Змінюючи значення цих змінних, ми можемо легко оновити кольори по всій таблиці стилів.

Перевизначення властивостей

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

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

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

Примітка

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