ID ve Class Farkı

CSS'de oldukça kafa karıştıran bir konudur ID ve class. Bazen hangisini nerede kullanacağınızı kestiremeyebilirsiniz o yüzden rastgele kullanmışlarınız vardır aranızda. Aslında arasında devasa bir fark yoktur, sadece kullanım yerleri başkadır. Bu kullanım yerlerini de World Wide Web Consortium (W3C) belirler. Dolayısıyla biz de onlara uymak zorundayız çünkü yarın bir gün class'ı ID yerine kullanamazsınız dediklerinde bütün tasarımı değiştirmek gerekecektir. Sadece bu durum için değil her zaman bu kurallara uymak bizim avantajımızadır. Şimdi ID ve class arasındaki farka ve kullanımlarına gelelim.

ID Nedir?

ID ingilizce "Identity" kelimesinin kısaltılmışıdır ve Türkçe "Kimlik" anlamına gelmektedir. Tek bir varlığı tanımlar. Örneğin; hepimizin bir kimlik numarası vardır ve hiçbiri aynı değildir. HTML'de ID, tek bir element için kullanılır. Genellikle header, footer, navbar, sidebar gibi tekrar etmeyen alanları tanımlamak için kullanılır. Her sayfada ortak olarak kullanılan ID olabilir (header, footer, ...) ancak tek sayfada aynı isimde birden fazla ID olmamalıdır. Çünkü hem W3C kurallarına uymaz hem de Javascript kullanacağımız zaman aynı isimde ID varsa karışıklığa yol açar.

document.getElementById("id")

Ayrıca bir elemente ID tanımladık varsayalım, aynı sayfanın herhangi yerinde o ID'ye link verilmişse, linke tıklandığında otomatik olarak sayfa tanımlanmış ID'ye kayacaktır. Aşağıda İçeriğe git linkine tıklandığında sayfa, ID'si content olana kayar.

<div id="content">İçerik</div>

<a href="#content">İçeriğe git</a>

CSS'de # (diyez) işareti ile kullanılır.

#idismi
{
    position:absolute;
    left:25px;
    top:25px;
    width:150px;
}

Class Nedir?

Class'larda ID'lere benzer lakin amaçları farklıdır. ID'nin aksine tek sayfa içerisinde birçok kez tanımlanabilir. Sayfa içerisinde aynı özellikleri taşıyan yerler varsa özellikle yazı stilleri gibi (örneğin; başlıkların aynı renkte ya da boyutta olduğu yerler) Class kullanılmalıdır. Class'lar ID'de olduğu gibi Javascript içinde de olabilir. CSS'de . (nokta) işareti ile kullanılır.

.menu 
{
    font-size:14px;
    color:#ff0000;
}

Nerede Class Nerede ID Kullanmalıyım?

Bunu örnekle açıklamak istiyorum. Varsayalım kütüphane açacağız. Öncelikle kitaplarımızı felsefe, psikoloji, polisiye ... gibi kategorilere bölmemiz gerekir ve kütüphanemizde bu kitaplara özel raflar oluşturmalıyız. İşte kitaplara özel oluşturulan bu raflara ID diyoruz. Her kitabın sayfa sayısı, yazı büyüklüğü, ebatları farklıdır. Değişik kitaplar aynı rafta toplanmıştır ve bu işleme de Class diyoruz.

HTML Kodu

<div id="sidemenu">
    <div class="menu">
        <p class="birinci_yazi">Birinci yazı</p>
        <p>İkinci yazı</p>  
        <p>Üçüncü yazı</p>  
    </div>
</div>

CSS Kodu

div#sidemenu
{
    position:absolute;
    left:25px;
    top:25px;
    width:150px;
}
div.menu 
{
    font-size:14px;
    color:#ff0000;
    border:2px solid #7FC07F;
}
p.birinci_yazi 
{
    font-size:24px;
    color:#ff0000;
}