CSS-formatter

Een CSS-formatter leest een stylesheet en herschrijft deze met consistente spatiëring, inspringing en regeleindes, zodat deze gemakkelijk te lezen en te onderhouden is. Het parseert de CSS in de onderliggende structuur van regels, selectors, declaraties, at-regels en opmerkingen en drukt die structuur vervolgens weer af met behulp van een voorspelbare lay-out: één declaratie per regel, één enkele spatie na elke dubbele punt, en elk genest blok ingesprongen één niveau dieper dan de bovenliggende regels. De stijlregels blijven identiek, maar een bestand dat als één lange, ononderbroken regel is aangekomen, wordt iets dat je kunt scannen en bewerken.

Dezelfde tool werkt omgekeerd als een CSS-minifier Het minimaliseren van strips elke ruimte, tabblad, regeleinde, en (optioneel) commentaar dat een browser niet nodig heeft, het instorten van de stylesheet tot het kleinste byte-voor-byte equivalent Een goed opgemaakte 6 KB stylesheet daalt vaak onder de 4 KB zodra de witruimte weg is, wat betekent minder bytes over het netwerk en een snellere eerste verf Verfraai terwijl u aan het schrijven en debuggen bent; minifieer de kopie die u naar productie verzendt.

Deze opmaakmaker begrijpt de onderdelen van CSS die naïeve find-and-replace scripts uitschakelen Geneste at-regels zoals @media en @supports houden hun innerlijke regels correct ingesprongen, @keyframes blokken met percentage stappen worden bewaard, string literals in content en url () waarden worden precies zoals geschreven gelaten, en opmerkingen worden op verzoek bewaard of verwijderd Alles draait volledig in uw browser, dus uw stylesheet, inclusief eventuele eigen design tokens of interne klassenamen, wordt nooit geüpload, en de tool blijft werken nadat de pagina is geladen, zelfs zonder verbinding.

Een kleine test laat zien wat deze CSS-formatter online doet Plakken @media (max-width:600px) {.nav a.nav button{padding:8px 12px;color:#333}} en klik op Verfraaien met 2 spaties De mediaquery opent zijn eigen blok, .nav a en .nav button gaan op aparte lijnen één niveau in, en elke declaratie zit op zijn eigen lijn met een spatie na de dubbele punt De badge met grootte luidt 73 B → 98 B, +34%, omdat inspringen bytes toevoegt Klik op Minify op die uitvoer en het keert terug naar de oorspronkelijke 73 bytes.