Sådan forskønner du CSS-kode manuelt
En CSS beautifier er en betegnelse for en metode eller funktion, der gør CSS-kode lettere at læse ved at ordne mellemrum, indrykning og linjeskift. CSS beskriver blandt andet farver, skrifttyper og placering på en webside. Når reglerne står tæt eller uden tydelig struktur, kan det være vanskeligt at finde en bestemt egenskab eller opdage en fejl. En ensartet formatering ændrer normalt ikke, hvad reglerne betyder for browseren, men gør koden mere overskuelig for mennesker.
Hvad formatering af CSS betyder
En CSS-regel består typisk af en selektor og en blok med deklarationer. Selektoren angiver, hvilke elementer reglen gælder for, mens deklarationerne beskriver egenskaber og værdier. Krøllede parenteser afgrænser blokken, og semikolon adskiller deklarationerne. Formatering handler om at placere disse dele tydeligt, så strukturen er let at følge.
Der findes forskellige stilvalg. Nogle skriver hver deklaration på sin egen linje; andre samler enkle regler på færre linjer. Indrykning kan også variere. Det vigtigste er, at samme stil bruges konsekvent i den kode, der vedligeholdes. Kommentarer og tomme linjer kan desuden gøre større afsnit lettere at skelne fra hinanden.
Sådan forskønner du CSS trin for trin
- Find regelgrænserne. Identificér hver selektor og den blok, der hører til den. Kontrollér, at en åbnende krøllet parentes har en tilsvarende afsluttende parentes.
- Placér deklarationerne tydeligt. Sæt hver egenskab og dens værdi på en separat linje. Behold kolonnet mellem egenskab og værdi og semikolon efter deklarationerne. Det gør det nemmere at se, hvor én indstilling slutter, og den næste begynder.
- Brug ensartet indrykning. Flyt deklarationerne et fast trin ind i forhold til selektoren. Den afsluttende parentes placeres igen på selektorens niveau. Vælg mellemrum eller tabulatorer, og undgå at blande formateringsmåder tilfældigt.
- Adskil reglerne. Lad hver ny selektor begynde på en ny linje, og brug en tom linje, når det hjælper med at vise, at et nyt afsnit starter.
- Gennemgå resultatet. Kontrollér parenteser, kolon, semikoloner og værdier. Sammenlign med udgangspunktet, så ingen egenskaber eller selektorer ved en fejl er blevet fjernet eller ændret.
For eksempel kan en regel med selektoren p stå på én linje, efterfulgt af en blok med egenskaben color og værdien navy på sin egen indrykkede linje. Den afsluttende parentes står under selektoren. Eksemplet viser placeringen af kodeelementerne; det er ikke nødvendigt at ændre værdien for at formatere reglen.
Hvor CSS-formatering bruges
En pæn og ensartet stil er nyttig, når CSS skal læses, rettes eller udvides. Ved fejlsøgning kan linjeopdeling gøre det lettere at finde en bestemt deklaration. Når flere personer arbejder med samme kode, mindsker fælles formateringsregler forskelle i udseende og gør ændringer nemmere at gennemgå.
Formatering kan også indgå som et sidste trin, før kode deles eller gemmes i et projekt. Den bør dog holdes adskilt fra ændringer af selve indholdet: En beautifier ordner præsentationen af koden, mens valg af selektorer, egenskaber og værdier bestemmer sidens udseende. Hvis koden også minificeres, bliver den typisk komprimeret med færre mellemrum og linjeskift, hvilket tjener et andet formål end læsbar formatering.