Pek çok geliştiricinin, elementlere sınıf isimleri atarken kafası karışır ve genellikle yanlış isimler atarlar. Sınıf isimleri bir elementin nasıl göründüğünü ya da nerede konumlandırıldığını tanımlamamalı. İyi bir sınıf ismi, bir elementin neyi yansıttığını tanımlamalıdr. Bu makalede benim en çok kullandığım 10 sınıf ismini açıklamaları ile birlikte listeleyeceğim. Umarım bu makaleyi okuduktan sonra ne tür sınıf isimleri kullanmanız gerektiği konusunda net bir fikriniz olur.class=”fixed”
Bu sınıf adını her stil şablonunda, sola/sağa dayalı (float) ast (child) elementleri içeren kapsayıcılar üzerinde, içerisindeki elementleri temizlemek için şu şekilde kullanırım..fixed:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}.fixed{display:block;}/* */.fixed{min-height:1%;}* html .fixed{height:1%;}
Eğer birbiri ardına sıralanmış imajların yer aldığı aşağıdaki gibi bir durumla karşı karşıya isem:

  • İlk Resim
  • İkinci Resim

    • …


…o zaman bunu kullanırım:


    class=”alt”
    Alt “alternatif”in kısaltılmışı olarak kullanılır. Bu sınıf adını bir dizi elementin belirli bir şekilde stillendirilmesi gerektiği, ancak bazılarında değişiklikler uygulanması gerektiği durumlarda kullanıyorum. Örneğin imajların sola ya da sağa dayalı olduğu durumlarda.
    #content img{float:left;display:inline;margin-right:10px;border:1px solid #ccc;padding:1em 0;background:#fff;}#content img.alt{float:right;margin-right:0;margin-left:10px;}
    class=”selected”
    Bu sınıf adını genellikle navigasyon elementlerinde seçili olan elementi tanımlarken kullanırım.

  • Hakkımızda


    • Ayrıca JavaScript sekmeli içeriği kullandığımda seçili sekmeyi işaretlemek için de kullanıyorum.

    Etiket Bulutu

    ………


    class=”first”, class=”last
    :first-child ve :last-child sahte-sınıfları (pseudo-class) tüm tarayıcılar tarafından desteklenene kadar (tüm tarayıcılar derken, tarayıcıların en az %99.99’u, “tümü”) bunu kullanmaya devam edeceğim. Bu sınıf isimlerini bir elementin ilk ve son astların seçmek için kullanıyorum. Bunu gereksiz kodlamayı önlemek için çok güzel bir yöntem olarak görüyorum. Bu konuda detaylı bilgilendirmeyi sonraki makalelerimden birinde yazacağım.
    class=”image”
    Ben genellikle imajı etiketini kullanarak seçerim (örneğin #content img) ancak bu sınıf adı bir imaj kapsayıcsını kullanma gerektiğinde işime yarıyor (p class="image"). Diyelim bir haber listeniz bulunuyor ve bu listenin altında açıklamasını da içeren bir imajı sola dayalı olarak kullanmak ve içeriğin geri kalanını da onun sağından başlayarak takip etmek istiyorsunuz. O zaman ben şunu kullanıyorum:

    benim komik yüzümResim açıklaması buraya

    İçeriğin geri kalanı buraya…


    class=”inner”
    Ben genellikle bu sınıfı kullanırım ve bunu da özellikle sunum yapmam gerektiğinde kullandığımı söylemek zorundayım. Bu sınıf adını, fazladan stillemeye ihtiyaç duyduğum içiçe geçmiş divler kullanmak zorunda olduğum zaman kullanıyorum (örneğin çifte arkaplan gerektiğinde).


    class=”link”
    Adından da anlayacağınız üzere bu sınıf adını bağlantılar (link) üzerinde kullanıyorum. Ancak bunu genellikle kapsayıcıya, çoğunlukla da P etiketine dahil ediyorum, A etiketinin kendisine değil. Bunu en sık “yazının devamı” bağlantıları üzerinde kullanıyorum.

    Yazının devamı…


    Bu sayede anchor‘u P içerisinde .link üzerinden stilleyebilirken, ayrıca paragrafın kendisine de özel stilleme uygulayabilirim.
    class=”one”, class=”two”, class=”three”…
    Bu sınıf adlarını her bir elementi ayrı ayrı hedeflemek istediğim zaman kullanıyorum. Bunun en sık kullanıldığı durum, bir navigasyon üzerinde imaj değiştirme işlemini uygulamam gerektiği zamanlar:


    class=”even”, class=”odd”
    Sınf isimleri, tablolar içerisinde birbirini takip eden sıralar (rows) ya da listeler için kullanılıyor.

    • İçerik
    • İçerik
    • İçerik
    • İçerik


    ya da

    İçerik İçerik
    İçerik İçerik
    İçerik İçerik
    İçerik İçerik


    class=”section”
    Bu sınıf adı genel olarak “kutu” (box) olarak da bilinir. Ben bu sınıf adını içerik üzerinde özel bir stilleme uygulamamın gerektiği bazı bölümler üzerinde kullanıyorum.

    İçerik buraya…


    Çevirmenin notu: Ben makalenin orjinaline sadık kalmak için ve SEO kaygısı taşıdığımdan ötürü semantik içeriği korumak istemem gerekçesiyle sınıf (class) isimlerini İngilizce olarak bıraktım. Eğer siz Türkçe kullanmak istiyorsanız yukarıdaki sınıfların Türkçelerini aşağıda sırası ile listeledim:* class="sabit"
    * class="ast"
    * class="secili"
    * class="ilk", class="son"
    * class="resim"
    * class="dahili"
    * class="baglanti"
    * class="bir", class="iki", class="uc" ...
    * class="tek", class="cift"
    * class="bolge"