Zahrnutie komentárov do vášho kódu CSS je užitočné a veľmi odporúčané.
Každá webová stránka sa skladá zo štrukturálnych prvkov (ktoré sú diktované HTML), ako aj z vizuálneho štýlu alebo "vzhľadu" tejto stránky. Kaskádové štýly (CSS) sú to, čo sa používa na diktovanie vizuálneho vzhľadu webových stránok. Tieto štýly sú oddelené od štruktúry HTML, čo umožňuje ľahkú aktualizáciu a dodržiavanie webových štandardov.
Vďaka veľkosti zložitosti mnohých webových stránok sa štýly môžu rýchlo stať pomerne zdĺhavým a veľmi ťažkopádnym. Platí to najmä vtedy, keď začnete pridávať do mediálnych dopytov odpovede na štýly webových stránok . Samotné mediálne dopyty môžu do dokumentu CSS pridávať značné množstvo nových štýlov a robiť to ešte ťažšie. Práve tam sa môžu príspevky CSS stať neoceniteľnou pomocou na webových stránkach.
Pridanie komentárov k súborom CSS webových stránok je skvelý spôsob, ako pridať štruktúru k častiam tohto kódu pre čitateľa, ktorý kontroluje dokument. Je to tiež skvelá metóda vysvetľovania tých štýlov pre webových profesionálov, ktorí môžu v budúcnosti pracovať na webe - vrátane seba!
Nakoniec, šikovne pridané komentáre CSS vám uľahčia spracovanie štýlu. Toto je skutočne dôležité pre štýly, ktoré budú editovať tímy. Komentáre môžu byť použité na oznamovanie dôležitých aspektov štýlu šablón rôznym členom tímu, ktorí už nemusia poznať kód. Tieto pripomienky môžu byť tiež veľmi užitočné pre ľudí, ktorí už pracovali na webe, ak sa dostanú späť do kódexu po tom, čo už nejaký čas preč od neho. Často som musel upravovať webovú stránku, ktorú som postavil pred niekoľkými mesiacmi alebo dokonca rokmi, a má dobré formáty komentárov v HTML a CSS je veľmi vítaná pomoc! Pamätajte, že len preto, že ste postavili stránky, neznamená, že si spomeniete, prečo ste urobili to, čo ste urobili, keď sa v budúcnosti vrátite na túto stránku! Pripomienky vám umožnia objasniť vaše zámery a objasniť nejaké nedorozumenia skôr, než sa to stane.
Jedna vec, ktorú je potrebné pochopiť v súvislosti s komentármi služby CSS, je to, že sa nezobrazujú pri vykresľovaní stránky vo webových prehliadačoch. Tieto komentáre sú len informačné, rovnako ako komentáre HTML (hoci syntax je medzi nimi odlišný). Tieto komentáre CSS neovplyvňujú vizuálne zobrazenie stránky akýmkoľvek spôsobom a sú jednoducho prítomné v samotnom kóde.
Pridávanie komentárov služby CSS
Pridávanie komentára CSS je pomerne jednoduché. Jednoducho začiarknite svoj komentár správnymi otváracími a záverečnými komentármi:
- Začnite svoj komentár pridaním / *
- Zatvorte svoj komentár pridaním * /
Všetko, čo sa objaví medzi týmito dvoma tagmi, bude obsahom komentára, ktorý je viditeľný iba v kóde a ktorý prehliadač nevytvára.
Komentár CSS môže mať iba jeden riadok alebo môže obsahovať viac riadkov. Tu je jeden príklad riadku:
div # border_red {okraj: tenká červená; } / * Príklad červeného okraja * /A príklad viacerých liniek:
/ *************************** *********************** ****** Štýl pre kódový text ******************************** ************* *************** /Rozdelenie sekcií
Jedným zo spôsobov, ako často používam komentáre CSS, je usporiadanie môjho štýlu na menších, ľahšie rozložiteľných kusoch. Rád by som mohol ľahko vidieť tieto sekcie, keď som pozrieť súbor neskôr. Aby som to urobil, často pridávam komentáre s množstvom pomlčiek v nich, aby poskytovali veľké, zjavné prestávky na stránke, ktoré sú ľahko viditeľné, keď rýchlo prechádzam kódom. Tu je príklad:
/ * ----------------------- Styly hlavičky ----------------------- ------- * /Keď vidím jeden z týchto komentárov v mojom kóde, viem, že je to začiatok novej časti tohto dokumentu, čo mi umožňuje jednoduchšie spracovať a používať kód.
Komentár & # 34; kód
Značky komentárov môžu byť tiež užitočné v skutočnom procese kódovania a ladenia stránky. Komentáre je možné použiť na "komentovanie" alebo "vypnutie" oblastí tohto kódu, aby ste zistili, čo sa stane, ak táto časť nie je súčasťou stránky.
Tak ako to funguje? No, pretože značky komentárov hovoria, že prehliadač ignoruje všetko medzi nimi, môžete ich použiť na dočasné vypnutie určitých častí kódu CSS. To môže byť užitočné pri ladení alebo pri úpravách formátovania webových stránok.
Ak to chcete urobiť, jednoducho pridajte značku úvodného komentára, kde chcete, aby kód začal byť deaktivovaný, a potom umiestnite túto koncovú značku tam, kde chcete ukončiť časť s vypnutými údajmi. Všetko medzi týmito značkami neovplyvní vizuálne zobrazenie stránky a umožní vám ladenie CSS, aby ste zistili, kde sa môže vyskytnúť problém. Potom môžete vstúpiť a odstrániť komentáre z tohto kódu.
CSS komentujúce tipy
Ako recap, uvádzame niekoľko tipov, ktoré si musíte zapamätať v komentároch vo vašom CSS:
- Komentár môže obsahovať viacero riadkov.
- Komentáre môžu obsahovať prvky CSS, ktoré nechcete zobrazovať prehliadačom, ale nechcete úplne odstrániť. Je to pekný spôsob, ako ladiť štýl webových stránok - jednoducho nezabudnite odstrániť nepoužívané štýly (na rozdiel od toho, aby ste ich nechali komentovať), ak sa rozhodnete, že ich nepotrebujete na webových stránkach
- Používajte pripomienky vždy, keď napíšete komplikované CSS, aby ste pridali objasnenie a informovali budúcich vývojárov, alebo sami v budúcnosti, o dôležitých veciach, ktoré by mali vedieť. Tým sa ušetrí budúci vývojový čas pre všetkých zúčastnených.
- Pripomienky môžu obsahovať aj meta informácie, ako napríklad:
- autor
- dátum vytvorenia
- informácie o autorských právach
výkon
Komentáre môžu byť určite užitočné, ale uvedomte si, že čím viac pripomienok pridáte do štýlu, tým sa stáva heftier, čo ovplyvní rýchlosť a výkonnosť sťahovania. To je skutočný problém, ale nemali by ste váhavo pridávať užitočné a legitímne pripomienky zo strachu, že výkon bude trpieť. Riadky CSS nepridávajú do dokumentu značnú veľkosť. Budete musieť pridať TONS riadkov komentárov, aby ste významne ovplyvnili veľkosť súboru CSS. Pridanie niekoľkých užitočných komentárov do vášho CSS by nemalo mať čistý negatívny vplyv na rýchlosť stránky.
Nakoniec budete chcieť nájsť rovnováhu medzi užitočnými komentármi a príliš veľa komentárov, aby ste získali výhody oboch dokumentov v CSS.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 7/5/17