Sådan tilføjes kommentarer til Cascading Style Sheets (CSS)

click fraud protection

Hvert websted består af strukturelle, funktionelle og stilistiske elementer. Cascading Style Sheets diktere udseendet ("look and feel") af et websted. Disse stilarter holdes adskilt fra HTML-strukturen for at gøre det let at opdatere og overholde webstandarder.

Problemet med typografiark

Med størrelsen og kompleksiteten af ​​mange hjemmesider i dag kan stilark blive ret lange og besværlige. Dette problem er vokset i kompleksitet nu medieforespørgsler til lydhøre hjemmesidestilarter er en væsentlig del af designet, der sikrer, at et websted ser ud som det skal uanset enhed. Disse medieforespørgsler alene kan tilføje et betydeligt antal nye stilarter til et CSS-dokument, hvilket gør det endnu sværere at arbejde med. Håndtering af denne kompleksitet er, hvor CSS-kommentarer kan blive en uvurderlig hjælp for webstedsdesignere og udviklere.

Kommentarer tilføjer struktur og klarhed

Tilføjelse af kommentarer til et websteds CSS-filer organiserer sektioner af denne kode til en menneskelig læser, der gennemgår dokumentet. Det sikrer også konsistens, når en webprofessional holder op, hvor en anden slutter, eller når team af mennesker arbejder på et websted.

instagram viewer

Velformaterede kommentarer kommunikerer vigtige aspekter af stilarket til medlemmer af et team, der muligvis ikke er bekendt med koden. Disse kommentarer er også nyttige for folk, der har arbejdet på siden før, men som ikke har gjort det for nylig; webdesignere arbejder typisk på mange websteder, og det er svært at huske designstrategier fra den ene til den næste.

Kun til professionelle øjne

CSS-kommentarer vises ikke, når siden gengives webbrowsere. Disse kommentarer er kun informative, ligesom HTML-kommentarer er (selvom syntaksen er forskellig). Disse CSS-kommentarer påvirker ikke den visuelle visning af et websted på nogen måde.

Tilføjelse af CSS-kommentarer

Det er ret nemt at tilføje en CSS-kommentar. Book din kommentar med de korrekte indledende og afsluttende kommentar tags:

Begynd din kommentar med at tilføje /* og luk det med */.

Alt, der vises mellem disse to tags, er indholdet af kommentaren, kun synlig i koden og ikke gengivet af browseren.

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

/ * eksempel på rød kant * /
div # border_red {
kant: tynd solid rød;
}
/***************************
****************************
Stil til kodetekst
****************************
***************************/

Opdeler sektioner

Mange designere organiserer stilark i små, letfordøjelige klumper, der er nemme at scanne, når de læser. Typisk vil du se kommentarer forud for og efterfulgt af række af bindestreger, der skaber store, åbenlyse pauser på siden, der er lette at se. Her er et eksempel:

/ * Header Styles * /

Disse kommentarer angiver starten på et nyt afsnit af kodning.

Kommenterer kode

Da kommentar-tags beder browseren om at ignorere alt imellem dem, kan du bruge dem til midlertidigt at deaktivere bestemte dele af CSS-kode. Dette trick kan være praktisk, når du debugger, eller når du justerer websidesformatering. Faktisk bruger designere dem ofte til at "kommentere" eller "slukke" kodeområder for at se, hvad der sker, hvis dette afsnit ikke er en del af siden.

Tilføj åbningskommentar-tagget før den kode, du vil kommentere (deaktiver); placer det afsluttende mærke, hvor du vil have, at den deaktiverede del skal slutte. Intet mellem disse tags påvirker den visuelle visning af et websted, hvilket hjælper dig med at debugge CSS for at se, hvor et problem sker. Du kan derefter gå ind og rette netop den fejl og derefter fjerne kommentarerne fra koden.

Tips til CSS-kommentarer

Mange kodere inkluderer kommentarblokke øverst i enhver ny fil med kode. Efterlign denne strategi ved at inkludere en kommentarblok med dit navn, relevante datoer og relaterede oplysninger til hjælp folk forstår sammenhængen med et projekt og ikke kun beslutninger om, hvad der sker i forhold til en bestemt kode blok.

instagram story viewer