Elke website is opgebouwd uit structurele, functionele en stilistische elementen. Trapsgewijze stijlbladen dicteren het uiterlijk (de "look and feel") van een website. Deze stijlen worden gescheiden gehouden van de HTML-structuur, zodat ze gemakkelijk kunnen worden bijgewerkt en aan webstandaarden kunnen worden nageleefd.
Het probleem met stylesheets
Met de omvang en complexiteit van veel websites van tegenwoordig, kunnen stylesheets behoorlijk lang en omslachtig worden. Dit probleem is complexer geworden nu: mediaquery's voor responsieve websitestijlen zijn een essentieel onderdeel van het ontwerp en zorgen ervoor dat een website eruitziet zoals het hoort, ongeacht het apparaat. Alleen al die mediaquery's kunnen een aanzienlijk aantal nieuwe stijlen aan een CSS-document toevoegen, waardoor het nog moeilijker wordt om mee te werken. Het beheren van deze complexiteit is waar CSS-opmerkingen een onschatbare hulp kunnen worden voor website-ontwerpers en -ontwikkelaars.
Opmerkingen Structuur en duidelijkheid toevoegen
Door opmerkingen aan de CSS-bestanden van een website toe te voegen, worden delen van die code geordend voor een menselijke lezer die het document beoordeelt. Het zorgt ook voor consistentie wanneer de ene webprofessional verder gaat waar de andere stopt, of wanneer teams van mensen aan een site werken.
Goed opgemaakte opmerkingen geven belangrijke aspecten van de stylesheet door aan teamleden die mogelijk niet bekend zijn met de code. Deze opmerkingen zijn ook nuttig voor mensen die eerder aan de site hebben gewerkt, maar niet recentelijk; webdesigners werken doorgaans op veel sites en het is moeilijk om ontwerpstrategieën van de ene naar de andere te onthouden.
Alleen voor professionele ogen
CSS-opmerkingen worden niet weergegeven wanneer de pagina wordt weergegeven in web browsers. Die opmerkingen zijn alleen informatief, net als: HTML-opmerkingen zijn (hoewel de syntaxis anders is). Deze CSS-opmerkingen hebben op geen enkele manier invloed op de visuele weergave van een site.
CSS-opmerkingen toevoegen
Het toevoegen van een CSS-opmerking is vrij eenvoudig. Boek uw commentaar met de juiste openings- en sluitingstags voor commentaar:
Begin je reactie door toe te voegen /* en sluit het af met */.
Alles wat tussen deze twee tags verschijnt, is de inhoud van de opmerking, alleen zichtbaar in de code en niet weergegeven door de browser.
Een CSS-opmerking kan een willekeurig aantal regels in beslag nemen. Hier zijn twee voorbeelden:
/* voorbeeld rode rand */
div#border_rood {
rand: dun effen rood;
}
/***************************
****************************
Stijl voor codetekst
****************************
***************************/
Secties uitbreken
Veel ontwerpers organiseren stylesheets in kleine, gemakkelijk verteerbare brokken die gemakkelijk te scannen zijn tijdens het lezen. Meestal ziet u opmerkingen voorafgegaan en gevolgd door een reeks koppeltekens die grote, voor de hand liggende onderbrekingen op de pagina creëren die gemakkelijk te zien zijn. Hier is een voorbeeld:
/* Kopstijlen */
Deze opmerkingen duiden op het begin van een nieuwe sectie van codering.
Reactiecode
Omdat de commentaartags de browser vertellen om alles ertussen te negeren, kunt u ze gebruiken om bepaalde delen van CSS-code tijdelijk uit te schakelen. Deze truc kan handig zijn bij het debuggen of bij het aanpassen van de opmaak van webpagina's. In feite gebruiken ontwerpers ze vaak om "commentaar" of "uit te schakelen" codegebieden om te zien wat er gebeurt als dat gedeelte geen deel uitmaakt van de pagina.
Voeg de openingscommentaar-tag toe vóór de code die u wilt verwijderen (uitschakelen); plaats de afsluitende tag waar u het uitgeschakelde gedeelte wilt laten eindigen. Niets tussen deze tags heeft invloed op de visuele weergave van een site, waardoor u de CSS kunt debuggen om te zien waar een probleem zich voordoet. U kunt dan naar binnen gaan en alleen die storing oplossen en vervolgens de opmerkingen uit de code verwijderen.
Tips voor CSS-commentaar
Veel codeerders bevatten commentaarblokken bovenaan elk nieuw bestand met code. Boots die strategie na door een commentaarblok op te nemen met uw naam, relevante datums en gerelateerde informatie om te helpen mensen begrijpen de context van een project en niet alleen beslissingen over wat er gebeurt met betrekking tot een specifieke code blok.