Özəlliklər və irsiyyət

3.1 Öz xüsusiyyətlər

CSS dəyişənləri, başqa adı ilə öz xüsusiyyətlər, veb-developerlər üçün stil idarəetməsində güclü bir vasitə təqdim edir. Onlardan istifadə məhsuldarlıq və kodun təşkili üçün müsbət təsir edir, CSS-in dəstəklənməsini və elastikliyini artırır. Öz xüsusiyyətlərin və inheritance-nin bu aspektlərə necə təsir etdiyini daha ətraflı nəzərdən keçirək.

Öz xüsusiyyətlər nədir?

Xatırladım ki, öz xüsusiyyətlər (CSS dəyişənlər) – bu, CSS-də təyin edilə bilən və sonra bütün stil faylında dəfələrlə istifadə edilə bilən dəyərlərdir. Onlar iki defis (--) vasitəsilə elan olunur və var() funksiyası vasitəsilə istifadə edilə bilər.

Öz xüsusiyyətlərin elan edilməsi:

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

Öz xüsusiyyətlərin istifadə olunması:

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

3.2 Performansa təsir

1. Təkrar istifadənin optimallaşdırılması

CSS dəyişənlərindən istifadə kodun təkrarlanmasının qarşısını alır, çünki eyni dəyəri dəfələrlə istifadə etmək mümkündür, bu da kodun həcmini azaldır və onun saxlanmasını asanlaşdırır.

Nümunə:

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

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

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

2. Keşləmə və renderləmə

Browserlər CSS dəyişənlərini effektiv şəkildə keşləyə və işləyə bilir ki, bu da performansa müsbət təsir edir. Dəyişənin dəyəri dəyişdirildikdə, browser yalnız bir dəfə stilləri yenidən hesablamalı olur, bu da renderə olan yükü azaldır.

3. Dinamik yenilənmə

CSS dəyişənləri JavaScript ilə dinamik şəkildə dəyişdirilə bilər, bu da bütün səhifəni yenidən hesablamadan stilləri yeniləməyə imkan verir.

Nümunə:

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

3.3 Koda təşkil baxımından təsir

Stil idarəçiliyinin mərkəzləşdirilməsi

CSS dəyişənlərini bir yerdə müəyyənləşdirərək stillərə mərkəzləşdirilmiş şəkildə nəzarət etmək mümkündür. Bu, onların dəstəyini və dəyişdirilməsini asanlaşdırır.

Nümunə

:root içindəki dəyişənin dəyərinin dəyişdirilməsi avtomatik olaraq bütün sənəd boyunca əlaqəli stilləri yeniləyir:

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

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

Miras alınması və kontekst

CSS dəyişənləri valideyn elementlərdən uşaq elementlərə doğru miras alınır. Bu, dəyərləri yuxarı səviyyədə müəyyən etmək və onları daha dəqiq kontekstlərdə istifadə etmək imkanı yaradır.

Nümunə:

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

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

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

Oxunabilirliyin yaxşılaşdırılması

CSS dəyişənlərindən istifadə kodun oxunabilirliyini artırır, çünki dəyişənlər funksiyaları ilə uyğun olaraq adlandırılır və bu, kodu daha anlaşılan edir.

Nümunə:

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

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

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

Lokal və qlobal dəyişənlər

Dəyişənlər həm qlobal səviyyədə (məsələn, :root içində), həm də konkret seçicilər üçün lokal olaraq elan edilə bilər. Bu, çevik və uyğunlaşa bilən stillər yaratmağa imkan verir.

Nümunə:

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

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

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

3.4 Tam realizasiya nümunəsi

Budur, miraslıq və yerli yenidən müəyyən etmək üçün dəyişənlərin istifadə nümunəsi:

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

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

      .container .header {
        --primary-color: #e74c3c; /* Yerli istifadə üçün dəyişənin yenidən müəyyən olunması */
        color: var(--primary-color);
      }

      .container .content {
        color: var(--primary-color); /* Dəyişənin root-dan gələn dəyərini istifadə edir */
      }
    
  

    
      <div class="container">
        <div class="header">Bu başlıqdır</div>
        <div class="content">Bu məzmundur</div>
      </div>
    
  

Açıqlama:

• Bu nümunədə --primary-color elementi .content içindəki mətni dizayn etmək üçün istifadə edilir, root-dan gələn dəyəri miras alır
• .header elementində --primary-color dəyişəni yenidən müəyyən olunub və yeni dəyər istifadə edilir