Как да вмъкнете коментар в CSS

Включването на коментари във вашия CSS код е полезно и силно препоръчително.

Всеки уеб сайт е съставен от структурни елементи (които са диктувани от HTML), както и визуален стил или "вид и усещане" на този сайт. Каскадните стилови листове (CSS) са това, което се използва за диктуване на визуалния облик на уебсайт. Тези стилове се съхраняват отделно от HTML структурата, за да се улесни актуализирането и спазването на уеб стандартите.

С размера на сложността на много сайтове днес, стилните листове могат бързо да станат доста продължителни и много тромави, за да работите с тях. Това е особено вярно, когато започнете да добавяте в мултимедийни заявки за отзивчиви стилове на уебсайтове . Само тези заявки за медии могат да добавят значителен брой нови стилове към CSS документ и да го правят още по-трудно да се работи. Това е мястото, където коментарите на CSS могат да станат безценна помощ на уебсайт.

Добавянето на коментари към CSS файловете на уебсайт е чудесен начин за добавяне на структура към секции от този код за човешки четец, който преглежда документа. Това също е чудесен начин за обяснение на тези стилове за уеб специалист, който може да се наложи да работи на сайта в бъдеще - включително и себе си!

В крайна сметка, изящно добавените коментари за CSS ще направят стиловият лист по-лесен за обработка. Това наистина е важно за стиловите листове, които ще бъдат редактирани от отбори. Коментарите могат да се използват за общуване на важни аспекти на листа с стилове на различни членове на екипа, които вече не са запознати с кода. Тези коментари могат да бъдат много полезни и за хората, които са работили преди това, ако се върнат в кода, след като са се отдалечили от него за известно време. Често ми е трябвало да редактирам уебсайт, който построих преди няколко месеца или дори преди години и имайки добре форматирани коментари в HTML и CSS е много добре дошъл помощ! Не забравяйте, че само защото сте построили сайт, не означава, че ще помните защо сте направили нещата, които сте направили, когато се върнете в този сайт в бъдеще! Коментарите могат да направят ясно намеренията ви и да изяснят всякакви недоразумения, преди да се случат.

Едно нещо, което трябва да разберете за коментарите в CSS е, че те не се показват, когато страницата се изобразява в уеб браузърите. Тези коментари са само информационни, точно както HTML коментарите са (въпреки че синтаксиса е различен между двата). Тези коментари на CSS не засягат визуалното показване на даден сайт по никакъв начин и просто присъстват в самия код.

Добавяне на коментари в CSS

Добавянето на коментар в CSS е доста лесно. Просто резервирате коментара си с правилните маркери за отваряне и затваряне на коментарите:

Всичко, което се показва между тези два маркера, ще бъде съдържанието на коментара, което се вижда само в кода и не се изобразява от браузъра.

Коментарът на CSS може да бъде само един ред или може да отнеме няколко реда. Ето един пример за една линия:

div # border_red {граница: тънка твърда червена; } / * пример за червена граница * /

И един многолентов пример:

/ *************************** ********************** ****** Стил за кодов текст ******************************** ************ *************** /

Прекъсване на секциите

Един от начините, по които често използвам коментарите на CSS, е да организирам листа за стиловете си в по-малки, по-лесно разглобяеми парчета. Харесва ми да мога лесно да видя тези раздели, когато прегледам файла по-късно. За да направите това, често добавям коментари с много тирета в тях, така че да осигурят големи, очевидни почивки на страницата, които лесно се виждат, докато бързо преглеждам кода. Ето един пример:

/ * ----------------------- Стилове за заглавки ----------------------- ------- * /

Когато видя един от тези коментари в моя код, знам, че това е началото на нова част от този документ, което ми позволява по-лесно да обработвам и използвам кода.

& # 34; Коментиране & # 34; код

Маркерите за коментари също могат да бъдат полезни при действителния процес на кодиране и отстраняване на грешки на страница. Коментарите могат да се използват за "коментиране" или "изключване" на тези кодове, за да се види какво се случва, ако този раздел не е част от страницата.

И така, как работи това? Е, защото кодовете за коментари казват на браузъра да игнорира всичко между тях, можете да ги използвате, за да изключите временно определени части от CSS кода. Това може да бъде удобно при отстраняване на грешки или при настройване на форматирането на уеб страници.

За да направите това, просто добавете кода за отваряне на коментара, където искате кодът да започне да бъде деактивиран, и след това поставете този краен маркер там, където искате да завърши деактивираната част. Всичко между тези маркери няма да се отрази на визуалния дисплей на даден сайт, което ви позволява да отстраните грешки в CSS, за да видите къде може да се случи проблем. След това можете да влезете и да поправите този проблем и да премахнете коментарите от кода.

CSS коментира съветите

Като обобщение, ето някои съвети, които трябва да запомните, когато използвате коментарите във вашия CSS:

  1. Коментарите могат да обхващат няколко реда.
  2. Коментарите могат да включват елементи от CSS, които не искате да се изобразяват от браузър, но не искате да ги изтриете напълно. Това е чудесен начин за отстраняване на грешки в стиловите листове на уебсайт - просто не забравяйте да премахнете неизползваните стилове (вместо да ги оставяте коментирани), ако решите, че нямате нужда от тях на уебсайта
  3. Използвайте коментари, когато пишете сложни CSS, за да добавите разяснения и да информирате бъдещите разработчици или себе си в бъдеще за важни неща, които трябва да знаят. Това ще спести време за бъдещо развитие за всички участници.
  4. Коментарите могат да включват и мета информация като:
    • автор
    • дата на създаване
    • информация за авторските права

производителност

Коментарите със сигурност могат да бъдат полезни, но имайте предвид, че колкото повече коментари добавяте към листа с стилове, толкова по-тежък ще бъде той, което ще засегне скоростта и производителността на сайта. Това е истинско безпокойство, но не бива да се колебаете да добавите полезни и легитимни коментари от страх, че представянето ще пострада. Линиите на CSS не придават значителен размер на документ. Трябва да добавите тонове от коментари, за да направите значително влияние върху размера на CSS файла. Добавянето на няколко полезни коментара в CSS не би трябвало да ви дава негативно отрицателно въздействие върху скоростта на страницата.

В крайна сметка ще искате да намерите баланса между полезните коментари и твърде много коментари, за да получите ползите и от двете във вашите CSS документи.

Оригинална статия на Дженифър Кринин. Редактирано от Джереми Жиар на 7/5/17