Sitemin müzik bölümünde tarayıcıda çalışan gerçek bir groovebox var: 16 adımlık sequencer, sınırsız enstrüman, her kanalın kendi ses motoru. Aylardır sorunsuzdu.
Bir sabah açtım — sequencer hücreleri yoktu.
Ses çalıyordu. Playhead ilerliyordu. Kanal başlıkları yerindeydi. Sadece tıklanacak kareler ortada yoktu.
Yanlış yerde aradım
İlk refleks JavaScript oldu. Konsol tertemiz. Hücreleri üreten fonksiyona log koydum — 16 kez çalışıyor, elemanları oluşturuyor, DOM’a ekliyor. Her şey doğru.
Geliştirici araçlarında elemanı seçtim. Oradaydı. Görünmüyordu.
.st-cell.beat {
position: absolute;
opacity: 0;
transform: translateY(20px);
}
Bu kuralı ben yazmamıştım. Yani yazmıştım — ama başka bir şey için, başka bir dosyada.
İki dosya, aynı kelime
Sitenin kurumsal bölümünde bir hikâye akışı var: sayfa kaydırıldıkça beliren anlatı adımları. Onların sınıf adı .beat — “hikâyenin vuruşu” anlamında. Görünmeden başlayıp göründükçe beliriyorlar, o yüzden sıfır saydamlıkla duruyorlar.
Sequencer hücrelerinin sınıfı da .beat — bu kez müzikal anlamda. Tamamen ayrı bir dünya, tamamen aynı kelime.
İki stil dosyası da aynı sayfaya yükleniyor. CSS’te ad alanı yok. İkisi tek bir kural kümesinde birleşti ve hikâye tarafındaki kural, özgüllüğü daha yüksek olduğu için kazandı.
Hiçbir yerde hata çıkmaz. CSS geçersiz bir şey görmedi. JavaScript bir şey yapmadı. Tarayıcı kendisine söyleneni harfiyen uyguladı.
Sistem, tam olarak doğru çalışarak yanlış sonucu üretti — ve hata ayıklamanın en zor türü budur.
Çözüm bir karakter
/* önce */
.beat { position: absolute; opacity: 0; … }
/* sonra */
.story .beat { position: absolute; opacity: 0; … }
Hikâye adımları artık yalnız kendi kapsamında bu kuralı alıyor. Hücreler geri geldi.
Asıl ders isimlendirmede
Buradaki hata bir CSS hatası değil. Bir ad verme hatası.
“beat” kelimesi iki bağlamda da doğru kelimeydi. Sorun da bu: doğru kelimeler ortaktır. item, card, row, panel, active, step, cell — hepsi bir gün ikinci bir yerde doğru kelime olacak.
Kural artık şu: jenerik bir ad kapsülsüz yazılmaz. Tek kelimelik, bağlamsız bir sınıf adı görünce henüz bozulmamış olsa bile düzeltiyorum.
Aynı hatanın diğer yüzleri
- Global JavaScript değişkenleri — iki betik aynı adı kullanınca sonra yüklenen kazanır, hata yoktur.
- Ortam değişkenleri — bir alt süreç ebeveyninden miras aldığı değişkenle farklı davranır; tek fark nereden başlattığındır. Bu tam olarak sesli asistanda başıma geldi.
- Veritabanı sütun adları — iki tablo birleştirilirken aynı adlı iki sütundan biri sessizce diğerini gölgeler.
Hepsinin ortak yanı: çakışma bir hata olarak değil, bir kural olarak çözülüyor. Ve kural, senin beklediğinden farklı tarafı kazandırıyor.
Sessizce çözülen her çakışma, ileride sessizce ortaya çıkacak bir hatadır.