🚀 HTML Style Guide: Temiz ve Profesyonel İş Akışı

Endüstri standartlarında, okunabilir ve sürdürülebilir HTML yazımı için stil rehberi.

Selamlar, bugün kodun sadece 'çalışması' ile 'profesyonel olması' arasındaki o ince çizgiyi konuşacağız: Stil Rehberi (Style Guide).

Bir projeye tek başınıza başlarken her şey kontrolünüzde görünebilir. Ancak ekip büyüdüğünde veya projeniz aylar sonra tekrar açtığınız devasa bir yapıya dönüştüğünde, yazdığınız HTML'in disiplini hayati önem taşır.

Neden Bir Standart Gerekli?

  1. Okunabilirlik: Başka bir geliştirici (veya 6 ay sonraki siz) koda baktığında yapıyı anında kavramalı.
  2. Hata Ayıklama: Kapanmamış etiketler veya yanlış hiyerarşiler tarayıcıda garip görsel hatalara yol açar.
  3. Performans & SEO: Standart dışı kodlar tarayıcı parser'larını yorar ve arama motorları tarafından 'kalitesiz' olarak damgalanabilir.

Ufak bir tecrübe: OvidRacer projemizin ilk prototiplerinde UI tarafında çok hızlı ve düzensiz kod yazmıştık. Proje büyüyüp yüzlerce satır HTML'e ulaştığında, tek bir yanlış kapatılmış div yüzünden tüm yarış arayüzü kaymaya başladı. O gün oturduk ve tüm ekiple tek bir stil rehberine bağlı kalma kararı aldık. Godot'taki sahne hiyerarşisi (Scene Tree) ne kadar düzenliyse, HTML ağacınız da o kadar disiplinli olmalı.

🚀 Sanal Kodlama Alanı Yükleniyor...

Endüstri Standartları (Best Practices)

  1. Küçük Harf Zorunluluğu: Tüm etiketler ve nitelikler küçük harf olmalıdır. <DIV> yerine <div>, CLASS yerine class yazın. Bu bir standarttır.
  2. Tırnak İşaretleri: Nitelik değerlerini her zaman çift tırnak (" ") içine alın. class=btn yerine class="btn" yazın.
  3. Boşluklar ve Girintileme (Indentation): Her hiyerarşi seviyesi için 2 veya 4 boşluk kullanın. Tab yerine boşluk kullanmak farklı editörlerde kodun kaymasını engeller.
  4. Kendi Kendini Kapatan Etiketler: HTML5'te <br> veya <img> gibi etiketlerin sonuna / koymak zorunlu değildir, ancak projenizde birini seçin ve tutarlı olun.
  5. Boolean Nitelikler: disabled="disabled" yerine sadece disabled yazmak daha temizdir.
  6. Alt Niteliği: Tüm <img> etiketlerine mutlaka açıklayıcı bir alt metni ekleyin. Hem erişilebilirlik hem SEO için bu 'opsiyonel' değil, 'zorunluluktur'.

Temiz kod yazmak zaman kaybetmek değil, gelecekteki zamanı kurtarmaktır.

Ovid Game Studio | Teknik Notlar ovidgame.com