Bir stil sayfasında kullanılmayan / uygulanmayan CSS kurallarını nasıl bulabilirim?


18

Çok büyük bir CSS dosyam ve bir HTML dosyam var. Bir HTML dosyasını görüntülerken hangi kuralların kullanılmadığını öğrenmek istiyorum. Bunun için araçlar var mı?

CSS dosyası birkaç yıl içinde gelişti ve bildiğim kadarıyla hiç kimse ondan bir şey kaldırmadı - insanlar tekrar tekrar yeni geçersiz kılma kuralları yazdı.

EDIT: Dust-Me Seçicileri veya Chrome'un Web Sayfası Performansı aracını kullanmanız önerildi . Ancak her ikisi de bireysel kurallar üzerinde değil, seçiciler düzeyinde çalışırlar. Bir seçicinin içindeki bir kuralın her zaman geçersiz kılındığı birçok durumum var - ve çoğunlukla kurtulmak istediğim şey bu. Örneğin:

body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }

HTML'imdeki tüm metin bazı sarmalayıcı öğelerin içindedir, bu yüzden asla beyaz değildir. body'nin dolgusu her zaman çalışır, bu yüzden elbette tüm bodyseçici çıkarılamaz. Ben de bu işe yaramaz kurallardan kurtulmak istiyorum.

EDIT: Ve başka bir işe yaramaz kural örneği: varolan birini hiçbir şey değiştirmeden çoğaltır:

a       { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }

Mutlu bir şekilde ikinciden kurtulurdum margin-left... yine bana öyle geliyor ki bu araçlar böyle şeyler bulamıyor.

EDIT: Tüm cevapları takdir ediyorum, ancak ne yazık ki önerdiğiniz araçlar yararlı bir öneri yapmadı. Yanıtlarınızı iptal ettim, ancak yukarıda belirtildiği gibi işleri daha ayrıntılı yapan bir araç bekleyeceğim.

Teşekkür ederim,


Herhangi bir uygun aracın eksikliğini bir fırsat olarak kabul edebilirsiniz: neye ihtiyacınız olduğunu anladığınızdan, böyle bir araç oluşturmak için en iyi kişi olabilirsiniz. Mevcut araçların kodunu fikirler ve teknikler açısından inceleyebilir ve daha sonra seçici yerine kural düzeyinde çalışan bir şey oluşturabilirsiniz. Şöhret ve servet şansınız! ... iyi, belki sadece şöhret;)
iconoclast

@Brandon: Bu soru sadece ”kayda değer soru” işaretine çarptı… bu yüzden doğru olabilir :-)
liori

Yanıtlar:


8

Dust Me Selecters Firefox eklentisi

Chrome'un Geliştirici Araçları'nda, kullanılmayan CSS kurallarını bulmak için Web Sayfası Performansı aracını kullanabilirsiniz.


Harika, hemen kontrol edeceğim!
liori

Bu araçlar yalnızca işe yaramaz seçicileri kaldırabilir. Sorumu açıklığa kavuşturdum.
liori

2
@liori: Bunun güvenilir bir şekilde mümkün olduğunu düşünmüyorum. Kenar boşluğu örneğinizde, ikinci kenar boşluğu kuralı gereksiz görünebilir, ancak daha yüksek özgüllüğe sahiptir ve daha sonraki bir kuralı geçersiz kılabilir. Örneğin, bir sınıfın .abcfarklı bir marjı varsa, <a class="abc">fareyle üzerine geldiğinde marjını değiştireceğini düşünüyorum. Şimdi muhtemelen niyetiniz bu değil, ama kesinlikle olabilir ve bu yinelenen kuralı körü körüne kaldıramazsınız.
09:41

@DisgruntledGoat: Kapalı bir dünya vakası düşünüyorum: Eğer belirtilmemişse, mevcut değil. Dolayısıyla a.abc, HTML için herhangi bir tanım yoksa veya herhangi bir yerde <a class="abc"/> yoksa, bu mevcut değildir. çok fazla buluşsal yöntem uygulayarak. Chrome'un Geliştirici Araçlarını denedim, ancak bana çok yardımcı olmadılar.
liori

5

Ayrıca Unused-CSS.com'a da bakabilirsiniz Bu araç, sayfalarınızı keşfedecek ve kullanılmayan seçiciler olmadan optimize edilmiş bir CSS dosyaları oluşturacaktır


4

CSS Kullanımını hep sevdim . Firebug için bir eklenti ve sayfayı tarayalım ve hangi CSS kurallarının uygulanmadığını görelim. Hatta otomatik olarak tarar ve birkaç sayfada çalışır.


2

Uncss'i kontrol edin, bu bir düğüm modülü.

"UnCSS, stil sayfalarınızdan kullanılmayan CSS'yi kaldıran bir araçtır. Birden fazla dosyada çalışır ve Javascript enjekte CSS'yi destekler."

https://www.npmjs.com/package/uncss

Yorumdan sonra düzenle:

Bence iki farklı şey istiyorsun:

  1. Kullanılmayan kuralları otomatik olarak kaldırın, bu uncss sizin için yapabilir. Ben de bu aracı yaptım, CSS byebye, ama istediğin gibi otomatik değil: https://www.npmjs.com/package/css-byebye

  2. Kuralların birleştirilebileceği / basitleştirilebileceği stil sayfasını optimize edin.

Bu durumda, bu tür şeyleri yapan iki araç öneririm:

Aşağı yukarı aynı optimizasyonları yaparlar, bazen birinin diğerinden daha iyi sonuçları vardır ve bazen de tam tersi olur. Stil sayfanıza bağlıdır. (birbiri ardına da koşabilirsiniz: P)

Onları homurdanarak bir inşa sürecinin parçası olarak kullanıyorum. Bu gerçekten sizin istediğiniz gibi görsel bir şey değil, ancak istediğiniz optimizasyonları yapıyorlar.

İşte CSSO için söyledikleri (tam bilgi: https://en.bem.info/tools/optimizers/csso/ )

Yapısal optimizasyonlar:

  • Özdeş seçicilerle blokları birleştirme
  • Aynı özelliklere sahip blokları birleştirme
  • Geçersiz kılınan özelliklerin kaldırılması
  • Geçersiz kılınmış steno özelliklerinin kaldırılması
  • Tekrarlayan seçicilerin kaldırılması
  • Blokların kısmi birleştirilmesi
  • Blokların kısmi bölünmesi
  • Boş kural kümesinin ve kuralın kaldırılması
  • Marj ve dolgu özelliklerinin minimize edilmesi

Ana sayfadan yola çıkarak, seçici düzeyde çalışır. Soruda bahsettiğim iki örnek olayda kuralları gerçekten kaldırabilir mi?
liori

Cevabımı düzenledim. İlk örneğinizi CSSO web arayüzü ile test ettim: sonuç: body {color: #fff; dolgu: 10em} h1, p, ul {color: # 000}
Kev

1

@John: mükemmel bir araç, bağlantı için teşekkürler

@liori: Ben de tavsiye ederim öğe adlarını / özelliklerini görüntülemenizi, gerçek zamanlı olarak düzenlemenizi (css dosyanıza yazmaz) sağlayan Firefox Web Developer eklentisini böylece css değişikliklerini faff olmadan düzenleyebilir ve test edebilirsiniz 3 saniyede css'nizi kaydetme ve yükleme zorunluluğu. + daha fazla özellik yükler.

Ayrıca, fişe takılan ve Javascript'i sıralamak için harika olan Firebug'a takılan çok güzel bir DOM müfettişi de var.


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.