Modern Yazılım Mimarisinde İsimlendirme Sanatı: UI Bileşenleri, CSS ve Design Token Taksonomisi

Kod Tabanında İletişim: İsimlendirmenin Kritik Rolü

Bilgisayar bilimlerinin en bilinen aforizmalarından biri Phil Karlton'a aittir: "Bilgisayar bilimlerinde yalnızca iki zor problem vardır: Önbellek geçersiz kılma (cache invalidation) ve isimlendirme (naming things)." Modern web geliştirme dünyasında bu zorluk, yalnızca backend değişkenleri veya veritabanı şemalarıyla sınırlı değildir. Tasarım sistemlerinin (Design Systems), mikro ön yüzlerin (Micro-frontends) ve devasa ölçekli CSS/JavaScript mimarilerinin yaygınlaşmasıyla birlikte; arayüz bileşenlerini, tasarım belirteçlerini (design tokens) ve CSS sınıflarını isimlendirmek doğrudan bir mühendislik disiplinine dönüşmüştür.

İsimlendirme, kod tabanını kullanan mühendisler ile tasarımcılar arasında ortak bir zihinsel model (mental model) kurar. Yetersiz veya hatalı kurgulanmış bir isimlendirme standardı; yinelenen kod bloklarına, stil çakışmalarına, dokümantasyon karmaşasına ve en nihayetinde teknik borcun katlanarak büyümesine yol açar.

"Kullandığımız dil yalnızca nesneleri nasıl adlandırdığımızı değil, onlar hakkında nasıl düşündüğümüzü ve ekip içinde nasıl iletişim kurduğumuzu da belirler. Tutarlı bir terminoloji, refactoring maliyetlerini yarı yarıya düşürür."

İsimlendirmede Kritik Denge: Aşırı Genel ile Aşırı Spesifik Arasındaki İnce Çizgi

Ön yüz mimarisinde en sık karşılaşılan tuzak, semantik bağlamı kaçırmaktır. Seçilen isimler iki uç noktada hata barındırır:

1. Aşırı Genel İsimler (.box, .card, .item, .data): Bileşenin ne iş yaptığını, hangi veriyi temsil ettiğini veya nerede konumlandığını açıklamaz. Kod tabanı büyüdükçe bu sınıflar öngörülemez hale gelir ve diğer stilleri ezme (overriding) riski yaratır.
2. Aşırı Spesifik İsimler (.blue-rounded-button-right-sidebar): Bileşenin görsel özelliklerini veya sayfa üzerindeki konumunu doğrudan isme yansıtır. Tasarım sisteminde butonun rengi mavi yerine mora döndüğünde ya da sağ kenar çubuğundan ana gövdeye taşındığında bu isim anlamsızlaşır ve teknik borç oluşturur.

Modern yaklaşım, bileşenleri görsel özelliklerine göre değil, üstlendikleri işleve ve anlamsal rollere (semantics) göre adlandırmaktır.

Design Token Taksonomisi: Ölçeklenebilir Bir Hiyerarşi Kurmak

Design Token'lar, tasarım kararlarının (renkler, tipografi, aralıklar, animasyonlar) platformlar arası paylaşılabilir veriler (genellikle JSON/CSS Custom Properties) olarak saklanmasıdır. Çok markalı (multi-brand) veya karmaşık kurumsal ürünlerde esnek bir token taksonomisi oluşturmak hayati öneme sahiptir.

Modern kurumsal mimarilerde kabul gören 3 katmanlı token mimarisi şu şekildedir:

• Global (Temel / Core) Token'lar: Sistemin temel değerleridir; doğrudan CSS veya platform değerlerini taşır. (color.blue.500: #1d72b8)
• Anlamsal (Semantic / Alias) Token'lar: Global değerlere fonksiyonel anlam yükler. Tema değişikliklerini (Dark Mode vb.) yöneten katmandır. (color.action.primary: {color.blue.500})
• Bileşen (Component) Token'ları: Belirli bir UI bileşeninin özelliklerine atanmış dar kapsamlı token'lardır. (button.primary.background: {color.action.primary})

Örnek CSS Custom Properties Yapılandırması

