HTML class isimlendirmeleri nasıl olmalı? — Clean Code
Birçok yazılımcı geliştirme aşamasında isimlendirme konusunda hayli vakit harcayabilir. Hatta bazıları için kod yazımının kendisinden çok vakit harcadığı bir duruma dönüşebilir. Çünkü isimlendirme yaparken üzerinde çalışılan class, id, fonksiyon, değişken, dosya gibi öğelerin kullanım amacını doğru şekilde yansıtan açıklayıcı, anlamlı, kısa ve proje içinde tutarlı isimlendirmeler kullanılmalıdır.
Peki neden bu şekilde isimlendirme yapmalıyız?
- Yazılan kod daha okunabilir ve anlaşılır hale gelir. Ekip arkadaşlarımız ya da başka ekipten geliştiriciler, kod bloklarını daha kolay anlayabilir ve bu da işbirliği ve bakım süreçlerini iyileştirir.
- Doğru isimlendirmeler projelerimizde tutarlılık sağlar, proje büyüdükçe isimlendirme süreçleri kolaylaşır.
- CSS dosyalarımız daha düzenli hale gelir. Anlamlı isimlendirilmiş class’ı bulmak ve yönetmek her zaman daha rahattır.
- Dış kaynak kütüphane kullanımında isim çakışmasını engeller.
- SEO (arama motoru optimizasyonu) ve erişilebilirlik yönünden fayda sağlar.
- DRY(don’t repeat yourself) prensibine uygun olarak kod tekrarı yapılmasının önüne geçer.
- Büyük projelerde, sürekli olarak yeni alanlar, özellikler eklenir ve tasarımsal revizeler olur. Doğru isimlendirme, bu değişikliklere daha iyi uyum sağlar ve kod güncellemeleri sorunsuz ilerler.
Yazılımda Clean Code (Temiz Kod) denilen çok önemli bir kavram vardır. Bu kavram kodun okunabilir, anlaşılır, sürdürülebilir ve düzenli olmasını vurgular. Doğru isimlendirme, Clean Code’un önemli bir parçasıdır ve Clean Code prensiplerine uyum, doğru isimlendirme ile başlar.
Peki web sitelerimizin iskeletini oluşturmamıza olanak sağlayan HTML’de nasıl bir class isimlendirmesi yapmalıyız?
- Class adları küçük harflerle (lower-case) yazılmalı ve içindeki kelimeler (-) ya da (_) ile ayrılmalıdır.
<div class=”header-block”></div>
<div class="header_block"></div>
<!-- (-) ile ayrılmadığı durumlar iki ayrı class ismi olarak belirlenir.-->
<div class="header block"></div>
<!-- Bu üç div birbirinden tamamen farklıdır. -->Türkçe ve camelCase isimlendirmeler kullanılmamalıdır. camelCase kelimelerin ilk harfi küçük olan ardına gelen kelimelerin baş harfleri büyük olan isimlendirme türüdür.
<div class=”başlık-alanı”></div>
<div class="headerBlock"></div>
<div class="başlıkAlanı"></div>
<!-- Kesinlikle bu örneklerdeki gibi kullanılmamalıdır. -->
<!-- Doğru kullanım bu şekildedir; -->
<div class="header-block"></div>- camelCase isimlendirmeler html elementlerine id vermemiz gereken durumlarda kullanılır.
<div id=”sendButton”></div>- Spesifik ve açıklayıcı olmalı, uygulandığı alanın amacını açıkça tanımlamalıdır.
<article class=”article-content”></article>
<nav class="menu-block"></nav>
<div class="post-date"></div>- Kısa ve öz tutulmalı, aşırı uzun isimlendirmelerden kaçınılmalıdır.
<div class=”authentication-block-container-area”></div>
<div class="frequently-asked-questions-area"></div>
<!-- Aşağıdakiler gibi kullanmak daha uygundur. -->
<div class="authentication-block"></div>
<div class="auth-block"></div>
<div class="faq-area"></div>- Sizin dışınızdaki yazılımcıların anlamakta zorlanacağı kadar kısa isimlendirmelerden kaçınılmalıdır.
<div class=”lg-cn”></div>
<div class="ar-co"></div>
<!-- Aşağıdaki şekillerde kullanılabilir. -->
<div class="login-content"></div>
<div class="article-content"></div>- Birçok yerde kullanılabilecek genel isimler tek başına kullanılmamalıdır.
<div class=”blue”></div>
<div class="right"></div>
<div class="back"></div>
<!-- Aşağıdaki şekilde kullanmak daha uygundur. -->
<div class="blue-btn"></div>
<div class="content-right"></div>
<div class="back-item"></div>Peki bu önerilerin temeli nedir? Neden isimlendiremelerimizi bu şekilde yapmalıyız?
- Bazı tarayıcılar veya platformlarda büyük/küçük harf duyarlılığı farklılık gösterebilir. Bu sebeple class isimlerimizi hep küçük harfle kullanmak oluşabilecek, öngörülemeyen sorunların önüne geçecektir.
- İsimledirmelerde Türkçe isim kullanmıyoruz çünkü yazılımın dili evrenseldir ve İngilizcedir. İngilizce dışında dil kullanmak ayrıca yine büyük/küçük harf duyarlılığındaki gibi dil bazlı karakter farklılıklarına bağlı olarak sorunlar yaratacaktır.
- camelCase kullanım class isimlendirmelerinde değil id, değişken, fonksiyon gibi isimlendirmelerde tercih edilen genel kabul görmüş isimlendirme türlerinden biridir.
- Uzun isimlendirmeler özellikle büyük projelerde CSS ile birlikte kullanılacağından dosya boyutunu arttıracaktır ve bu da performansı olumsuz yönde etkileyecektir. Ayrıca uzun isimlendirmeler kodun anlaşılabilirliğini zorlaştırır ve geliştirme sürecini yavaşlatır.
- Çok kısa isimlendirmeler ise kafa karışıklığına sebep olur ve karakter sayısı az olacağı için kısıtlı kullanım alanı olacaktır. Bu da geliştirme sürecinde sürekliliği olmayan bir hale gelecektir.
- .left .red gibi isimlendirmeler tek başına kullanıldığında ifade ettiği anlam yetersiz olacaktır ve ayrıca farklı alanlarda da kullanılabileceği için CSS kodunu karmaşık hale getirecektir.
Yukarıda belirttiğim tüm durumlar HTML ve CSS standartlarına uygun olarak web geliştirme toplulukların alışkanlıklarına ve belirli kütüphanelerin beklentilerine göre belirlenmiş kurallardır. Genel kullanım bu yöndedir ancak bu kullanımlar bir zorunluluk değildir.
İsimlendirme standartları, kodun okunabilirliğini artırmak, projede aynı noktada olmak, düzen sağlamak, hata olasılığını azaltmak ve ekip içinde etkili bir işbirliği sağlamak amacıyla belirlenir.
Web dünyasının standartlarını belirleyen kurumun(W3C) HTML ile ilgili dokümanına buradan ulaşabilirsiniz.
Tüm bunları anlattıktan sonra ufak bir örnek kod bloğuyla yazımızı sonlandıralım.
<header class="header-container">
<div class="logo-block">
<h1>World of the Web</h1>
</div>
<nav class="menu-block">
<ul>
<li><a href="">Hepinizi</a></li>
<li><a href="youtube.com/@worldoftheweb">Youtube</a></li>
<li><a href="/">Kanalıma</a></li>
<li><a href="/">Beklerim</a></li>
</ul>
</nav>
<div class="login-btn">
<span>Abone ol</span>
</div>
</header>Web geliştirmenin yanı sıra web dünyasının genel dinamikleri ve teknolojileri hakkında da içerikler paylaştığım youtube kanalıma hepinizi beklerim.
Yazımızın referans aldığı kaynaklar;
