CSS-dekking en ongebruikte stijlen

Grote CSS-bestanden bevatten vaak stijlen voor componenten die niet op de huidige pagina staan. Elke ongebruikte byte verhoogt de ontleedtijd, de tijd voor het opbouwen van de CSSOM en de overdrachtsgrootte. Een typische productieapplicatie kan op een willekeurige pagina 90% of meer ongebruikte CSS bevatten.

Open DevTools → het paneel Coverage (Cmd+Shift+P → Coverage). Start de opname, gebruik de pagina en stop de opname daarna. Het paneel toont elk CSS-bestand met het gebruikte percentage en markeert ongebruikte regels rood. Exporteer de dekkingsgegevens als JSON voor analyse.

PurgeCSS doorzoekt je HTML-, JS- en sjabloonbestanden naar klassenamen en verwijdert ongebruikte CSS-regels. Configureer inhoudsglobpatronen die overeenkomen met alle bestanden waarin naar klassenamen kan worden verwezen. Zet klassen die dynamisch worden gebruikt (door JS toegevoegd) op de safelist om onbedoelde verwijdering te voorkomen.

De JIT-compiler van Tailwind CSS genereert alleen de hulpprogrammaklassen die daadwerkelijk in je sjablonen worden gebruikt. De resulterende CSS is zeer klein — vaak 5–15 KB voor een volledige toepassing — omdat ongebruikte hulpprogramma's nooit worden gegenereerd. Dit is het ideale resultaat van het opschonen.

Voeg PurgeCSS in een webpack- of Vite-configuratie toe met inhoudsglobpatronen die alle sjabloonbestanden omvatten. De optie safelist accepteert tekenreeksen, reguliere expressies en deep-safelist voor complexe patronen van dynamische klassen uit bibliotheken zoals Headless UI.

CSS Modules genereren unieke klassenamen per bestand en kunnen met de configuratie van het bundelprogramma ongebruikte modules tree-shaken. Alleen geïmporteerde CSS-modules worden in de bundel opgenomen — doordat componenten en stijlen bij elkaar staan, verdwijnen ongebruikte globale stijlen vanzelf.

Splits CSS per route op in frameworks zoals Next.js (CSS-extractie per pagina) of gebruik dynamische imports met CSS Modules. Elke pagina laadt alleen de eigen stijlen, waardoor dekkingsanalyse per pagina in plaats van per toepassing betekenisvol wordt.

De Lighthouse-controle "Ongebruikte CSS verminderen" schat hoeveel bytes je kunt besparen door ongebruikte regels te verwijderen. De controle identificeert specifieke stijlbladbronnen met hoge percentages ongebruikte CSS. Gebruik dit als leidraad om te bepalen welke bestanden je het eerst controleert.

Dekkingsanalyse legt alleen toestanden vast die tijdens de opname zichtbaar zijn. Hovertoestanden, geopende modale vensters, fouttoestanden en geauthenticeerde toestanden moet je tijdens de dekkingsopname handmatig activeren om te voorkomen dat hun stijlen onterecht worden verwijderd.

Monolithische globale stijlbladen verzamelen na verloop van tijd ongebruikte CSS wanneer functies worden verwijderd. CSS per component (CSS Modules, Styled Components, Tailwind-hulpprogrammaklassen) is gemakkelijker op te schonen, omdat stijlen bij hun componenten staan en samen worden verwijderd.

Gebruik voor grote verouderde CSS-bestanden eerst UnCSS of PurgeCSS in de modus voor alleen rapportage. Sorteer regels op gebruiksfrequentie. Extraheer en verwijder duidelijk ongebruikte stijlen van plug-ins van derden. Werk stapsgewijs om te voorkomen dat je per ongeluk stijlen voor randgevallen verwijdert.

Dekkingsanalyse van CSS met DevTools Coverage en Lighthouse brengt ongebruikte regels aan het licht. PurgeCSS en Tailwind JIT automatiseren het verwijderen van dode code. CSS Modules en splitsing per route voorkomen dat ongebruikte stijlen zich ophopen. Samen beperken ze de CSS-lading en de ontleedtijd.