Formatera minifierad CSS online
Lägg in en komprimerad stilmall och gör den lätt att läsa igen. Selektorer får egna rader, deklarationer placeras på varsin rad och block och mediefrågor får indrag som om du hade skrivit dem för hand.
Varför CSS i produktion är en enda lång rad
Stilmallar i produktion minifieras ofta för att minska textmängden som skickas till webbläsaren. Byggverktyg kan ta bort blanksteg och kommentarer, förkorta värden eller slå ihop förenliga regler. Resultatet beror på optimeringsverktyget och dess inställningar. Varken en viss storleksminskning eller snabbare sidladdning är garanterad. En kompilerad stilmall med hjälpklasser kan innehålla många små regler, vilket gör den komprimerade filen svår att överblicka. Formatering ger reglerna en enhetlig uppställning, men kan inte återskapa källkomponenterna, förprocessorfilerna eller byggkonfigurationen som skapade dem.
Gör kaskaden läsbar igen
Det främsta skälet att formatera en stilmall är att förstå varför en regel tillämpas eller inte. När varje selektor står på en egen rad med indragna deklarationer under sig kan du följa kaskaden ordentligt: hitta alla regler som riktar sig mot ett element, jämföra deras specificitet, se vilken som kommer sist och upptäcka den kvarglömda important-markeringen som tränger undan ditt arbete. Mediefrågor och deras innehåll syns som block, vilket gör responsivt beteende betydligt lättare att följa än i en komprimerad fil. För en avgränsad undersökning kopierar du hela regeln och dess relevanta omgivande mediefråga innan du gör ändringar. Den synliga stilmallen förklarar bara en del av kaskaden. Stilar direkt på element, andra stilmallar, arv och aktuell DOM spelar också roll. Webbläsarens utvecklarverktyg visar vilka deklarationer som faktiskt gäller för ett element. Använd den formaterade filen för att förstå deklarationerna i sitt sammanhang och bekräfta sedan beteendet vid den visningsstorlek du undersöker. Om automatisk identifiering tolkar CSS som JavaScript ska du kontrollera den visade etiketten innan du litar på resultatet.
Stöd för modern CSS
Formateraren förstår modern CSS, inte bara en äldre delmängd. Anpassade egenskaper, calc- och clamp-uttryck, kortformer för grid och flexbox, containerfrågor, nästlade regler, lager, supports-block och keyframes hör till den syntax den kan formatera. Långa selektorlistor delas upp på flera rader så att de går att läsa, och kommentarer som finns kvar efter bygget bevaras. Om filen blandar vanlig CSS med egenskaper som har leverantörsprefix behålls dessa deklarationer när formaterarens stil tillämpas.
Ett praktiskt tips för kompilerade ramverk
När du formaterar en kompilerad stilmall från Tailwind eller Bootstrap blir filen snabbt lång. Tiotusentals rader är normalt. Slå på radnummer och använd sedan webbläsarens sökfunktion för klassnamnet eller egenskapen du söker i stället för att skrolla. Om målet är att krympa filen snarare än att läsa den bör du komma ihåg att det viktiga arbetet sker i byggkonfigurationen, eftersom de oanvända reglerna skapades innan minifieringen ens kördes.
Vanliga frågor
Kan jag formatera en kompilerad Tailwind-stilmall?
Ja, det är ett av de vanligaste användningsområdena för sidan. Räkna med ett mycket långt resultat eftersom ramverket skapar en regel per hjälpklass. Att slå på radnummer och använda webbläsarens sökning är därför ett praktiskt sätt att hitta i filen.
Återställs kommentarer?
Kommentarer som finns kvar i den angivna CSS-koden kan visas i det formaterade resultatet. Kommentarer som en minifierare har tagit bort kan inte återställas från filen, inte heller förklaringar av varför en regel finns. Gå till det ursprungliga kodarkivet om du behöver designanteckningar, författarens vägledning eller historiken bakom en selektor.
Fungerar det med SCSS eller Less?
Sidan är avsedd för vanlig CSS, inklusive det kompilerade resultatet från Sass eller Less. Variabler, mixins och direktiv som är specifika för förprocessorer stöds inte som indata. Kompilera först källfilerna med rätt verktyg i projektet och använd sedan editorn för att granska den färdiga stilmallen.