STYLE LEAK NEDİR?

Style Leak (Stil Sızıntısı), bir componentin veya modülün CSS stil kurallarının, olmaması gereken yerlere sızması ve istenmeyen elementleri etkilemesidir.

TEMEL PROBLEM

<!-- Component 1: Card -->
<div class="card">
    <h2>Başlık</h2>
    <p>İçerik</p>
</div>

<!-- Component 2: Sidebar -->
<div class="sidebar">
    <h2>Sidebar Başlığı</h2>
    <p>Sidebar içeriği</p>
</div>

/* Card component CSS'i */
.card h2 {
    color: blue;
    font-size: 24px;
}

.card p {
    color: gray;
}

Problem yok gibi görünüyor, ama...

<!-- Şimdi card içinde sidebar kullanırsak: -->
<div class="card">
    <h2>Card Başlık</h2>
    
    <div class="sidebar">
        <h2>Sidebar Başlık</h2> <!-- 🔥 LEAK! Card'ın h2 stili burayı da etkiliyor -->
        <p>İçerik</p> <!-- 🔥 LEAK! -->
    </div>
</div>

 

.card h2 selector'ü, card içindeki TÜM h2'leri etkiler - sidebar'ınkini de!

STYLE LEAK TÜRLERİ

1. DESCENDANT SELECTOR LEAK (En Yaygın)

/* ❌ Leak riski YÜKSEk */
.header a {
    color: white;
    text-decoration: none;
}

<header class="header">
    <nav>
        <a href="/">Ana Sayfa</a>
    </nav>
    
    <!-- Başka bir component buraya gelirse... -->
    <div class="search-box">
        <a href="/advanced">Gelişmiş Arama</a> <!-- 🔥 LEAK! -->
    </div>
</header>

 

2. GLOBAL SELECTOR LEAK

/* ❌ ÇOK TEHLİKELİ */
h1 {
    color: blue;
    font-size: 32px;
}

p {
    line-height: 1.8;
}

 

Bu tüm sayfadaki TÜM h1 ve p'leri etkiler!

3. CHILD SELECTOR LEAK

/* ✓ Biraz daha güvenli ama yine de leak olabilir */
.container > div {
    padding: 20px;
}

<div class="container">
    <div>OK - Etkilenir</div>
    
    <section>
        <div>Etkilenmez (torun)</div>
    </section>
    
    <!-- Ama yeni bir component eklenirse... -->
    <div class="special-component">
        <!-- 🔥 Bu div de etkilenir! -->
    </div>
</div>

 

4. ELEMENT + CLASS COMBINATION LEAK

/* ❌ Specificity yüksek ama yine leak olabilir */
div.box {
    background: white;
}

 

5. UNIVERSAL SELECTOR LEAK

/* ❌ EN BÜYÜK LEAK! */
* {
    box-sizing: border-box;
}

.container * {
    margin: 0; /* Container içindeki HER ŞEY etkilenir */
}

 

LEAK NASIL OLUŞUR?

Senaryo 1: Component İçinde Component

/* Navbar component */
.navbar button {
    background: blue;
    color: white;
}

<nav class="navbar">
    <button>Ana Menü</button>
    
    <!-- Dropdown component ekliyoruz -->
    <div class="dropdown">
        <button>Dropdown</button> <!-- 🔥 Mavi oldu! -->
    </div>
</nav>

 

Senaryo 2: Third-party Component

/* Senin CSS'in */
.modal p {
    font-size: 14px;
    color: gray;
}

<div class="modal">
    <p>Modal içeriği</p>
    
    <!-- React Date Picker gibi 3rd party component -->
    <DatePicker>
        <!-- İçinde p elementleri var -->
        <p>Tarih seç</p> <!-- 🔥 Senin stilinle bozuldu! -->
    </DatePicker>
</div>

Senaryo 3: Dynamic Content

.article img {
    border-radius: 8px;
    max-width: 100%;
}

<article class="article">
    <img src="main.jpg" alt="Ana resim">
    
    <!-- Kullanıcı bir yorum widget'ı ekliyor -->
    <div class="comments-widget">
        <img src="avatar.jpg"> <!-- 🔥 Yuvarlak köşe oldu! -->
    </div>
</article>

 

LEAK ÖNLEME STRATEJİLERİ

1. DIRECT CHILD SELECTOR (>)

/* ❌ Leak riski */
.card p {
    color: gray;
}

/* ✓ Daha güvenli */
.card > p {
    color: gray;
}

/* ✓ En güvenli */
.card > .card-content > p {
    color: gray;
}

Altın Kural: Selector'lerinizi mümkün olduğunca spesifik ve sığ tutun. Generic element selector'lerden kaçının!