Gjør CSS lesbart på nett
Legg inn et komprimert stilark og gjør det lesbart igjen. Selektorene får egne linjer, deklarasjonene står én per linje, og blokker og mediespørringer får innrykk slik du ville skrevet dem selv.
Hvorfor CSS i produksjon består av én lang linje
Stilark i produksjon minifiseres ofte for å redusere tekstmengden som sendes til nettleseren. Byggeverktøy kan fjerne mellomrom og kommentarer, forkorte verdier eller slå sammen kompatible regler. Resultatet avhenger av optimaliseringsverktøyet og innstillingene. Verken en bestemt størrelsesreduksjon eller raskere sidelasting er garantert. Et kompilert stilark med hjelpeklasser kan inneholde mange små regler og dermed være vanskelig å få oversikt over i komprimert form. Formatering gir reglene et konsekvent og lesbart oppsett, men kan ikke gjenskape kildekomponentene, preprosessorfilene eller byggekonfigurasjonen som laget dem.
Få oversikt over kaskaden igjen
Den viktigste grunnen til å formatere et stilark er å forstå hvorfor en regel brukes eller ikke brukes. Når hver selektor står på sin egen linje med deklarasjonene rykket inn under, kan du følge kaskaden: finne alle reglene for et element, sammenligne spesifisiteten, se hvilken som kommer sist og oppdage en bortkommen important som har overstyrt arbeidet ditt. Mediespørringer og innholdet deres blir synlige som blokker, noe som gjør responsiv oppførsel langt enklere å følge enn i en komprimert fil. For en avgrenset undersøkelse bør du kopiere hele regelen og den relevante mediespørringen rundt den før du gjør endringer. Stilarket du ser, forklarer bare en del av kaskaden. Stiler direkte på elementer, andre stilark, arv og gjeldende DOM har også betydning. Nettleserens utviklerverktøy viser hvilke deklarasjoner som faktisk gjelder for et element. Bruk den formaterte filen til å forstå dem i sammenheng, og bekreft deretter oppførselen ved størrelsen på visningsområdet du undersøker. Hvis automatisk gjenkjenning klassifiserer CSS som JavaScript, må du kontrollere formatetiketten før du stoler på resultatet.
Moderne CSS støttes
Formatereren forstår moderne CSS og er ikke begrenset til eldre syntaks. Egendefinerte egenskaper, calc- og clamp-uttrykk, kortformer for grid og flexbox, beholderspørringer, nøstede regler, lag, supports-blokker og keyframes er blant konstruksjonene den kan formatere. Lange selektorlister fordeles over flere linjer så de blir lesbare, og kommentarer som har overlevd byggingen, bevares. Hvis filen blander vanlig CSS med egenskaper som har nettleserprefiks, beholdes deklarasjonene mens formatererens stil brukes.
Et praktisk tips for kompilerte rammeverk
Når du formaterer et kompilert Tailwind- eller Bootstrap-stilark, blir filen fort lang. Titusenvis av linjer er normalt. Slå på linjenumre, og bruk nettleserens søkefunksjon til å finne klassenavnet eller egenskapen du er interessert i, i stedet for å rulle. Hvis målet er å gjøre filen mindre, bør du se på byggekonfigurasjonen. De ubrukte reglene ble nemlig generert allerede før minifiseringen startet.
Ofte stilte spørsmål
Kan jeg formatere et kompilert Tailwind-stilark?
Ja, og det er en av de vanligste bruksområdene for denne siden. Regn med et svært langt resultat fordi rammeverket lager én regel per hjelpeklasse. Slå på linjenumre og bruk søkefunksjonen i nettleseren for å finne frem på en praktisk måte.
Gjenopprettes kommentarer?
Kommentarer som fortsatt finnes i CSS-koden du oppgir, kan vises i det formaterte resultatet. Kommentarer som minifiseringsverktøyet fjernet, kan ikke gjenopprettes fra filen. Det gjelder også forklaringer på hvorfor en regel finnes. Se i det opprinnelige kodelageret når du trenger designnotater, veiledning fra forfatteren eller historikken bak en selektor.
Fungerer verktøyet med SCSS eller Less?
Denne siden er ment for vanlig CSS, inkludert kompilert kode fra Sass eller Less. Variabler, mixins og direktiver som er spesifikke for preprosessorer, støttes ikke som inndata. Kompiler først kildefilene med prosjektets verktøy, og bruk deretter denne editoren til å undersøke det ferdige stilarket.