Büyük / eski CSS dosyalarını yeniden düzenleme


13

Şu anda 100.000 sayfalık bir web sitesinde çalışıyorum, mevcut tasarım 5 yıldan uzun bir süredir devam ediyor ve art arda yapılan güncellemeler dört 12.000'den fazla satır CSS dosyasıyla sonuçlandı.

Açıkçası CSS kullanışsız hale geldi, stillerin birçoğu çoğaltıldı ve gerçekte kaç stilin kullanıldığını bilmek neredeyse imkansız.

Küçültülebiliriz, ancak bu gerçekten sorunla başa çıkmak değil, sadece kaçınılmaz yeniden çalışmayı geciktirir.

Yani üç soru için herhangi bir araç var ...

  • büyük CSS dosyalarının çoğaltılması?
  • site tarama ve CSS sınıfı ve kimlik kullanımı günlüğe kaydetme?
  • böyle bir tarama bir tür komut dosyası ile yapılabilir, greasemonkey belki?

Yanıtlar:


17

http://unused-css.com/ Sorduğunuz şeylerden bazılarını yapar ve şunları söyleyebilir:

Latish Sehgal kullanılmayan CSS sınıflarını bulmak ve kaldırmak için bir windows uygulaması yazmıştır. Test etmedim ama açıklamadan, html dosyalarınızın ve bir CSS dosyanızın yolunu sağlamanız gerekiyor. Program daha sonra kullanılmayan CSS seçicileri listeleyecektir. Ekran görüntüsünde, bu listeyi dışa aktarmanın veya yeni bir temiz CSS dosyası indirmenin bir yolu yok gibi görünüyor. Hizmetin bir CSS dosyasıyla sınırlı olduğu da görünüyor. Temizlemek istediğiniz birden fazla dosyanız varsa, bunları tek tek temizlemeniz gerekir.

Dust-Me Selectors , kullanılmayan CSS seçicilerini bulan bir Firefox eklentisidir (v1.5 veya üstü için). Görüntülediğiniz sayfadaki tüm stil sayfalarındaki tüm seçicileri ayıklar, ardından bu seçicilerin hangilerinin kullanılmadığını görmek için o sayfayı analiz eder. Daha sonra veriler saklanır, böylece sonraki sayfaları test ederken seçiciler karşılaşıldıkları sırada listeden çıkartılabilir. Bu aracın tüm bir web sitesine örümcek olması gerekiyordu ama maalesef çalışmasını sağlayabilirim. Ayrıca, stilleri kaldırılmış olarak CSS dosyasını yapılandırabileceğiniz ve indirebileceğinize inanmıyorum.

Liquidcity CSS temizleyici , bir sayfanın stillerini kontrol etmek için düzenli ifadeler kullanan bir php betiğidir. HTML kodunda bulunmayan sınıfları size söyleyecektir. Bu çözümü test etmedim.

Deadweight bir CSS kapsama aracıdır. Bir dizi stil sayfası ve bir dizi URL verildiğinde, hangi seçicilerin gerçekten kullanılacağını ve hangilerinin "güvenli" olarak silinebileceğini listeler. Bu araç bir yakut modülüdür ve sadece raylar web sitesi ile çalışacaktır. Kullanılmayan seçicilerin CSS dosyasından manuel olarak kaldırılması gerekir.

Helyum CSS, bir web sitesindeki birçok sayfada kullanılmayan CSS'yi keşfetmek için bir javascript aracıdır. Önce javascript dosyasını test etmek istediğiniz sayfaya yüklemeniz gerekir. Ardından, temizliği başlatmak için bir helyum fonksiyonu çağırmanız gerekir.

UnusedCSS.com kullanımı kolay arayüzü ile bir web uygulamasıdır. Bir sitenin URL'sini yazdığınızda, CSS seçicilerinin bir listesini alırsınız. Her seçici için bir sayı, seçicinin kaç kez kullanıldığını gösterir. Bu hizmetin bazı sınırlamaları vardır. @İmport deyimi desteklenmez. Yeni temiz CSS dosyasını yapılandıramaz ve indiremezsiniz.

CSSESS , herhangi bir sitede kullanılmayan CSS seçicileri bulmanıza yardımcı olan bir yer imi. Bu aracın kullanımı oldukça kolaydır, ancak temiz CSS dosyalarını yapılandırmanıza ve indirmenize izin vermez. Yalnızca kullanılmayan CSS dosyalarını listeler.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.