Hoe CSS-embellissement werkt
De beautifier leest je stylesheet teken voor teken, houdt bij hoe diep elk blok is genest en emitteert die opnieuw met consistente spatiëring. Het verandert nooit wat de stijlen doen — alleen hoe ze eruitzien in het bestand.
- Tokeniseren. De bibliotheek scant je invoer naar een stroom van tokens: selectors, eigenschapsnamen, waarden, at-regels, opmerkingen en de accolades, dubbele punten en puntkomma's die ze scheiden. Strings en url()-waarden worden als enkelvoudige eenheden herkend, zodat een accolade in een content-eigenschap nooit wordt aangezien voor een blokscheidingsteken.
- Nesting bijhouden. Terwijl de beautifier de tokenstroom doorloopt, houdt hij een lopend inspringniveau bij. Elke openende accolade verhoogt het niveau, of die nu bij een regelblok, een media query of een keyframes-blok hoort, en elke sluitende accolade verlaagt het. Die diepte bepaalt hoeveel inspringeenheden voor elke teruggestuurde regel staan.
- Je opties toepassen. Je keuze voor inspringing (2 spaties, 4 spaties of een tab) stelt de breedte van één niveau in. De accoladesstijl bepaalt of een openende accolade bij de selector ervoor blijft of naar een eigen regel valt. De overige schakelaars voegen een lege regel toe tussen regelblokken en verdelen gegroepeerde selectors over afzonderlijke regels.
- Opnieuw emitteren. Ten slotte drukt de formatter de tokens af met de inspringing en regelafbrekingen die het heeft berekend, met één declaratie per regel en een spatie na elke dubbele punt. Het resultaat is dezelfde stylesheet, opgemaakt zodat een mens de cascade kan doorzoeken.
Waarom CSS embelleren
- Geminifieerde stylesheets lezen. Productie-CSS wordt op één regel verzonden zonder spatiëring tussen regels. Embelleren herstelt de regelafbrekingen en inspringing zodat je de selector achter een layoutfout kunt vinden en precies kunt zien welke declaraties die instelt, zelfs zonder een source map.
- Inconsistente bestanden opruimen. Een stylesheet die meerdere mensen hebben aangeraakt drijft naar gemengde inspringing en accoladesstijlen. Één doorgang door de beautifier normaliseert het hele bestand naar één opmaak, waardoor de volgende diff echte cascade-wijzigingen toont in plaats van witruimteruis.
- Dit gereedschap belast je pagina niet. De meeste online formatters laden hun volledige bibliotheek zodra je de pagina opent. Deze laadt js-beautify lazy alleen wanneer je op Embelleren klikt of Live-modus inschakelt, zodat de pagina openen een paar kilobytes kost in plaats van een paar honderd, en de initiële weergave snel blijft.
- Niets verlaat je browser. De beautifier draait volledig op je apparaat. Je CSS wordt nooit naar een server geüpload, wat belangrijk is wanneer de stylesheet die je inspecteert van een klant is, interne klassenamen bevat of onder een geheimhoudingsovereenkomst valt.
Veelvoorkomende toepassingen
CSS embelleren komt naar voren wanneer iemand een stylesheet moet lezen die niet geschreven was om gelezen te worden.
- Productie debuggen: plak een geminifieerde stylesheet uit het Netwerk-tabblad om de regel te vinden die het layout overschrijft dat je verwachtte.
- Code review voorbereiden: formatteer de inconsistent ingesprongen stylesheet van een bijdrager voordat je de pull request opent zodat reviewers cascade-wijzigingen zien, niet opmaakvariatie.
- Leren en auditen: vouw de stylesheet van een framework of componentenbibliotheek uit om te bestuderen hoe de selectors, media queries en aangepaste eigenschappen zijn opgebouwd.
Een uitgewerkt voorbeeld
Neem een geminifieerde one-liner: a{color:red;margin:0}b{padding:0}. Plak die hierboven met inspringing ingesteld op 2 spaties en accoladesstijl Collapse, klik dan op Embelleren. Je krijgt leesbare blokken terug: a { op een eigen regel, de declaraties color: red; en margin: 0; elk één niveau dieper ingesprongen, de sluitende accolade onder de selector uitgelijnd, en de b-regel eronder. Schakel de accoladesstijl naar Expand en elke openende accolade valt naar een eigen regel. Verander de inspringing naar Tabs en elk niveau verschuift van twee spaties naar een tab-teken. De stijlen zijn identiek; alleen de opmaak verandert.
FAQ
Draait dit in mijn browser?
Ja. De js-beautify-bibliotheek wordt lazy geladen de eerste keer dat je op Embelleren klikt of Live-modus inschakelt, daarna gecachet. Je CSS verlaat de pagina nooit — geen serverroundtrip, geen upload.
Is embelleren hetzelfde als deminificeren?
Het herstelt leesbare opmaak — inspringing, regelafbrekingen en spatiëring — maar kan geen opmerkingen terugbrengen die minificatie heeft verwijderd, noch enige structuur herstellen die nooit in het bestand zat. Het herformatteert alleen de aanwezige declaraties en selectors.
Verandert embelleren hoe mijn stijlen worden gerenderd?
Nee. Embellissement voegt alleen witruimte en regelafbrekingen toe en verwijdert die; de cascade blijft onaangeroerd en de pagina rendert identiek. De volgorde van eigenschappen, specificiteit en waarden blijven precies zoals je ze hebt geschreven.
Wat betekenen de accoladesstijlopties?
Collapse houdt een openende accolade op dezelfde regel als de selector (a {), wat de gangbare CSS-conventie is. Expand plaatst elke openende accolade op een eigen regel onder de selector. De schakelaars voor lege regels en één selector per regel bepalen de spatiëring tussen regelblokken en hoe gegroepeerde selectors zoals h1, h2, h3 worden opgemaakt.
CSS embelleren aan de browserkant geeft je een leesbare stylesheet zonder een bouwstap of upload. Plak een geminificeerde of rommelige stylesheet, kies je inspringing en accoladesstijl, kopieer of download dan het resultaat. Niets verlaat je apparaat, er is geen account nodig en de bibliotheek laadt alleen wanneer je erom vraagt — het openen van deze pagina kost je een paar kilobytes, niet een megabyte.