CSS Academy · Ders

Değişkenleri Bileşenlerle Sınırlandırma

Yalıtılmış ve yeniden kullanılabilir biçim sistemleri oluşturmak için CSS değişkenlerini bileşen ögeleriyle sınırlandırın.

Değişkenleri Bileşenlerle Sınırlandırma, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Özel Özellikler Neden Kapsamlandırılır?

Genel özel özellikler tüm sayfayı etkiler. Özel özellikleri bir bileşenle kapsamlandırmak, stilleri yalıtır ve bileşenler arasında istenmeyen devralmayı önler.

Bileşen Düzeyinde Kapsam

Özel özellikleri bileşenin kök seçicisinde tanımlayın. Alt öğeler bunları devralır; ancak bileşenin dışındaki öğeler devralamaz.

<div class="card">Scoped card variables</div>

Kapsamlandırılmış Değişkenleri Geçersiz Kılma

Bir bileşen, değiştirici sınıflarında kendi özel özelliklerini geçersiz kılarak tema çeşitlerini tanımlayabilir:

<div class="card">Default</div>
<div class="card card--dark">Dark</div>
<div class="card card--blue">Blue</div>

Genel Geri Dönüş Değeri ve Yerel Geçersiz Kılma

Tasarım deseni: :root içinde geneller, bileşen üzerinde yerel geçersiz kılmalar. Bileşen genel belirteçleri kullanır, ancak bunları yerel olarak özelleştirebilir.

<button>Royalblue (global)</button>
<div class="sidebar">
  <button>Coral (sidebar override)</button>
</div>

CSS Özel Özellik Katmanları

İyi yapılandırılmış bir tasarım sisteminde birden çok özel özellik katmanı bulunur:

Genel belirteçler: ham değerler (renkler, boyutlar)
Anlamsal belirteçler: anlama dayalı değerler (--color-action)
Bileşen belirteçleri: bileşene özgü değerler (--button-bg)

Satır İçi Stil API'si

Bileşen değişkenlerini JavaScript'ten satır içi stiller veya HTML öznitelikleri aracılığıyla herkese açık bir API olarak sunun. Bu, kullanıcıların CSS'i düzenlemeden bileşenleri özelleştirmesini sağlar.

<div class="card" style="--card-bg: pink;">
  Content
</div>

@scope ile Kapsamlandırma (Modern)

Yeni @scope kuralı, sınıf adlandırmasına dayanmadan açık CSS kapsamlandırması sağlar:

<div class="card">
  <p class="title">Scoped Title</p>
  <p>Card body</p>
</div>

data-theme ile Yalıtım

Bir alt ağacın tamamını farklı bir temaya dahil etmek için data-theme özniteliğini kullanın:

<div class="panel">Light theme (default)</div>
<div data-theme="dark" class="panel">Dark theme</div>

Sızıntıyı Önleme

Özel özellikler, tanımlandıkları öğeyle ve onun alt öğeleriyle sınırlıdır. Ancak bir alt öğede tanımlanan özelliklere yalnızca o alt öğe ve kendi alt öğeleri erişebilir; özellikler üst öğelere veya kardeş öğelere sızmaz.

Duyarlı Kapsamlandırılmış Değişkenler

Kapsamlandırılmış özel özellikler, kapsayıcı sorgularıyla birlikte son derece iyi çalışır:

<div class="card">
  <div class="card__inner">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>

Bileşen Belirteçlerinin Belgelenmesi

Geliştiricilerin hangi değişkenleri geçersiz kılacağını bilmeleri için bir bileşenin özel özellik API'sini belgeleyin. İyi bir yaklaşım, bunları bileşen stil sayfasının en üstünde yorum olarak listelemektir.

Hızlı Kontrol

--color-accent özel özelliği bir .card öğesinde tanımlanmıştır. Kardeş bir .nav öğesi bu değişkeni devralabilir mi?

Özet

Özel özellikleri, genel kapsamdan yalıtmak için bileşen seçicileriyle kapsamlandırın. Çeşitler için kapsamlandırılmış değişkenleri geçersiz kılmak üzere değiştirici sınıfları kullanın. Tasarım sistemleri genel belirteçleri → anlamsal belirteçleri → bileşen belirteçlerini katmanlar. Değişkenleri dışarıdan özelleştirme için bileşen API'si olarak sunun.

Sıkça Sorulan Sorular

“Değişkenleri Bileşenlerle Sınırlandırma” dersi ücretsiz mi?

Evet — “Değişkenleri Bileşenlerle Sınırlandırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Değişkenleri Bileşenlerle Sınırlandırma” dersinde ne öğreneceğim?

Yalıtılmış ve yeniden kullanılabilir biçim sistemleri oluşturmak için CSS değişkenlerini bileşen ögeleriyle sınırlandırın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Değişkenleri Bileşenlerle Sınırlandırma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön