Slik setter du inn en CSS-kommentar

Å inkludere kommentarer i CSS-koden din fremmer effektiv utvikling

pxhere.com / CC BY 0

Hver nettside består av strukturelle, funksjonelle og stilistiske elementer. Cascading Style Sheets diktere utseendet ('utseendet og følelsen') til et nettsted. Disse stilene holdes atskilt fra HTML-strukturen for å tillate enkel oppdatering og overholdelse av nettstandarder.

Problemet med stilark

Med størrelsen og kompleksiteten til mange nettsteder i dag, kan stilark bli ganske lange og tungvinte. Dette problemet har vokst i kompleksitet nå som medieforespørsler til responsive nettstedstiler er en viktig del av design, og sikrer at et nettsted ser ut som det skal uansett enhet. Disse mediespørringene alene kan legge til et betydelig antall nye stiler til et CSS-dokument, noe som gjør det enda vanskeligere å jobbe med. Å håndtere denne kompleksiteten er der CSS-kommentarer kan bli en uvurderlig hjelp for nettsteddesignere og utviklere.

Kommentarer Legg til struktur og klarhet

Å legge til kommentarer til et nettsteds CSS-filer organiserer deler av den koden for en menneskelig leser som vurderer dokumentet. Det sikrer også konsistens når en nettprofesjonell fortsetter der en annen slutter, eller når team med mennesker jobber på et nettsted.

Godt formaterte kommentarer kommuniserer viktige aspekter ved stilarket til medlemmer av et team som kanskje ikke er kjent med koden. Disse kommentarene er også nyttige for folk som har jobbet på nettstedet før, men ikke nylig har gjort det; webdesignere jobber vanligvis på mange nettsteder, og det er vanskelig å huske designstrategier fra den ene til den neste.

Kun for profesjonelle øyne

CSS-kommentarer vises ikke når siden gjengis nettlesere . Disse kommentarene er kun informative, akkurat som HTML-kommentarer er (selv om syntaksen er annerledes). Disse CSS-kommentarene påvirker ikke den visuelle visningen av et nettsted på noen måte.

Legger til CSS-kommentarer

Det er ganske enkelt å legge til en CSS-kommentar. Bestill kommentaren din med de riktige innledende og avsluttende kommentartaggene:

Begynn kommentaren din med å legge til /* og lukk den med */ .

Alt som vises mellom disse to taggene er innholdet i kommentaren, kun synlig i koden og ikke gjengitt av nettleseren.

En CSS-kommentar kan ta opp et hvilket som helst antall linjer. Her er to eksempler:

|_+_|

Bryte ut seksjoner

Mange designere organiserer stilark i små, lett fordøyelige biter som er enkle å skanne når de leser. Vanligvis vil du se kommentarer foran og etterfulgt av en rekke bindestreker som skaper store, åpenbare brudd på siden som er enkle å se. Her er et eksempel:

|_+_|

Disse kommentarene indikerer starten på en ny del av kodingen.

Kommentarkode

Fordi kommentartaggene forteller nettleseren å ignorere alt mellom dem, kan du bruke dem til å midlertidig deaktivere visse deler av CSS-koden. Dette trikset kan være nyttig når du feilsøker, eller når du justerer websideformatering. Faktisk bruker designere dem ofte til å 'kommentere' eller 'slå av' kodeområder for å se hva som skjer hvis den delen ikke er en del av siden.

Legg til åpningskommentartaggen før koden du vil kommentere ut (deaktiver); plasser den avsluttende taggen der du vil at den deaktiverte delen skal slutte. Ingenting mellom disse kodene vil påvirke den visuelle visningen av et nettsted, noe som hjelper deg med å feilsøke CSS for å se hvor et problem oppstår. Du kan deretter gå inn og fikse akkurat den feilen og deretter fjerne kommentarene fra koden.

CSS-kommentartips

Mange kodere inkluderer kommentarblokker øverst i enhver ny fil med kode. Etterlign strategien ved å inkludere en kommentarblokk med navnet ditt, relevante datoer og relatert informasjon for å hjelpe folk å forstå konteksten til et prosjekt og ikke bare beslutninger om hva som skjer i forhold til en bestemt kodeblokk.