Jetsite Özel HTML ve CSS Kullanırken Tasarım Çakışmalarını Önleme

Jetsite ile kendi HTML ve CSS kodlarınızı ekleyerek sitenize özel tasarım ve içerikler oluşturabilirsiniz. Ancak, eklediğiniz CSS kodları Jetsite’nin varsayılan tema CSS kodları ile aynı seçici isimlerine (class veya id) sahipse, tasarım çakışmaları yaşanabilir.
Bu çakışmalar sitenizin görünümünü bozabilir veya beklenmedik şekilde değiştirebilir.

Aşağıdaki adımlar, bu sorunun önüne geçmenizi sağlayacaktır.
 

1. CSS Çakışması Nedir?

• CSS çakışması, eklediğiniz özel CSS kodunun Jetsite tema CSS kodları ile aynı seçiciye sahip olması durumudur.

Örneğin:
Bu alan HTML ve CSS ile oluşturulmuştur.
Bu kod, belirli bir div içeriğini gradyan ile renklendirir.

Ancak hali hazırda Jetsite tarafından kullanılan bir seçici isim (class veya id) kullanılırsa site şablonu içerisinde o seçici ismi kullanan diğer elementler de etkilenerek sitenin tasarımının bozulmasına neden olacaktır.

Örneğin b-btn-l sınıfı, Jetsite temalarında varsayılan buton stilini tanımlayan bir class’tır. Özel CSS kodunuzda bu class adını kullanarak stil değişikliği yaparsanız, yalnızca eklediğiniz buton değil, Jetsite’deki tüm b-btn-l class’ına sahip butonlar etkilenir. Bu durum sitenizin genel tasarımında beklenmedik değişikliklere yol açabilir.


  .b-btn-l {

    background: linear-gradient(90deg, red, blue);
}
 

2. Çakışmayı Önlemek İçin Özel Sınıf ve ID Kullanın

• Kendi CSS’inize benzersiz class veya ID isimleri verin.
• Tema kodlarıyla karışma ihtimali düşük, açıklayıcı isimler kullanın.
• Önerilen yöntem: prefix (ön ek) eklemek.

4. !important Kullanımını Sınırlı Tutun

• !important sadece gerekli durumlarda kullanılmalıdır.
• Fazla kullanmak, hem tema hem de sizin kodlarınızın yönetimini zorlaştırır.

5. Tarayıcı Denetleme Aracı ile Kontrol Edin

• Kod eklemeden önce tarayıcı geliştirici araçlarını (F12) kullanarak:
  • Hangi class ve ID’lerin kullanıldığını görün.
  • Benzersiz isim seçin.
• Bu sayede tema kodlarıyla çakışma ihtimali azalır.

İpucu:
Kendi CSS’inizi hazırlarken, tüm class ve ID’lere markanıza, projenize veya adınıza özel ön ek eklemek en güvenli yöntemdir. Örneğin: .firma-, .ozel-, .isim- gibi.