Власні властивості та наслідування

3.1 Власні властивості

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

Що таке власні властивості?

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

Оголошення власних властивостей:

    
      :root {
        --main-color: #3498db;
        --padding: 10px;
      }
    
  

Використання власних властивостей:

    
      background-color: var(--main-color);
      padding: var(--padding);
    
  

3.2 Вплив на продуктивність

1. Оптимізація повторного використання

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

Приклад:

    
      :root {
        --main-color: #3498db;
      }

      .header {
        background-color: var(--main-color);
      }

      .footer {
        background-color: var(--main-color);
      }
    
  

2. Кешування та рендеринг

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

3. Динамічне оновлення

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

Приклад:

    
      document.documentElement.style.setProperty('--main-color', '#e74c3c');
    
  

3.3 Вплив на організацію коду

Централізоване управління стилями

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

Приклад

Зміна значення змінної в :root автоматично оновить всі пов'язані стилі по всьому документу:

    
      :root {
        --font-size: 16px;
        --line-height: 1.5;
      }

      body {
        font-size: var(--font-size);
        line-height: var(--line-height);
      }
    
  

Наслідування і контекст

CSS-змінні наслідуються дочірніми елементами від батьківських. Це дозволяє задавати значення на верхньому рівні і використовувати їх у більш конкретних контекстах.

Приклад:

    
      :root {
        --base-font-size: 16px;
      }

      .container {
        font-size: var(--base-font-size);
      }

      .container .heading {
        font-size: calc(var(--base-font-size) * 1.5);
      }
    
  

Покращення читабельності

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

Приклад:

    
      :root {
        --primary-color: #3498db;
        --secondary-color: #2ecc71;
      }

      .primary-button {
        background-color: var(--primary-color);
      }

      .secondary-button {
        background-color: var(--secondary-color);
      }
    
  

Локальні та глобальні змінні

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

Приклад:

    
      :root {
        --global-padding: 10px;
      }

      .section {
        --section-padding: 20px;
        padding: var(--section-padding);
      }

      .item {
        padding: var(--global-padding);
      }
    
  

3.4 Приклад повної реалізації

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

    
      :root {
        --main-padding: 10px;
        --main-margin: 20px;
        --primary-color: #3498db;
      }

      .container {
        padding: var(--main-padding);
        margin: var(--main-margin);
      }

      .container .header {
        --primary-color: #e74c3c; /* Переоприділення змінної для локального використання */
        color: var(--primary-color);
      }

      .container .content {
        color: var(--primary-color); /* Використовує значення змінної з кореня */
      }
    
  

    
      <div class="container">
        <div class="header">This is the header</div>
        <div class="content">This is the content</div>
      </div>
    
  

Пояснення:

• У цьому прикладі --primary-color використовується для стилізації тексту в елементі .content, наслідуючи значення з кореня
• В елементі .header змінна --primary-color переоприділена, і використовується нове значення