Son kullanma tarihi geçmiş, bayatlamış bir tarayıcı kullanıyorsanız, Mercedes kullanmak yerine tosbağaya binmek gibi... Web sitelerini düzgün görüntüleyemiyorsanız eh, bi' zahmet tarayıcınızı güncelleyiniz. Modern Web standartlarını karşılayan bir tarayıcı alternatifine göz atın.
Standartta belli bir değer yok. "Class"ları kullanma amacın CSS ve JS ile elementlere erişmek ve onları tanımlamak. Buna benzer olarak "id" de var. Aralarındaki fark "id" tanımlamasını sayfada bir kere yapabiliyorken, "class" tanımlamasını istediğin kadar yapabilirsin. Tabii ki birden fazla aynı "id" tanımlarsın fakat erişmek istediğinde kodunda önce gelen "id"li element seçilecektir.
Ancak Bootstrap gibi CSS frameworkleri kullanırsan önceden tanımlı "class"ları kullanman gerekiyor. Mesela "row" ve "col" yapısı ile eleman konumlandırma yapıyorsun.
Tabii ki dilediğiniz gibi sınıf ismi verebilirsiniz, ancak bazı kuralları var.
Seçici (sınıfınız), alt çizgi (_), kısa çizgi (-) veya bir harf (a-z) ile başlamak zorunda. Seçici (sınıfınız) bir rakam (9), iki kısa çizgi (--), bir kısa çizgi (-) ve ardından rakam (-9), bir alt çizgi (_) ve ardından kısa çizgi (_-) ile başlayamaz. Seçici en az iki karakterli olmak zorundadır.
Seçiciniz (sınıfınız) aşağıda görünen regex için uygun yazılmalı;
Kod:
-?[_a-zA-Z]+[_-a-zA-Z0-9]*
Yukarıdaki kurallara uyduğunuz sürece seçiciniz (sınıfınız) işlevini görecektir. Ancak bu kurallar dışında yazılı olmayan etik kurallar da bulunuyor.
Bunlar genelde projenin okunurluğunu arttıran ve okuyan kişiye yardımcı olan kurallar. Örnek vermek gerekirse bir butonun sınıfına (.dugme) yazmak sadece sizin okuyabileceğiniz veya anlayabileceğiniz bir isimlendirme olur. Bunun yerine (.button) isterseniz de projenize özel prefix veya suffix kullanarak yazabilirsiniz.
Projenizin adının technopat olduğunu varsayarsak prefix veya suffix için 'tech' terimini kullanırsak bu sınıflar şöyle görünecektir;
CSS:
.tech-button{
// Sınıf değerleri
}
.button-tech{
// Sınıf değerleri
}
Ön veya son eklerin ana seçiciden nasıl ayrılacağına siz karar verebilirsiniz. Aşağıdaki örnekler size bu konuda da yardımcı olacaktır.
CSS:
.tech-button{
// Sınıf değerleri
}
.button-tech{
// Sınıf değerleri
}
.techButton{
// Sınıf değerleri
}
.buttonTech{
// Sınıf değerleri
}
.tech_button{
// Sınıf değerleri
}
.button_tech{
// Sınıf değerleri
}
// vb.
Benzer elementleri gruplayarak yazmanızda size veya projenizi okuyan kişiye kolaylık sağlar. Örnek vermek gerekirse 2 elementimizin olduğunu varsayalım. Bu elementler aynı işlevi gören, genel olarak aynı değerlere sahip ancak bir kaç değerlerde farklılık gösteren elementler olsun. Farklılık gösteren değerlerin arka plan rengi olduğunu varsayalım. Bu durumda aşağıdaki kullanımdan kaçınarak;
Bu ve benzeri bir çok etik kural bulunuyor. Bu etik kurallar yazılı olmamakla beraber okunabilirliği, kullanımı ve işlevselliği arttırdığı gibi daha profesyonel ve düzenli çalışmanızı sağlar. Eğer forum genelinde Front-End alanında bu tür konular için talep varsa bu mesajı cevaplayarak veya beni etiketleyerek belirtirseniz bu ve benzeri konular hakkında bilgim dahilinde anlaşılır bir kaç makale yazabilirim.
---
Regex: Regular Expression / Düzenli İfade Prefix: Ön-ek Suffix: Son-ek
