Hvordan legge til kommentarer til Cascading Style Sheets (CSS)

click fraud protection

Hvert nettsted består av strukturelle, funksjonelle og stilistiske elementer. Cascading Style Sheets diktere utseendet ("utseendet") til et nettsted. Disse stilene holdes atskilt fra HTML-strukturen for å gjøre det enkelt å oppdatere og overholde webstandardene.

Problemet med stilark

Med størrelsen og kompleksiteten til mange nettsteder i dag, kan stilark bli ganske lange og tungvint. Dette problemet har vokst i kompleksitet nå mediespørsmål til responsive nettstedstiler er en viktig del av design, og sørger for at et nettsted ser ut som det skal uavhengig av enhet. Disse mediespørringene alene kan legge til et betydelig antall nye stiler i 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 webdesignere og utviklere.

Kommentarer Legg til struktur og klarhet

Hvis du legger til kommentarer til et nettsted CSS-filer, organiseres deler av den koden for en menneskelig leser som gjennomgår dokumentet. Det sørger også for konsistens når en web-profesjonell henter der en annen slutter, eller når team av mennesker jobber på et nettsted.

instagram viewer

Godt formaterte kommentarer kommuniserer viktige aspekter av 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; webdesignere jobber vanligvis på mange nettsteder, og det er vanskelig å huske designstrategier fra en til en annen.

Bare 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 forskjellig). 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 merkelappene:

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

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

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

/ * rød kanteksempel * /
div # border_red {
kant: tynn solid rød;
}
/***************************
****************************
Stil for kodetekst
****************************
***************************/

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 rekker av bindestreker som skaper store, åpenbare pauser på siden som er lette å se. Her er et eksempel:

/ * Topptekststiler * /

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

Kommenterer kode

Fordi merkelappene forteller nettleseren å ignorere alt mellom dem, kan du bruke dem til å deaktivere bestemte deler av CSS-koden midlertidig. Dette trikset kan være praktisk når du feilsøker, eller når du justerer nettsideformatering. 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 åpningskommentaren før koden du vil kommentere (deaktivere); plasser lukkekoden 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 å feilsøke CSS for å se hvor et problem skjer. Du kan deretter gå inn og fikse akkurat den feilen og deretter fjerne kommentarene fra koden.

Tips om CSS-kommentarer

Mange kodere inkluderer kommentarblokker på toppen av en ny fil med kode. Etterlign den strategien ved å inkludere en kommentarblokk med navnet ditt, relevante datoer og relatert informasjon som hjelp folk forstår konteksten til et prosjekt og ikke bare avgjørelser om hva som skjer i forhold til en spesifikk kode blokkere.

instagram story viewer