V tomto článku sa budem venovať komentárom pre jazyk CSS. Jeho podstatou je predstaviť možné spôsoby zápisu komentárov nie z hľadiska obsahu, ale zvýraznenia. Jazyk CSS podporuje iba jeden spôsob zápisu komentára, no rôznymi trikmi a nástrojmi je možné docieliť zaujímavé riešenia, ktorých výsledkom je prehľadnejší kód jazyka CSS.Asi každý kto pracoval na rozsiahlejšom projekte zistil, že jeden typ komentára pre sprehľadnenie CSS je nedostatočný.Príklad: Komentár v jazyku CSS.
1
/* CSS comment */
Z tohto dôvodu sa veľmi často používa zápis nad pravidlom a nad alebo vedľa deklarácie.Príklad: Zápis komentára nad pravidlom.
1
2
3
4
/* Selector comment */
.selector {
declarations
}
Príklad: Zápis komentára vedľa deklarácie.
1
2
3
4
.selector {
declaration /* Declaration comment */
declaration
}
Príklad: Kombinovaný zápis.
1
2
3
4
5
/* Selector comment */
.selector {
declaration /* Declaration comment */
declaration
}
Pre malé projekty alebo nenáročných web developerov je tento spôsob zápisu komentárov dostatočný. Pre rozsiahlejšie projekty je vhodné CSS štruktúrovať do sekcií / scopes, aby sa zabezpečila lepšie prehľadnosť. A práve vytvorenie sekcií je časť, kde sa dá vyhrať. Ja som začal používať komentáre z jazyka C. Tento spôsob zápisu sa mi zdal veľmi efektívny.Príklad: Komentár vyjadrujúci dôležitosť / sekciu.
1
2
3
/* ------ */
/* HEADER */
/* ------ */
Po prečítaní článku My HTML/CSS coding style od Harryho Robertsa som zistil, že ľudská tvorivosť je nekonečná. Autor totiž tento štýl komentára "povýšil" na nový level. Momentálne som začal používať jeho štýl, ktorý už nie je C-čkový a určite zaujme. Zároveň si drží úlohu výnimočnosti / zdôraznenia, pre ktorú je určený.Príklad: Štýl Harryho Robertsa.
1
2
3
/*------------------------------------*\
CSS COMMENT
\*------------------------------------*/
Príklad: Komentár je možné upraviť nasledovne.
1
2
3
/*-------*\
COMMENT
\*-------*/
Momentálne upravujem komentáre na dĺžku textu pričom je možne ponechať aj pôvodný štýl, aby sekcia bola viac výraznejšia. No postupne som tento štýl ešte trochu vylepšil, kde inšpiráciou bol tentoraz zápis Javadoc.Príklad: Moja aktuálna podoba zápisu komentára pre CSS sekcie.
1
2
3
/*---------*\
* COMMENT *
\*---------*/
Príklad: Resp. so štandardnou veľkosťou písma.
1
2
3
/*---------*\
* Comment *
\*---------*/
No ani takéto úpravy a spôsoby zápisov komentárov CSS neboli pre mňa dostatočné. Momentálne používam preprocesor Less a ten podporuje ďalší typ komentára.Príklad: Typy komentárov v Less.
1
2
3
4
5
/* Less
multiline
comment */
// Less inline comment
Treba ale upozorniť, že po spracovaní Less je inline komentár z finálneho CSS súboru odstránený. Tento spôsob komentára je určený len pre zdrojové súbory preprocesora Less.Aktuálne som zamenil znak - za znak = a tak moje komentáre pre sekcie v súboroch s CSS vyzerajú nasledovne.Príklad: Súčasný štýl písania mojich CSS komentárov.
1
2
3
4
5
6
7
8
9
/*========*\
* Header *
\*========*/
CSS rules
/*===============*\
* End of Header *
\*===============*/
Nový štýl viac sprehľadňuje začiatok a koniec štýlovania určitého modulu alebo oblasti v layoute.
Záver
Vďaka Harrymu Robertsovi, Less a mojim ďalším úpravám viem prostredníctvom komentárov efektívne manažovať CSS. A aké vychytávky a nástroje pre sprehľadnenie CSS používate vy?3.5.2014 (aktualizované 9.8.2014), Matej LednárKategória: CSSCSS,komentár,programovanie,commentŽiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.Viac informácií nájdete v sekcii O projekte.
