De slechtste CSS die ik ooit heb moeten debuggen, kwam als één lijn van 40.000 tekens. Een bouwstap had elk onderdeel van het project aaneengeschakeld en verkleind, een regel aan het einde had een kleur die het niet zou moeten hebben terzijde geschoven, en er was geen manier om de cascade te zien omdat er geen regeleindes waren om het te zien. Ik heb genoeg front-ends verzonden voor WordPress-thema's en React-apps om te weten dat een stylesheet die je niet kunt lezen een stylesheet is die je niet kunt repareren, dus heb ik een css-formatter in Toolz.dev dat verandert die muur van tekst weer in ingesprongen, scanbare CSS in één pasta, en verkleint het opnieuw wanneer u klaar bent om te verzenden Dit is de gids voor het en voor wat & quot; CSS" opmaken; betekent eigenlijk.
tl;dr: Een CSS-formatter geeft een stylesheet opnieuw een invoeging met consistente spatiëring zodat het leesbaar is, en een CSS-minifierstrips die de spatiëring weer naar buiten brengen zodat het bestand klein is De Toolz css-formatter doet beide vanuit één invoer Het parseert de CSS in regels, selectors, declaraties, at-regels en opmerkingen, drukt die structuur vervolgens weer af met uw keuze uit twee spaties, vier spaties of tabbladen, of laat het samenvallen tot het kleinste geldige equivalent Genest
@mediaen@keyframesblokken,url()waarden en geciteerde tekenreeksen zijn allemaal intact gebleven en alles draait aan de clientzijde, zodat uw CSS nooit de browser verlaat.
Wat is een CSS-formatter?
Een CSS-formatter leest een stylesheet en herschrijft deze met voorspelbare, consistente witruimte De regels zelf veranderen niet De selectors, eigenschappen, en waarden zijn voor en na identiek, en een browser past het geformatteerde bestand precies toe zoals het het origineel zou hebben toegepast Wat verandert is de lay-out: één declaratie per regel, een enkele spatie na elke dubbele punt, elk blok ingesprongen een niveau dieper dan zijn ouder, en een sluitbrace op zijn eigen regel Het resultaat is een bestand dat een mens kan scannen.
Onder de motorkap doet de tool niet aan find-and-replace op witruimte, dat is waar naïeve formatters fout gaan. 't Parseert eerst de CSS in zijn echte structuur. 'n Stylesheet is een opeenvolging van knooppunten: stijlregels die een selector koppelen aan een blok declaraties, at-regels zoals @media of @import, opmerkingen en de declaraties zelf Zodra de CSS een boom van die knooppunten is, is het afdrukken ervan met elke gewenste inkeping eenvoudig en, cruciaal, veilig. De parser laat de opmaakmachine weten dat er een komma in zit :not(a, b) maakt deel uit van een selector terwijl er een komma tussen staat h1 en h2 scheidt twee selectors, en dat een puntkomma in a url() gegevens-URI is niet het einde van een aangifte.
Dezelfde parse drijft de omgekeerde bewerking aan Omdat het gereedschap de structuur al begrijpt, kan het de boom afdrukken zonder enige inkeping, wat precies is wat minifying is Daarom omvat één tool beide taken: formatteren en minifying zijn op twee verschillende manieren dezelfde parse-print.
Wat is het verschil tussen het formatteren en het minificeren van CSS?
Dit zijn tegenoverliggende uiteinden van dezelfde as, en weten welke je wilt scheelt verwarring Formatteren, ook wel verfraaien of mooi afdrukken genoemd, voegt witruimte toe ten behoeve van mensen Minifying verwijdert witruimte ten behoeve van machines en netwerken U formatteert de kopie die u leest en bewerkt; u minifieert de kopie die u naar een browser verzendt.
Het onderscheid is belangrijk omdat ze op verschillende punten in uw workflow thuishoren Terwijl u CSS schrijft, of wanneer u een bestand hebt geërfd dat u moet begrijpen, wilt u het geformatteerd hebben Wanneer u implementeert, wilt u dat het geminifieerd wordt, zodat de browser eerder minder bytes en verven downloadt De meeste build-pijplijnen minifiëren automatisch, maar tal van situaties vallen buiten een build: een fragment dat is geplakt uit een CodePen, een stylesheet dat is geëxtraheerd uit een pagina die u controleert, een themabestand dat rechtstreeks in een CMS is bewerkt Daarvoor is een standalone-formatter en - minifier het snelste pad.
Hier is de splitsing in één oogopslag.
| Aspect | Formaat (verfraaien) | klein worden |
|---|---|---|
| Audience | Mensen lezen en bewerken | Browsers downloaden |
| Whitespace | Toegevoegd voor leesbaarheid | Volledig verwijderd |
| nadere beschouwing | Standaard bewaard | Standaard verwijderd |
| Bestandsgrootte | Groter | Zo klein mogelijk |
| Wanneer te gebruiken? | Schrijven, debuggen, beoordelen | Verzending naar productie |
Hoe formatteer ik CSS met deze tool?
De stroom is bewust kort Plak je CSS in de invoer, kies verfraaien of minifiëren, en lees het resultaat Wanneer verfraaien, kies twee spaties, vier spaties of tabbladen om overeen te komen met uw project' s editorinstellingen, en beslis of u opmerkingen wilt behouden De css-formatter toont de uitvoer met een formaatbadge zodat u de bytewijziging kunt zien, en vermeldt eventuele parseerberichten, zoals een onevenwichtige beugel, als waarschuwingen in plaats van stil te falen.
De vier stappen zien er in de praktijk zo uit Eerst plak je het stylesheet, of het nu geminifieerd, met de hand geschreven of geëxporteerd is vanuit een tool Ten tweede klik je op Verfraaien om het opnieuw in te spitsen of Minify om het uit te pakken Ten derde bekijk je de uitvoer en de badge met de grootte, en kijk je naar eventuele waarschuwingen Ten vierde kopieer je het resultaat naar je klembord of download je het als een .css bestand klaar om in uw project te droppen Er is geen uploadstap en geen account, omdat het hele ding gebeurt in uw browser.
Als u met andere gestructureerde formaten werkt, verschijnt hetzelfde patroon in Toolz. De json formatter verfraait en minifieert JSON, de html-formatter doet hetzelfde voor markup, en de sql-formatter behandelt vragen Formatteren is een algemeen idee, en het hebben van dezelfde gereedschapsvorm voor elke taal houdt het spiergeheugen consistent, een thema dat de Webontwikkelaar Toolkit gids ontwikkelt zich verder.
Verandert formatteren hoe mijn stijlen werken?
Nee, en dit is de garantie die het gereedschap veilig maakt om op productie-CSS te draaien Verfraaiing en minificatie van alleen touch whitespace en, optioneel, opmerkingen Ze herschikken nooit declaraties, hernoemen nooit iets, voegen nooit regels samen of laten ze vallen, en herschrijven nooit waarden De specificiteit van uw selecteurs is ongewijzigd, de bronvolgorde die de cascade aanstuurt is ongewijzigd en het berekende resultaat in de browser is byte-voor-byte equivalent.
Dit is de moeite waard om duidelijk te zeggen, omdat sommige CSS-optimalisatoren veel meer doen dan alleen maar minifiëren: ze voegen dubbele selectoren samen, laten regels vallen die ze ongebruikt beoordelen en herschikken eigenschappen. Die transformaties kunnen gedrag op subtiele manieren veranderen, vooral als de cascade of een !important is betrokken Deze formatter doet dat bewust allemaal niet Het is een witruimte tool Als je een bestand verfraait, niets bewerkt, en het weer verkleint, zijn de twee bestanden functioneel identiek, wat betekent dat je vrij kunt rondreizen zonder angst.
De CSS-grammatica die definieert wat telt als witruimte en waar deze onbeduidend is, wordt gespecificeerd in de CSS Syntax Module Niveau 3 van de W3C. De formatter volgt dat grammatica's tokenizer model, dat is de reden waarom het witruimte behandelt binnen een tekenreeks token of een url() anders dan witruimte tussen aangiften.
Hoe gaat het om met @media, @keyframes en andere at-regels?
Bij regels vallen informele formatters uit elkaar, omdat een at-regel kan eindigen in een puntkomma of een heel blok andere regels kan omwikkelen. @import "base.css"; is een uitspraak die eindigt bij de puntkomma. @media (max-width: 600px) { ... } is een blok dat zijn eigen geneste regels bevat, en die geneste regels moeten een niveau dieper worden ingesprongen dan de @media lijn zelf Een find-and-replace benadering kan de twee niet uit elkaar houden; een parser kan.
Omdat deze tool een echte boom bouwt, een geneste @media blok houdt zijn innerlijke regels correct ingesprongen bij verfraaiing en correct ingeklapt bij het minificeren Hetzelfde geldt voor @supports functiequery's en voor @keyframes animaties, waarbij elk percentage stapachtig is 0% en 100% is een eigen blok binnen de animatie Lettertypedeclaraties in @font-face en gelaagd @layer regels worden op dezelfde manier afgehandeld Welke nestdiepte het stylesheet ook bereikt, de inspringing volgt deze.
Dit structurele bewustzijn beschermt ook de delen van een waarde die op syntaxis lijken maar dat niet zijn. A url() kan een gegevens-URI bevatten die is verpakt met base64 en die puntkomma's en dubbele punten bevat, en een content eigenschap kan een aangehaalde string bevatten met beugels of komma's erin De formatter laat de binnenkant van aangehaalde strings en url() waarden precies zoals geschreven, dus een lettertypepad, een SVG-gegevens-URI of een stuk tekst met gegenereerde inhoud wordt nooit ingeklapt, opnieuw gespreid of verbroken. Als u afbeeldingen vaak insluit als gegevens-URI's, wordt de afbeelding naar basis64 gereedschap koppelt op natuurlijke wijze met deze.
Hoeveel kleiner maakt het minificeren van CSS mijn bestand?
Het hangt volledig af van hoeveel witruimte en hoeveel reacties de bron bevat, maar de besparingen zijn reëel Een stylesheet geschreven met royale inspringing en documentatie opmerkingen krimpt gewoonlijk met twintig tot veertig procent zodra die witruimte weg is Een bestand dat al redelijk compact was zal minder krimpen De grootte badge in de tool toont het exacte aantal voor en na bytes voor uw bestand, dus u hoeft nooit te raden.
Die bytes zijn belangrijk omdat CSS render-blocking is Een browser zal geen pagina schilderen totdat het de CSS in de documentkop heeft gedownload en geparseerd, dus elke kilobyte stylesheet is een kilobyte tussen de gebruiker en zijn eerste blik op de pagina Minifying is een van de goedkoopste prestatiewinsten die beschikbaar zijn: geen codewijzigingen, geen risico voor gedrag, alleen minder bytes op de draad. Bovenop minificatie verkleint gzip- of Brotli-compressie op de serverlaag het bestand verder en wordt CSS goed gedimineerd omdat het verwijderen van de inkeping de betekenisvolle tokensverdichter verlaat.
Minifying is een nauwe neef van het werk dat de opdracht heeft gegeven css minifier doet, en de css minifier guide gaat dieper aan de compressiekant De reden dat beide bestaan is gemak: soms land je op de formatter om een bestand op te schonen en wil je het op dezelfde plek minificeren, en soms ga je meteen naar de minifier Hoe dan ook de onderliggende parse is hetzelfde.
Kan ik mijn opmerkingen behouden en de inspringing controleren?
Ja tegen beide, en deze twee opties dekken de gevallen die een one-size formatter mist Opmerkingen worden standaard bewaard bij het verfraaien, want terwijl u CSS leest en bewerkt zijn de opmerkingen vaak het nuttigste deel Bij het minificeren worden opmerkingen standaard verwijderd om elke byte op te slaan, maar er is een schakelaar om ze te bewaren, die u wilt wanneer een bestand een licentieheader of een copyrightkennisgeving bevat die moet overleven in de verzonden bundel.
Inspringing is een keuze omdat teams het niet eens zijn, en het doel van een formatter is om het meningsverschil te beëindigen door één regel consistent toe te passen Twee spaties is de meest voorkomende standaard in moderne front-end projecten, vier spaties passen bij codebases die het elders gebruiken, en tabbladen passen bij teams die ze verkiezen vanwege toegankelijkheid of persoonlijke configuratie. Kies één en elk blok in de uitvoer volgt het. Consistentie is de hele waarde: een formatter is de moeite waard om te gebruiken, juist omdat het de kleine handmatige beslissingen verwijdert die anders bestand voor bestand over een project afdrijven. Het bredere argument voor het standaardiseren van uw tooling loopt op deze manier door de Productiviteitstools voor ontwikkelaar guide.
Welke alledaagse problemen lost formatteren eigenlijk op?
De 40.000-karakter lijn waarmee ik opende is de dramatische case, maar de alledaagse komen veel vaker naar voren Je kopieert een regel van een browser' s dev tools en het komt met berekende steno en inconsistente spacing die niet overeenkomt met uw bestand Je erft een stylesheet van een aannemer die nooit een formatter heeft uitgevoerd, dus brace stijlen en inspringing verschuiven om de paar honderd regels Je plakt een fragment uit een blogpost of een ontwerptool die tabbladen gebruikt waar uw project spaties gebruikt In elk van deze, de CSS werkt, maar het komt niet overeen, en een bestand dat niet overeenkomt is een bestand dat elke toekomstige bewerking vertraagt en alle diffusies vertroebelt.
Het uitvoeren van zo'n bestand door de formatter normaliseert het allemaal in één keer Elk blok krijgt dezelfde inspringing, elke declaratie komt op zijn eigen lijn terecht, en het diff dat je daarna begaat toont alleen de wijzigingen die je daadwerkelijk hebt aangebracht in plaats van een storm van ruis in de witte ruimte Dat laatste punt is de stille productiviteitswinst: een consistent geformatteerde codebasis produceert schone diffs, en schone diffs maken codebeoordeling sneller en regressies gemakkelijker te herkennen Formatteren is niet cosmetisch. Het is wat een stylesheet leesbaar houdt naarmate het groeit, en daarom standaardiseert elk serieus front-end project uiteindelijk op één lay-out en handhaaft het. De Productiviteitstools voor ontwikkelaar guide maakt de bredere case voor het verwijderen van dit soort handmatige wrijving uit uw workflow.
Is het veilig om gevoelige of propriëtaire CSS te formatteren?
Ja, en dit is een bewuste ontwerpbeslissing in plaats van een voetnoot Alle parsering en opmaak gebeuren in JavaScript binnenin uw browser Geen stylesheet wordt geüpload naar een server, niets wordt gelogd, en de tool blijft werken met uw verbinding uitgeschakeld zodra de pagina is geladen U kunt CSS formatteren dat interne klassenamen, niet-uitgebrachte tokens van het ontwerpsysteem of de structuur van een niet-verzonden functie bevat zonder dat iets van het uw machine verlaat.
Dit is belangrijker dan het lijkt, omdat een stylesheet intent kan lekken Klassennamen en aangepaste-property namen telegraferen vaak functies die nog niet openbaar zijn, en de structuur van een component' s CSS kan onthullen hoe een product wordt gebouwd Een server-side formatter, hoe gerenommeerd ook, is een derde partij die u die informatie aan een client-side tool verwijdert de vraag volledig De redenering achter het verwerken van ontwikkelaar gegevens in de browser in plaats van op een server is het onderwerp van de online tools voor gegevensprivacy gids, en het is van toepassing op elk gereedschap in de Coderingstools collectie, niet alleen deze Als privacy gratis is, is er geen reden om het op te geven.
Veelgestelde vragen
Hoe formatteer ik CSS online?
Plak je CSS in het invoergebied en klik op VerfraaienDe tool parseert het stylesheet en herschrijft het met één declaratie per regel en consistente inspringing Alles draait in je browser, dus er wordt niets geüpload.
Wat is het verschil tussen het formatteren en het minificeren van CSS?
Formatteren, ook wel verfraaien genoemd, voegt inspringing en regeleinde toe zodat CSS leesbaar is voor mensen, terwijl minifying alle onnodige witruimte en opmerkingen verwijdert zodat het bestand zo klein mogelijk is voor browsers Deze tool doet beide vanuit dezelfde invoer.
Verandert het formatteren van CSS hoe mijn stijlen werken?
Nee. Verfraaien en minificeren verandert alleen de witruimte en opmerkingen, nooit de regels, selectors of waarden. De browser past een geformatteerd stylesheet toe op precies dezelfde manier waarop het het origineel toepast.
Gaat het correct om met @media en @keyframes?
Ja. Geneste regels zoals @media, @supports en @keyframes worden als blokken ontleed, dus hun innerlijke regels worden een niveau dieper ingesprongen bij verfraaiing en intact gehouden bij het minificeren.
Zal het url () waarden of content strings breken?
Nee. De opmaakmachine laat de binnenkant van aangehaalde tekenreeksen en url ()-waarden precies zoals geschreven, zodat gegevens-URI's, lettertypaden en inhoudstekst nooit worden ingeklapt of opnieuw worden gespreid.
Hoeveel kleiner maakt minifying mijn CSS?
Het hangt af van hoeveel witruimte en hoeveel reacties het bestand bevat, maar een leesbaar stylesheet krimpt gewoonlijk twintig tot veertig procent zodra de inspringing en opmerkingen zijn verwijderd De badge voor grootte toont de exacte bytewijziging voor uw bestand.
Kan ik mijn opmerkingen behouden bij het minificeren?
Ja. er is een schakelaar om opmerkingen te bewaren Laat het uit voor de kleinste uitvoer, of zet het aan wanneer u een licentieheader of auteursnotities in het verkleinde bestand moet bewaren.
Is het veilig om gevoelige CSS hier te formatteren?
Ja. Alle parseren en formatteren gebeurt in JavaScript in uw browser. Er wordt geen stylesheet naar een server verzonden, er wordt niets geregistreerd en de tool werkt met uw verbinding uitgeschakeld.
de css-formatter is gratis, draait volledig in uw browser, en hoeft niet aan te melden Verfraai een stylesheet om het te lezen, minify het om het te verzenden, en nooit meer debuggen een 40.000-karakter lijn Verken het en de rest van de Coderingstools op Toolz.dev.
