Własne właściwości i dziedziczenie

3.1 Własne właściwości

Zmienne CSS, znane również jako własne właściwości, dostarczają potężnego narzędzia do zarządzania stylami w web development. Ich użycie wpływa na wydajność i organizację kodu, poprawiając wspieranie i elastyczność CSS. Przyjrzyjmy się bliżej, jak własne właściwości i dziedziczenie mogą wpływać na te aspekty.

Co to są własne właściwości?

Przypominam, własne właściwości (czyli zmienne CSS) to wartości, które można ustawić w CSS i następnie używać wielokrotnie w całym pliku stylów. Są deklarowane za pomocą podwójnego myślnika (--) i mogą być używane z funkcją var().

Deklaracja własnych właściwości:

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

Użycie własnych właściwości:

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

3.2 Wpływ na wydajność

1. Optymalizacja wielokrotnego użycia

Użycie zmiennych CSS pomaga uniknąć duplikacji kodu, ponieważ tę samą wartość można używać wielokrotnie, co zmniejsza objętość kodu i ułatwia jego wsparcie.

Przykład:

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

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

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

2. Cache'owanie i renderowanie

Przeglądarki mogą efektywnie cache'ować i przetwarzać zmienne CSS, co pozytywnie wpływa na wydajność. Przy zmianie wartości zmiennej przeglądarka musi przeliczyć style tylko raz, co zmniejsza obciążenie renderowania.

3. Dynamiczna aktualizacja

Zmienne CSS mogą być dynamicznie zmieniane za pomocą JavaScript, co pozwala na aktualizację stylów bez przeliczania całej strony.

Przykład:

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

3.3 Wpływ na organizację kodu

Centralne zarządzanie stylami

Definiując zmienne CSS w jednym miejscu, można centralnie zarządzać stylami, co ułatwia ich wsparcie i zmiany.

Przykład

Zmiana wartości zmiennej w :root automatycznie zaktualizuje wszystkie powiązane style w całym dokumencie:

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

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

Dziedziczenie i kontekst

Zmienne CSS są dziedziczone przez potomne elementy od elementów rodziców. To pozwala ustawiać wartości na najwyższym poziomie i używać ich w bardziej konkretnych kontekstach.

Przykład:

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

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

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

Poprawa czytelności

Użycie zmiennych CSS poprawia czytelność kodu, ponieważ zmienne mogą być nazwane zgodnie z ich funkcją, co czyni kod bardziej zrozumiałym.

Przykład:

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

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

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

Zmienna lokalna i globalna

Zmienne można deklarować zarówno na poziomie globalnym (np. w :root), jak i lokalnie dla konkretnych selektorów. To pozwala tworzyć elastyczne i adaptowalne style.

Przykład:

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

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

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

3.4 Przykład pełnej realizacji

Oto przykład użycia zmiennych dla dziedziczenia i lokalnego przedefiniowania:

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

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

      .container .header {
        --primary-color: #e74c3c; /* Przedefiniowanie zmiennej do lokalnego użytku */
        color: var(--primary-color);
      }

      .container .content {
        color: var(--primary-color); /* Używa wartości zmiennej z root */
      }
    
  

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

Wyjaśnienie:

• W tym przykładzie --primary-color jest używane do stylizacji tekstu w elemencie .content, dziedzicząc wartość z root
• W elemencie .header zmienna --primary-color jest przedefiniowana i używa nowej wartości