Всеки уебсайт се състои от структурни, функционални и стилистични елементи. Каскадни таблици със стилове диктуват външния вид („външния вид и усещане“) на уебсайт. Тези стилове се пазят отделно от HTML структурата, за да се улесни актуализирането и спазването на уеб стандартите.
Проблемът със таблиците със стилове
С размера и сложността на много уебсайтове днес таблиците със стилове могат да станат доста дълги и тромави. Този проблем сега се усложни медийни заявки за отзивчиви стилове на уебсайтове са съществена част от дизайна, като гарантират, че уебсайтът изглежда както трябва, независимо от устройството. Само тези медийни заявки могат да добавят значителен брой нови стилове към CSS документ, което прави още по-трудно работата с тях. Управлението на тази сложност е мястото, където CSS коментарите могат да се превърнат в безценна помощ за дизайнерите и разработчиците на уебсайтове.
Коментари Добавяне на структура и яснота
Добавянето на коментари към CSS файловете на уебсайта организира раздели от този код за човешки читател, който преглежда документа. Той също така гарантира последователност, когато един професионалист в мрежата продължи там, където друг спира, или когато екипи от хора работят на даден сайт.
Добре форматираните коментари съобщават важни аспекти на таблицата със стилове на членове на екип, които може да не са запознати с кода. Тези коментари са полезни и за хора, които са работили на сайта и преди, но не и наскоро; уеб дизайнерите обикновено работят на много сайтове и запомнянето на дизайнерските стратегии от една до друга е трудно.
Само за очите на професионалистите
CSS коментарите не се показват, когато страницата се визуализира уеб браузъри. Тези коментари са само информационни, също както HTML коментари са (въпреки че синтаксисът е различен). Тези CSS коментари по никакъв начин не засягат визуалното показване на даден сайт.
Добавяне на CSS коментари
Добавянето на CSS коментар е доста лесно. Подредете вашия коментар с правилните маркери за отваряне и затваряне на коментари:
Започнете вашия коментар, като добавите /* и го затворете с */.
Всичко, което се появява между тези два маркера, е съдържанието на коментара, видимо само в кода и не изобразено от браузъра.
CSS коментар може да заеме произволен брой редове. Ето два примера:
/ * пример с червена граница * /
div # border_red {
граница: тънка плътна червена;
}
/***************************
****************************
Стил за текст на кода
****************************
***************************/
Разбиване на раздели
Много дизайнери организират таблици със стилове в малки, лесно смилаеми парчета, които са лесни за сканиране при четене. Обикновено ще видите коментари, предхождани и последвани от поредица от тирета, които създават големи, очевидни прекъсвания на страницата, които са лесни за видимост. Ето пример:
/ * Стилове на заглавието * /
Тези коментари показват началото на нов раздел на кодирането.
Кодекс за коментиране
Тъй като маркерите за коментари казват на браузъра да игнорира всичко помежду им, можете да ги използвате за временно деактивиране на определени части от CSS кода. Този трик може да бъде удобен, когато отстранявате грешки или когато настройвате форматирането на уеб страници. Всъщност дизайнерите често ги използват, за да „коментират“ или „изключат“ области на кода, за да видят какво се случва, ако този раздел не е част от страницата.
Добавете началния маркер за коментар преди кода, който искате да коментирате (деактивирайте); поставете затварящия маркер там, където искате деактивираната част да приключи. Нищо между тези маркери няма да повлияе на визуалното показване на даден сайт, като ви помага да отстранявате грешки в CSS, за да видите къде се случва проблем. След това можете да влезете и да поправите само този проблем и след това да премахнете коментарите от кода.
CSS Коментари Съвети
Много кодери включват блокове за коментари в горната част на всеки нов файл с код. Имитирайте тази стратегия, като включите блок за коментари с вашето име, подходящи дати и свързана информация, за да помогнете хората разбират контекста на даден проект, а не само решения относно това, което се случва спрямо конкретен код блок.