CSS Optimizasyonu nasıl yapılıyor?

Uzun lafın kısası, esasen benim bu yazıyı yazmamın nedeni sizi http://www.cleancss.com ile tanıştırmak. Siteye direk kes-yapıştır yöntemi ile CSS dosyanızı aktarabileceğiniz gibi internet ortamındaki CSS dosyanızın konumu belirterek de kullanabilirsiniz. Sistemin yaptığı işlem tüm CSS kodlarınızı kontrol ettikten sonra seçtiğiniz seçeneklere uygun olarak kodunuzu optimize etmek. Optimizasyon işlemi sonrası yeni CSS kodunuzu sitenin alt tarafında bulabileceğiniz gibi tüm yapılan değişikliklere ait açıklamalar da bir liste olarak sıralanıyor.

Aşağıdaki CSS kodumu optimizasyon motoruna aktardım.

span {
border-width:2px;
border-color:black;
border-style:dashed;
}

Aldığım sonuç şu şekilde oldu;

span {
border-width:2px;
border-color:#00;
border-style:dashed;
}

Optimizasyon amacıyla bu CSS sınıfı içerisinde yapılan tek değişiklik renk değeri ile ilgili. Yüzlerce renk tanımladığımız bir CSS dosyası içerisinde bu ve bu gibi değişiklikler biriktiğinde ciddi bir fark oluşuyor. Diğer yandan http://www.cleancss.com adresindeki araç CSS dosyası içerisinde ikişer defa tanımlanmış CSS sınıflarını kontrol etmek gibi ek özelliklere de sahip. Fakat sadece CSS optimizasyon araçlarını kullanmak yeterli değil. Gelin bir de benim yaptığım optimizasyon sonrası yukarıdaki CSS sınıfının son haline bakalım.

span {
border:2px black dashed;
}

İşte bu kadar. Yukarıdaki CSS sınıfımı ek olarak CSS optimizasyon motoruna aktardığımda oluşan son hali de aşağıdaki gibi.

span {
border:2px #00 dashed;
}

Sonuç muhteşem. En yukarıdaki CSS sınıfımızdan buralara geldik. Benim tavsiyem CSS optimizasyon araçlarını kullanmanızdan yana.