Každý web je složen ze strukturálních, funkčních a stylistických prvků. Kaskádové styly diktovat vzhled („vzhled a chování“) webové stránky. Tyto styly jsou udržovány odděleně od struktury HTML, což usnadňuje aktualizaci a dodržování webových standardů.
Problém se styly
S velikostí a složitostí mnoha dnešních webových stránek se šablony stylů mohou stát docela zdlouhavými a těžkopádnými. Tento problém nyní narostl ve složitost mediální dotazy pro responzivní styly webových stránek jsou podstatnou součástí designu a zajišťují, že web vypadá bez ohledu na zařízení tak, jak má. Samotné tyto mediální dotazy mohou do dokumentu CSS přidat značný počet nových stylů, takže se s ním ještě těžší pracuje. Při řešení této složitosti se komentáře CSS mohou stát neocenitelnou pomocí návrhářům a vývojářům webových stránek.
Komentáře Přidejte strukturu a jasnost
Přidávání komentářů k souborům CSS na webu organizuje části tohoto kódu pro lidského čtenáře, který dokument zkontroluje. Zajišťuje také konzistenci, když jeden webový profesionál navštíví místo, kde jiný končí, nebo když na webu pracují týmy lidí.
Dobře naformátované komentáře sdělují důležité aspekty šablony stylů členům týmu, kteří možná tento kód neznají. Tyto komentáře jsou také užitečné pro lidi, kteří na webu již dříve pracovali, ale nedávno tak neučinili; weboví designéři obvykle pracují na mnoha webech a zapamatovat si návrhové strategie z jednoho na druhý je obtížné.
Pouze pro oči profesionálů
Při vykreslení stránky se komentáře CSS nezobrazí internetové prohlížeče. Tyto komentáře jsou pouze informativní Komentáře HTML jsou (i když syntaxe je odlišná). Tyto komentáře CSS žádným způsobem neovlivňují vizuální zobrazení webu.
Přidávání komentářů CSS
Přidání komentáře CSS je docela snadné. Zarezervujte si svůj komentář pomocí správných značek pro otevírání a zavírání komentářů:
Začněte svůj komentář přidáním /* a zavřete to */.
Cokoli, co se objeví mezi těmito dvěma značkami, je obsah komentáře, viditelný pouze v kódu a nevykreslený prohlížečem.
Komentář CSS může zabírat libovolný počet řádků. Zde jsou dva příklady:
/ * příklad červeného ohraničení * /
div # border_red {
hranice: tenká plná červená;
}
/***************************
****************************
Styl pro text kódu
****************************
***************************/
Prolomení sekcí
Mnoho návrhářů organizuje šablony stylů do malých, snadno stravitelných bloků, které lze při čtení snadno skenovat. Typicky uvidíte komentáře, před nimiž následuje řada pomlček, které na stránce vytvářejí velké, zjevné konce, které jsou snadno viditelné. Zde je příklad:
/ * Styly záhlaví * /
Tyto komentáře označují začátek nové sekce kódování.
Komentující kód
Protože značky komentářů říkají prohlížeči, aby ignoroval vše mezi nimi, můžete je použít k dočasnému deaktivaci určitých částí kódu CSS. Tento trik může být užitečný při ladění nebo při úpravách formátování webových stránek. Ve skutečnosti je návrháři často používají k „komentování“ nebo „vypínání“ oblastí kódu, aby zjistili, co se stane, pokud tato část není součástí stránky.
Přidejte úvodní značku komentáře před kód, který chcete komentovat (deaktivovat); umístěte uzavírací značku na místo, kde chcete ukončit deaktivovanou část. Nic mezi těmito značkami neovlivní vizuální zobrazení webu, což vám pomůže ladit CSS, abyste zjistili, kde k problému dochází. Pak můžete jít a opravit jen tu závadu a poté odstranit komentáře z kódu.
Tipy pro komentování CSS
Mnoho kodérů obsahuje bloky komentářů v horní části každého nového souboru s kódem. Napodobte tuto strategii zahrnutím bloku komentářů se svým jménem, příslušnými daty a souvisejícími informacemi, které vám pomohou lidé chápou kontext projektu, nejen rozhodnutí o tom, co se stane ve vztahu ke konkrétnímu kódu blok.