Kullanılmayan CSS sorunları nasıl giderilir

Bir blogda bazı hız testleri yapıyorum ve her zaman kullanılmayan CSS hakkında şikayetler alıyorum. Ama bu hiç kullanmadığım CSS değil, sadece o sayfada kullanılmıyor.

Şimdi yapılandırılmış bir şekilde çalışıyorum, ancak yine de dosyada kullanılmayacak bazı CSS olması gerekiyor, çünkü başka bir sayfada ihtiyacınız var.

Farklı sayfalarda farklı CSS dosyaları kullanmanın yol olduğunu düşünmüyorum, sadece önbelleğe alınabilecek büyük bir dosya oluşturmanın çok daha iyi olduğunu düşünüyorum.

Şimdi bununla başa çıkmanın zarif bir yolu var mı, yoksa sadece buna sadık kalıyor musunuz?

Bir, daha büyük CSS dosyasıyla daha iyi olduğunuza dair iddianız doğrudur. Gziplendiğinde büyük olasılıkla sadece birkaç KB olacaktır ve önbelleğe alınmalıdır, bu yüzden büyük bir yük değil. Yine de kontrol etmeye değer birkaç şey vardır.

Bazı CSS'ler yalnızca tek bir sayfada kullanılıyorsa, bu durumda CSS'yi bazı stil etiketlerinde sayfaya koymak daha iyi olabilir. (Not: Bu, özellikle daha sonra başka bir yerde benzer bir stil kullanmaya karar verdiğinizde, bakımı zorlaştırabilir.)

En popüler sayfalarınızı alırsanız (örneğin, sayfa görüntülemelerinizin% 50'sini + oluşturan sayfalar) ve bu sayfalarda CSS'nizin çok az bir miktarının kullanıldığını fark ederseniz, kullanıcıların sayfayı ayırması daha hızlı olabilir iki CSS dosyası. Artık en popüler sayfalarınızı ziyaret eden yeni kullanıcıların indirmesi çok daha azdır. Diğer sayfalarda fazladan bir HTTP isteği var, ancak bu çok büyük bir anlaşma değil.

CSS'nizin iyi optimize edildiğinden emin olun. Mümkün olan yerlerde alçaltıcı seçicilerden kaçının. Bir seçicinin sağ tarafı çok genel ise, oluşturma süresini yavaşlatabilir. Örneğin .class div {}, tarayıcının <div>sayfadaki her bir öğeyi kontrol etmesi gerektiğinden, sınıfla bir öğe bulmak (veya istememek) için en üstteki DOM ağacına bakın.

Bu, kullandığınız en hızlı aracın bir eksikliği olduğunu, tüm siteye bakmadığını ve hangi CSS'nin hiç kullanılmadığını görmediğini düşünüyorum. Bir araç bulabilirseniz, bize bildirin!

Ben sadece önbelleğe alınabilir büyük bir dosya oluşturmak çok daha iyi olduğunu düşünüyorum.

Evet, çok fazla CSS'ye ihtiyaç duyan bir dizi sayfa olmadığı sürece bu mantıklıdır, bu durumda bunları bunlara dahil edebilirsiniz.

CSS'nizi kontrol eden ve kullanılmayan kuralları bildiren Dust-Me Selectors adlı kullanışlı küçük bir Firefox eklentisi var . Ancak, utanç verici olan Firefox'un (v8.0) en son sürümü ile çalışmaz.

PS: Ben olsaydım, bir tutam tuzla CSS Lint'i alırdım - “önerilerinin” bilgiçlik taslayan ve sadece aşırı derecede dolu olduğunu düşünen bir düşünce okulu var. (Daha fazla ayrıntı için, Matt Wilcox'un “ CSS Lint zararlıdır ” adlı ikna edici makalesine bakın ). En iyi ihtimalle, tamamen gayri resmi… ve bununla yüzleşelim, tatmin etmek için gerçekten başka bir araca / sözde standarda ihtiyacımız var mı?

Bununla başa çıkmayı hayal edebildiğim en optimize ve ölçeklenebilir yol şunlardan oluşur:

1. Yapımı bir ana CSS dosyası (örneğin sitenin tasarımı, küresel sınıfları, kütüphaneler, eklentiler, vs ... gibi) "küresel kapsamı" her şeyi akrabası için.

2. Sayfa başına tek bir CSS dosyası içeren bir klasör içeren bir sistem oluşturma (yalnızca gerekirse). Bu dosyalar, bağlı olduğu sayfa ile aynı dosya adına sahip olabilir, böylece o klasördeki CSS dosyasını arayan her sayfada bir sunucu tarafı komut dosyası çalıştırabilir ve varsa sayfayı ekleyebilirsiniz.

3. Belki de, yalnızca ziyaretçinin göreceli tarayıcısı olduğunda yüklediğiniz tarayıcıya özgü şeyler için farklı CSS dosyaları oluşturmak .

Bunu yaparak, CSS'nizi ayırmanın sağlam ve optimize edilmiş bir yolunu bulacaksınız. Evet, ana dosyada hala kullanılmayan kurallar olacak, ancak mantıklı bir bakış açısına sahip olmaları gereken yerde olacaklar.

Ayrıca CSS dosyalarının bu 3 "katmanının" tek bir CSS dosyası gibi önbelleğe alınacağını unutmayın.