Jak poradzić sobie z nieużywanymi problemami CSS

Prowadzę szybkie testy na blogu i zawsze otrzymuję skargi na nieużywany CSS. Ale to nie jest CSS, którego nigdy nie używam, po prostu nie jest używany na tej konkretnej stronie.

Teraz pracuję w uporządkowany sposób, ale wciąż musi być trochę CSS w pliku, który nie będzie używany, ponieważ potrzebujesz go na innej stronie.

Nie sądzę, że korzystasz z różnych plików CSS na różnych stronach, ale myślę, że lepiej jest po prostu stworzyć jeden duży plik, który można buforować.

Czy istnieje elegancki sposób na poradzenie sobie z tym, czy po prostu trzymasz się tego.

Twoje twierdzenie, że lepiej Ci mieć jeden, większy plik CSS, jest poprawne. Prawdopodobnie będzie to tylko kilka KB po gzipowaniu i powinno być buforowane, więc nie jest to duży narzut. Warto jednak sprawdzić kilka rzeczy.

Jeśli jakiś CSS jest kiedykolwiek używany tylko na jednej stronie, może być lepiej w takim przypadku umieścić CSS na stronie, w niektórych znacznikach stylu. (Uwaga: może to utrudniać utrzymanie, szczególnie gdy później zdecydujesz się zastosować podobny styl w innym miejscu).

Jeśli weźmiesz swoje najpopularniejsze strony (na przykład strony, które stanowią ponad 50% wyświetleń strony) i stwierdzisz, że tylko niewielka ilość twojego CSS jest używana na tych stronach, użytkownicy mogą szybciej podzielić je na dwa pliki CSS. Teraz nowi użytkownicy odwiedzający Twoje najpopularniejsze strony mają znacznie mniej do pobrania. Na innych stronach jest jedno dodatkowe żądanie HTTP, ale to nie jest wielka sprawa.

Upewnij się, że Twój CSS jest dobrze zoptymalizowany. Jeśli to możliwe, unikaj potomnych selektorów. Jeśli prawa strona selektora jest zbyt ogólna, może spowolnić czas renderowania. Na przykład .class div {}byłoby trochę wolniej, ponieważ przeglądarka musi sprawdzić każdy <div>element na stronie, a następnie spojrzeć w górę drzewa DOM na samą górę, aby znaleźć (lub nie) element z klasą.

Myślę, że jest to wada narzędzia do szybkiego testowania, którego używasz, ponieważ nie sprawdza całej witryny i nie sprawdza, który CSS nigdy nie jest używany. Jeśli możesz znaleźć narzędzie, które działa, daj nam znać!

Myślę, że lepiej jest po prostu stworzyć jeden duży plik, który można buforować.

Tak, to ma sens, chyba że istnieje zestaw stron, które wymagają dodatkowej ilości CSS, w którym to przypadku możesz dołączyć je na tych stronach.

Jest przydatna mała wtyczka Firefox o nazwie Dust-Me Selektory , która sprawdza Twój CSS i zgłasza wszelkie nieużywane reguły. Jednak nie działa z najnowszą wersją Firefoksa (8.0), co jest trochę wstydem.

PS: Gdybym był tobą, wziąłbym CSS Lint ze szczyptą soli - istnieje szkoła myślenia, która mówi, że jej „rekomendacje” są pedantyczne i po prostu całkowita przesada. (Aby uzyskać więcej informacji, zobacz przekonujący artykuł Matta Wilcoxa, „ CSS Lint jest szkodliwy ” ). W najlepszym wypadku jest to całkowicie nieoficjalne… i, powiedzmy sobie szczerze , czy naprawdę potrzebujemy jeszcze innego narzędzia / pseudo-standardu, aby zaspokoić?

Najbardziej zoptymalizowany i skalowalny sposób radzenia sobie z tym polega na:

1. Utworzenie głównego pliku CSS dla wszystkich elementów związanych z „globalnym zasięgiem” (takich jak projekt witryny, klasy globalne, biblioteki, wtyczki itp.).

2. Tworzenie systemu zawierającego folder zawierający jeden unikalny plik CSS na strony (tylko w razie potrzeby). Pliki te mogą mieć tę samą nazwę pliku, co strona, do której prowadzą, więc można uruchomić skrypt po stronie serwera na każdej stronie, która szuka pliku CSS w tym folderze i dodać go do strony, jeśli taka istnieje.

3. Być może tworzenie różnych plików CSS dla rzeczy specyficznych dla przeglądarki , które ładujesz tylko wtedy, gdy użytkownik ma względną przeglądarkę.

W ten sposób uzyskasz solidny i zoptymalizowany sposób oddzielenia swojego CSS. Tak, nadal będą nieużywane reguły w głównym pliku, ale będą tam, gdzie powinny być z logicznego punktu widzenia.

Należy również pamiętać, że te 3 „warstwy” plików CSS zostaną zbuforowane, tak jak pojedynczy plik CSS.