/* 1. Global / Primitives */
:root {
  --color-palette-indigo-600: #4f46e5;
  --color-palette-slate-900: #0f172a;
  --spacing-base-4: 1rem; /* 16px */
  --radius-md: 0.375rem; /* 6px */
}

/* 2. Semantic / Theme Tokens */
:root {
  --surface-primary: var(--color-palette-slate-900);
  --action-interactive-default: var(--color-palette-indigo-600);
}

/* 3. Component-Specific Tokens */
.ui-button--primary {
  --button-bg: var(--action-interactive-default);
  --button-padding: var(--spacing-base-4);
  --button-border-radius: var(--radius-md);

  background-color: var(--button-bg);
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
}

UI Bileşen İsimlendirme Metodolojilerinin Karşılaştırması

Farklı ekipler ve proje ölçekleri farklı isimlendirme yaklaşımlarını gerektirebilir. CSS mimarisinde öne çıkan yöntemlerin teknik karşılaştırması aşağıdaki gibidir:

TypeScript ve Modern Arayüz Mimarilerinde İsimlendirme Standartları

Bir React, Vue veya Svelte bileşeni kurgularken yalnızca DOM düğümlerini değil, bu bileşenlerin durumlarını (state) ve özelliklerini (props) de açıkça tanımlamak gerekir.

• Fiil Odaklı Olay İsimleri: Olay işleyicilerde (event handlers) her zaman tutarlı bir şablon uygulanmalıdır (handleClick yerine handleSearchSubmit, dışa aktarılan prop için onSearchSubmit).
• Boolean Özellikler İçin Yardımcı Ön Ekler: Durum değişkenleri mutlaka is, has, can, should gibi yardımcı ön eklerle başlatılmalıdır (loading yerine isLoading, open yerine isOpen).

// UI Bileşeni Tip Tanımlama Best-Practice Örneği
export interface AccordionItemProps {
  /** Benzersiz kimlik anahtarı */
  id: string;
  /** Başlık alanında gösterilecek metin veya düğüm */
  title: React.ReactNode;
  /** Gövde içeriği */
  children: React.ReactNode;
  /** Bileşenin başlangıçta açık olup olmadığı */
  isDefaultOpen?: boolean;
  /** Kilitli/Devre dışı bırakılmış durum */
  isDisabled?: boolean;
  /** Genişleme durumu değiştiğinde tetiklenecek fonksiyon */
  onToggleStateChange?: (id: string, isOpen: boolean) => void;
}

İsimlendirmenin Teknik SEO ve Web Performansına Etkisi

Birçok web yöneticisi isimlendirmeyi yalnızca kod okunabilirliği ekseninde ele alır. Ancak doğru terminoloji ve semantik mimari, arama motoru optimizasyonu (SEO) ve Core Web Vitals metriklerini doğrudan etkiler:

1. Semantik HTML ve Erişilebilirlik (A11y): Arama motoru botları, web sayfasının anlamsal ağacını (Accessibility Tree) tarayarak içeriğin hiyerarşisini anlar. CSS ile .button yazmak yerine HTML native <button> kullanmak ve bunu aria-expanded, aria-controls gibi standart özniteliklerle zenginleştirmek indeksleme kalitesini doğrudan artırır.
2. Kritik Render Yolu (Critical Rendering Path) ve CSS Payload: Plansız, gelişigüzel adlandırılmış CSS sınıfları binlerce satırlık artık kodun (dead code) birikmesine yol açar. İyi kurgulanmış bir bileşen taksonomisi, CSS dosya boyutunu küçültür ve First Contentful Paint (FCP) ile Interaction to Next Paint (INP) skorlarını iyileştirir.
3. DOM Karmaşıklığı (DOM Depth): Net bileşen sınırları tanımlandığında gereksiz sarmalayıcı (wrapper) <div> kullanımı azalır. Düşük DOM düğüm sayısı tarayıcının yeniden akış (reflow) ve yeniden boyama (repaint) sürelerini minimuma indirir.

Kaynak: Smashing Magazine - https://smashingmagazine.com/2026/10/how-name-things/