Incloure comentaris al vostre codi CSS és útil i molt recomanable.
Tots els llocs web estan formats per elements estructurals (dictats per HTML), així com per l'estil visual o "look and feel" d'aquest lloc. Les fulles d'estil en cascada (CSS) són les que s'utilitzen per dictar l'aspecte visual d'un lloc web. Aquests estils es mantenen separats de l'estructura HTML per permetre la fàcil actualització i compliment dels estàndards web.
Amb la mida de la complexitat de molts llocs web d'avui dia, els fulls d'estil poden arribar a ser ràpidament molt llargs i molt complicats de treballar. Això és especialment cert quan comença a afegir consultes als mitjans per als estils de llocs web responsius . Les consultes per mitjans sols poden afegir una quantitat significativa d'estils nous a un document CSS i fer-ho encara més difícil de treballar. Aquí és on els comentaris de CSS poden esdevenir una ajuda inestimable en un lloc web.
Afegir comentaris als fitxers CSS d'un lloc web és una bona manera d'afegir estructura a les seccions d'aquest codi per a un lector humà que està revisant el document. També és un meravellós mètode per explicar aquests estils per a un professional web que potser hagi de treballar en el futur en el futur, inclòs vostè mateix!
Al final, els comentaris CSS intel·ligents afegits faran que el full d'estil sigui més fàcil de processar. Això és, de fet, important per als fulls d'estil que seran editats pels equips. Els comentaris es poden utilitzar per comunicar aspectes importants del full d'estils a diferents membres de l'equip que potser ja no estiguin familiaritzats amb el codi. Aquests comentaris també poden ser molt útils per a les persones que han treballat al lloc anteriorment si tornen al codi després d'estar allunyat d'ell durant algun temps. Sovint he hagut d'editar un lloc web que he dut a terme fa mesos o fins i tot fa anys i tenir comentaris ben formats en HTML i CSS és una ajuda molt benvinguda. Recordeu, només perquè vau crear un lloc no significa que recordareu per què vau fer les coses que vau fer al tornar a aquest lloc en el futur. Els comentaris poden fer que les vostres intencions siguin clares i aclarir qualsevol malentès abans que això passi.
Una cosa per entendre sobre els comentaris de CSS és que no es mostren quan la pàgina es fa als navegadors web. Aquests comentaris són només informatius, com els comentaris HTML (encara que la sintaxi és diferent entre els dos). Aquests comentaris de CSS no afecten de cap manera la visualització visual d'un lloc i simplement estan presents al codi en si.
Afegir comentaris CSS
Afegir un comentari CSS és bastant fàcil. Simplement envieu el vostre comentari amb les etiquetes de comentaris i obertura correctes:
- Comença el teu comentari afegint / *
- Tanqueu el vostre comentari afegint * /
Qualsevol cosa que aparegui entre aquestes dues etiquetes serà el contingut del comentari, només visible al codi i no representat pel navegador.
Un comentari CSS pot ser una sola línia, o pot ocupar diverses línies. Aquí teniu un exemple de línia única:
div # border_red {border: thin solid red; } / * exemple de vora vermella * /I un exemple multilínea:
/ *************************** ********************** ****** Estil per a text de codi **************************** ************ *************** /Sortint seccions
Una de les maneres en què sovint faig servir els comentaris de CSS és organitzar el meu full d'estils en trossos més petits, més fàcilment desxifrables. M'agrada poder veure fàcilment aquestes seccions quan vaig veure el fitxer més tard. Per fer-ho, sovint afegeixo comentaris amb molts guions, de manera que proporcionen pauses grans i evidents a la pàgina que són fàcils de veure, ja que trobo el codi ràpidament. Aquí teniu un exemple:
/ * ----------------------- Estils de capçalera ----------------------- ------- * /Quan veig un d'aquests comentaris al meu codi, sé que és l'inici d'una nova secció d'aquest document, que em permet processar i utilitzar el codi de manera més senzilla.
& # 34; Comenta fora de & # 34; Codi
Les etiquetes de comentaris també poden ser útils en el procés real de codificar i depurar una pàgina. Els comentaris es poden utilitzar per "comentar" o "desactivar" àrees d'aquest codi per veure què passa si aquesta secció no forma part de la pàgina.
Llavors, com funciona això? Bé, perquè les etiquetes de comentaris indiquen que el navegador ignora tot el que hi ha entre ells, podeu utilitzar-los per desactivar temporalment determinades parts del codi CSS. Això pot ser útil quan es depura, o quan s'ajusta el format de la pàgina web.
Per fer-ho, simplement haureu d'afegir l'etiqueta d'obertura de comentaris on voleu que el codi comenci a desactivar-se i, a continuació, col·loqueu l'etiqueta final en la qual voleu que finalitzi la part desactivada. Tot entre aquestes etiquetes no afectarà la visualització visual d'un lloc, cosa que us permetrà depurar el CSS per veure on pot haver-hi un problema. A continuació, podeu entrar i solucionar el problema i eliminar els comentaris del codi.
Consells de comentaris CSS
Com a resum, heus aquí alguns consells per recordar per usar comentaris al vostre CSS:
- Els comentaris poden abastar diverses línies.
- Els comentaris poden incloure elements CSS que no voleu que un navegador faci, però no voleu suprimir completament. Aquesta és una bona manera de depurar els fulls d'estil d'un lloc web: simplement assegureu-vos de treure els estils no utilitzats (a diferència de deixar-los comentats) si decidiu que no els necessiteu al lloc web
- Utilitzeu els comentaris cada vegada que escriviu CSS complicat per afegir aclariments i per informar els futurs desenvolupadors, o vosaltres mateixos en el futur, sobre coses importants que han de conèixer. Això estalviarà temps de desenvolupament futur per a tots els implicats.
- Els comentaris també poden incloure informació meta com:
- autor
- data creada
- informació sobre drets d'autor
Rendiment
Els comentaris poden ser útils, però tingueu en compte que com més comentari afegiu a un full d'estils, el més important serà el que afectarà la velocitat de baixada i el rendiment d'un lloc. Aquesta és una preocupació real, però no dubti a afegir comentaris legítims i útils per temor a que el rendiment es vegi afectat. Les línies de CSS no afegeixen una mida substancial a un document. Hauríeu d'afegir TONS de línies de comentaris per tenir un impacte significatiu en la mida del fitxer CSS. Si afegiu un grapat de comentaris útils al vostre CSS, no hauria de tenir un efecte negatiu net a la velocitat de la pàgina.
Al final, voldreu trobar l'equilibri entre comentaris útils i massa comentaris per obtenir els beneficis de tots dos en els vostres documents CSS.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 17/07/17