Cum se adaugă un comentariu la Foi de stil în cascadă (CSS)

click fraud protection

Fiecare site web este alcătuit din elemente structurale, funcționale și stilistice. Foi de stil în cascadă dictează apariția („aspectul și simțirea”) unui site web. Aceste stiluri sunt păstrate separat de structura HTML pentru a permite o actualizare ușoară și respectarea standardelor web.

Problema cu foile de stil

Cu dimensiunea și complexitatea multor site-uri web de astăzi, foile de stil pot deveni destul de lungi și greoaie. Această problemă a crescut în complexitate acum interogări media pentru stiluri de site-uri web receptive sunt o parte esențială a designului, asigurându-se că un site web arată așa cum ar trebui, indiferent de dispozitiv. Numai acele interogări media pot adăuga un număr semnificativ de stiluri noi unui document CSS, ceea ce face mai dificilă lucrul cu acesta. Gestionarea acestei complexități este locul în care comentariile CSS pot deveni un ajutor de neprețuit pentru proiectanții și dezvoltatorii de site-uri web.

Comentarii Adăugați structură și claritate

Adăugarea de comentarii la fișierele CSS ale unui site web organizează secțiuni ale codului respectiv pentru un cititor uman care examinează documentul. De asemenea, asigură coerență atunci când un profesionist din web reia de unde pleacă altul sau când echipe de oameni lucrează pe un site.

instagram viewer

Comentariile bine formatate comunică aspecte importante ale foii de stil membrilor unei echipe care s-ar putea să nu fie familiarizați cu codul. Aceste comentarii sunt utile și pentru persoanele care au mai lucrat pe site, dar nu au făcut-o recent; designerii web lucrează de obicei pe multe site-uri, iar amintirea strategiilor de proiectare de la unul la altul este dificilă.

Doar pentru ochii profesioniștilor

Comentariile CSS nu sunt afișate când pagina este redată browsere web. Aceste comentarii sunt doar informative, la fel ca Comentarii HTML sunt (deși sintaxa este diferită). Aceste comentarii CSS nu afectează în niciun fel afișarea vizuală a unui site.

Adăugarea de comentarii CSS

Adăugarea unui comentariu CSS este destul de ușoară. Rezervați comentariul cu etichetele corecte de deschidere și închidere:

Începeți comentariul adăugând /* și închide-l cu */.

Orice apare între aceste două etichete este conținutul comentariului, vizibil numai în cod și nu redat de browser.

Un comentariu CSS poate ocupa orice număr de linii. Iată două exemple:

/ * exemplu de margine roșie * /
div # border_red {
margine: subțire roșu solid;
}
/***************************
****************************
Stil pentru textul codului
****************************
***************************/

Divizarea secțiunilor

Mulți designeri organizează foi de stil în bucăți mici, ușor de digerat, care sunt ușor de scanat la citire. De obicei, veți vedea comentarii precedate și urmate de serii de cratime care creează pauze mari și evidente în pagină, care sunt ușor de văzut. Iată un exemplu:

/ * Stiluri de antet * /

Aceste comentarii indică începutul unei noi secțiuni de codificare.

Cod de comentare

Deoarece etichetele de comentarii îi spun browserului să ignore totul dintre ele, le puteți folosi pentru a dezactiva temporar anumite părți ale codului CSS. Acest truc poate fi la îndemână atunci când depanați sau când modificați formatarea paginii web. De fapt, designerii le folosesc adesea pentru a „comenta” sau „a dezactiva” zone de cod pentru a vedea ce se întâmplă dacă acea secțiune nu face parte din pagină.

Adăugați eticheta de comentariu de deschidere înainte de codul pe care doriți să îl comentați (dezactivați); plasați eticheta de închidere unde doriți să se încheie porțiunea dezactivată. Nimic dintre aceste etichete nu va afecta afișarea vizuală a unui site, ajutându-vă să depanați CSS pentru a vedea unde se întâmplă o problemă. Puteți apoi să intrați și să remediați doar eroarea respectivă și apoi să eliminați comentariile din cod.

Sfaturi pentru comentarii CSS

Mulți codificatori includ blocuri de comentarii în partea de sus a oricărui fișier nou cu cod. Imitați această strategie prin includerea unui bloc de comentarii cu numele dvs., datele relevante și informații conexe pentru a vă ajuta oamenii înțeleg contextul unui proiect și nu doar deciziile cu privire la ceea ce se întâmplă în raport cu un anumit cod bloc.

instagram story viewer