CSS performansinin artmasini saglamak ve sayfa yükleme hizini artirmak için kullanacaginiz bir çok yöntem var. Bu yazimizda hizlica sayfaniza uygulayabileceginiz bir ipucu verecegiz.
Tarayicinin aradigini bulabilmesi için her DOM nesnesine göz atmasi gerekir. Asagidaki örnege göz atalim örnegin:
.home-page .header-main .nav-main ul
Yukaridaki css örneginde tarayici ilk olarak sayfadaki tüm ul nesnelerini bulacak, daha sonra bu ul nesneleri içinde nav-main geçen tüm elementleri, daha sonra bunlarin içinde .heaeder-main geçenleri ve en sonunda da bulduklari içinde .home-page geçenleri bulacak. Bu arama tamamlandiktan ve ilgili tüm nesneler bulunduktan sonra css ile tanimladigimiz biçimlendirme sitili uygulanmasi tamamlanmis olacak. Bu örnegimizden çok daha verimli çalisan bir tanimlama yapabiliriz.
.nav-list
Yukaridaki gibi bir tanimlamada ise tarayici sadece içinde .nav-list geçen tüm elementleri tek seferde bulacak ve buldugu nesnelere biçimlendirme sitilimizi uygulayacak. Bu sayede gereksiz iç içe aramalardan kurtulacagiz, basit bir degisiklikle daha verimli bir biçimlendirmemiz olacak.
Css biçimlendirmeleri çin kullandiginiz isimlendirmelere karar vermek bazen zor olabiliyor, bunun için kullanabileceginiz bazi isimlendirme metodlari var. Örnegin ComponentName-descendentName isimlendirme yöntemi veya BEM isimlendirme yönetemi tercih edilebilir. Isimlendirme yöntemleri için ileriki bir yazimizda daha detayli bilgi verecegiz.
Diger bir konuda sayfanizda biçimlendirmeyi ID'ler üzerinden yapmaktan kaçinmak ve bunun yerine class'lari kullanmak. Bu sayede biçimlendirme sitillerinizi tekrar tekrar yazip farkli ID'ler için kullanmak yerine tek bir çati altinda toplar ve ilgili class veya class'lari tanimladiginiz nesnelere atamis olursunuz. Buda daha az satir css ile biçimlendirme yapmayi saglayacagi için dosya boyutunu azaltir sayfa yükleme hiziniz artar.
Bu makale Toptal.com blogunun izni ile türkçeye çevirilmistir. Orjinal içerige bu linkten erilebilirsiniz.