HTML div'de class önemli midir?

Nounie

Nounie

Hectopat
Katılım
18 Ağustos 2020
Mesajlar
2.349
Çözümler
11
Daha fazla  
Cinsiyet
Erkek
Mesela ben bir div'e class ismi verdim. Bu class'ın belli isimleri mi var yoksa ne yazarsam oluyor mu?
Örnek:
HTML: 
<div class="dedigim yer burası">
</div>
 
Örnek olarak stil dosyanda

CSS: 
.classadi {
  background-color: blue;
}

Böyle bir kod varsa,
HTML: 
<div class="classadi">
</div>


Yazan yerin arka planı mavi renkte olur.
 
dgknbzglu dedi:
Örnek olarak stil dosyanda

CSS: 
.classadi {
  background-color: blue;
}

Böyle bir kod varsa,
HTML: 
<div class="classadi">
</div>


Yazan yerin arka planı mavi renkte olur.
Genişletmek için tıkla...
Yani class ismi ben ne dersem o olur demi? Belli bir ismi yok.
 
Onu bir isim gibi düşünün, elemana bir isim verirsiniz ve CSS'e geçtiğinizde o elemanı o isimle çağırırsınız. İstediğinizi yazabilirsiniz.
 
Nounie dedi:
Yani class ismi ben ne dersem o olur demi? Belli bir ismi yok.
Genişletmek için tıkla...
Stil dosyasında yaptığınız görsel değişiklikleri, verdiğiniz element ismiyle ön yüze çekebilirsiniz.
Yani ;
CSS: 
.busizinverdiginizclassadi {
//burası değişiklerin yer aldığı bölge
background-color: blue;
}

Bu değişiklikleri çekmek için HTML kodunda
HTML: 
<div class="busizinverdiginizclassadi"></div>
şeklinde kullanırsınız.
 
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.

Bkz. Bootstrap
 
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;

CSS: 
.element-1{
    display:inline-block;
    width:auto;
    padding:.75rem .25rem;
    background-color:#F3F3F3;
}

.element-2{
    display:inline-block;
    width:auto;
    padding:.75rem .25rem;
    background-color:#F9F9F9;
}

aşağıdaki kullanımı tercih etmeniz size kolaylık sağlayacaktır;

CSS: 
.element{
    display:inline-block;
    width:auto;
    padding:.75rem .25rem;
}

.element.type-1{
    background-color:#F3F3F3;
}

.element.type-2{
    background-color:#F9F9F9;
}

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
 
Son düzenleme:

Benzer konular

O
HTML CSS öğrenilmeli midir?
2
Mesaj
13
Görüntüleme
1B
bitwise
bitwise
Reis_Ndombele
Yazılım Bilimi HTML eğitim serisi iyi midir?
Mesaj
5
Görüntüleme
971
migration
migration
N
Web yazılımcı olmak için HTML yeterli midir?
2 3
Mesaj
27
Görüntüleme
1B
Noodleyiyenkel
N
Zenvoy
  • Çözüldü
Çözüldü  HTML Yönlendirme
Mesaj
2
Görüntüleme
732
Zenvoy
Zenvoy
W
PHP class hatası
Mesaj
2
Görüntüleme
149
533388
533388

Yeni konular

Yeni mesajlar

Geri
Yukarı