Bugün Fatih Hayrioğlu’nun not defterinde okuduğum “CSS Kod Yazma Düzeni” adlı yazı üzerine ben de kendi görüşlerimi paylaşayım ve uzun süren sessizliğimi bozayım dedim. Yazıya devam etmeden önce, Fatih’in yazısını okumanızı tavsiye ederim.
Fatih, kendi geliştirme sürecinden yola çıkarak, CSS kodu yazarken nelere dikkat edilmesi gerektiği, nasıl bir düzen/standart oluşturmanız gerektiği hakkında, maddeler halinde çok güzel bir yazı hazırlamış. Çoğu maddeye katılsam da kısmen katılmadığım maddeler ve eklemek istediğim noktalar söz konusu. Katılmadığım, farklı görüş bildireceğim noktalar ve eklemek istediklerime gelirsek;
“5. CSS dokümanlarınızı anlamlı bölümlere ayırın.”
Bu maddeye tam olarak katılmıyorum denemez aslında. Geliştirme aşamasında düzeni korumak ve aradığınız şeyi daha kolay bulmak açısından işinizi oldukça kolaylaştıracaktır fakat yayın aşamasında her bir CSS dosyası tarayıcının ayrı bir istek yapmasına yol açacağından performans açısından iyi olmayacaktır.
Yayına çıkmadan önce css dosyalarınızı birleştirip, kodlarınızı online optimizasyon yapan uygulamalar ile optimize edin. Bu optimizasyon uygulamaları, ortak kullanılan tanımlamaları bir çatı altında toplayıp, kısaltmalar uygulayıp, boşluk, sekme vb. tarayıcının CSS kodunu okurken pas geçtiği karakterleri eleyip, yayın için en uygun hale getireceklerdir.
“6. Her satıra bir tanım yöntemini kullanın”
Bir önceki maddede bahsettiğimiz parçalı kodlama düzenine sahipseniz, kod aralarına yorumlar ekliyorsanız bu yöntemi kullanmak kod okunabilirliğini düşürecektir. Geliştirme ortamında en rahat okunabilir şekilde kodunuzu geliştirin ve yayına çıkmadan önce bir önceki maddede belirttiğim gibi, bir optimizasyon uygulaması ile kodunuzu optimize edin. Kodlarınıza daha sonra dönüp bakmanız gerektiğinde, geliştirme ortamındaki kodu en rahat şekilde okuyabilirsiniz.
“8. CSS özellik tanımlarını sıralayın.”
Sıralama yapmak kodlarınıza tekrar göz attığınızda ya da takım çalışması yapıyorsanız bir başkasının kodlarına baktığınızda oldukça zaman kazandıracaktır fakat bence sıralamayı alfabetik olarak yapmak kodlara tekrar göz atma işini daha fazla pratikleştiriyor. Özellikle çok fazla özelliğe sahip tanımlamalarda aradığınız özelliği bulmak açısından alfabetik sıralamanın çok faydasını görebiliyorsunuz.
Tabi kod yazarken alfabetik sıralamada yazmaya çalışmak da kod geliştirme sürecini uzatır ve zorlaştırır. Ben geliştirme ortamı olarak Notepad++ kullanıyorum. Notepad++ ile bu işlemi yapmak oldukça kolay. Alfabetik sıralanacak metni seçtikten sonra, TextFX menüsündeki TextFX Tools altında yer alan Sort lines case komutunu uygulayarak seçiminizi kolayca alfabetik sıralatabilirsiniz. Bir de buna Ayarlar menüsünden CTRL-1 vb kolay ulaşabileceğiniz bir kısayol atayarak, alışkanlık haline getirirseniz, hız konusunda da endişeniz kalmaz.
Son olarak konuyla ilgili, online olarak CSS optimizasyonu yapabileceğiniz siteler:
cssoptimiser.com
css.github.io/csso/csso.html
Hocam çok teşekkürler, gerçekten faydalı oldu. ancak ben css sıralamasını yapamadım, notepadde açtım, textfx te tag içeriklerini de sıralıyor, ben sadece tag, class adlarını alfabetik sıralamak istiyorum olmuyor. yardımcı olabilirseniz çok sevinirim.