Här är den sak om “oanvända CSS” – verktyg

0
35

Det finns en hel del verktyg som syftar till att hjälpa dig ta bort “oanvända CSS” från ditt projekt. Aldrig en vecka går utan att jag inte ser ett verktyg för detta delas eller främjas. Det måste finnas någon form av perfekt ackord för vissa utvecklare. Jag bryr mig om prestanda, och jag vet att reducera filstorlekar är bra för prestanda. Ja, det är det. Jag slår vad om att vi har CSS som är oanvända i våra stilmallar, om vi tog bort det, det är en prestation att vinna. Japp, det skulle vara. Vi bör automatisera det. Ehhhhhh, jag är inte så säker på det.

Det finns stora resultat tooling spelare att spela upp denna idé, som Fyr och hur det ger dig CSS och JS “Täckning”, som säkert kommer att tala om för dig att du är frakt-kod behöver du inte vara.

De verktyg som hävdar att hjälpa dig med oanvända CSS har att utföra en analys för att kunna tala om för dig vad som är oanvända och vad som inte är det.

Här är ett sätt att göra denna analys. Göra en sida på din webbplats och få fullständig DOM. Då får komplett CSSOM också, som kan ge dig en mängd av alla väljare i din CSS. En slinga över de omkopplare och göra en querySelector i DOM och se om det matchar något. Om det inte, som CSS-väljare är oanvända.

Smart, eller hur?!

Jag tror så. Men denna analys målar upp en ganska begränsad bild.

Säga att analysen går två sekunder efter att sidan är komplett, men det är en del JavaScript som springer och sprutar en modal efter fem sekunder (ughghk, jag vet). Analysen skulle ha missat HTML-i modal, vilket sannolikt har stilar, och därmed skulle ha felaktigt rapporterade de stilar som oanvända.

Så, timing är en faktor. Förhoppningsvis, denna analys verktyg har vissa sätt att konfigurera flera tider.

Vi är också bara tittar på en sida så här långt. Naturligtvis kan en plats ha tiotals, hundratals, eller tusentals sidor. För att vara helt säker på om outnyttjad stilar, titta på alla av dem är den säkraste insats.

Flera sidor är en annan faktor. Förhoppningsvis, ett analysverktyg har ett sätt att titta på så många sidor som du säger det till. Det kanske kan titta på en sitemap?

Kom ihåg tidpunkten sak? Vi kan tänka på timing som en generisk form av staten. Det finns otaliga andra saker som kan vara staten som har anknytning. Är användaren inloggad eller inte? Vilken plan finns de på? Är deras kreditkort löpt ut vilket visar någon form av särskilt budskap? Gör situationsanpassat saker som tid/datum/geolocation ändra stat? Vad sägs om data i realtid? Saker från ett API?

Tillämpning-nivå tillstånd är helt klart en stor faktor. Förhoppningsvis, denna analys verktyg kan aktivera/ställa in alla möjliga kombinationer av staten.

Det är interaktiva staten. Vad sägs om modals att komma upp på grund av något som klickade? Vad är den aktiva fliken? Är denna meny öppen eller stängd? Vad bläddra position är de på? Det finns oändliga varianter av detta. Föreställ dig en varning bar som visar upp sju sekunder efter det att användaren loggar in för att varna användaren om att deras ut kredit-kort som innehåller en egen stil välj meny som kan vara i en öppen eller sluten stat, men endast på användarens inställningar.

Det verkar osannolikt att denna analys verktyg som kan hantera alla dessa möjligheter. Även med massor av konfiguration, mock staten, och integrationstest, det kunde inte täcka den närmaste oändligt många möjliga permutationer av allt detta.

Och ändå, jag tror inte att dessa verktyg är värdelösa — de är bara…verktyg. Deras användning kan faktiskt vara ett positivt steg mot bättre kod. Deras användning säger OK, jag erkänner det, jag är lite rädd för vår CSS. Du kan använda detta verktyg för att få en bred bild av vad dina oanvända CSS kan vara, för att sedan kombinera det med dina egna kunskaper i din CSS-kod bas för att fatta mer informerade beslut. Eller ta en annan teknisk steget och göra något som att lägga till en bakgrundsbild i dessa oanvända väljare och kontrollera loggar för att se om de blir träffade.

Det bör sägas att detta inte är hela idén med oanvända CSS är en del av CSS-i-JS saga att vår bransch är att gå igenom. Om alla dina stilar är skriven som en del av komponenter, det är ganska inga outnyttjade CSS. Antingen den komponent som får användas och de stilar som kommer med det, eller så är det inte. Om du är särskilt känsliga om faran av oanvända CSS, som ensam kan styra dig mot en CSS-i-JS verktyg.

Det bör också sägas att denna DOM och CSSOM analys teknik är bara ett sätt att kontrollera för oanvända stilar. Om du hade någon form av finare verktyg som kan analysera alla dina mallar, format och skript, förmodligen som kan avgöra oanvända stilar också. Vi talar om att i den senaste ShopTalk Visa episod med Chris Eppstein.

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!