Jede Website besteht aus strukturellen, funktionalen und stilistischen Elementen. Cascading Style Sheets bestimmen das Erscheinungsbild (das "Look and Feel") einer Website. Diese Stile werden von der HTML-Struktur getrennt gehalten, um eine einfache Aktualisierung und Einhaltung von Webstandards zu ermöglichen.
Das Problem mit Stylesheets
Bei der Größe und Komplexität vieler Websites können Stylesheets ziemlich langwierig und umständlich werden. Dieses Problem hat an Komplexität zugenommen, da Medien-Anfragen zum Responsive Website-Stile sind ein wesentlicher Bestandteil des Designs, um sicherzustellen, dass eine Website unabhängig vom Gerät so aussieht, wie sie sollte. Allein diese Medienabfragen können einem CSS-Dokument eine beträchtliche Anzahl neuer Stile hinzufügen, was die Arbeit noch schwieriger macht. CSS-Kommentare können bei der Bewältigung dieser Komplexität eine unschätzbare Hilfe für Website-Designer und -Entwickler sein.
Kommentare fügen Struktur und Klarheit hinzu
Durch das Hinzufügen von Kommentaren zu den CSS-Dateien einer Website werden Abschnitte dieses Codes für einen menschlichen Leser organisiert, der das Dokument überprüft. Es gewährleistet auch Konsistenz, wenn ein Webprofi dort weitermacht, wo ein anderer aufhört oder wenn Teams von Personen an einer Website arbeiten.
Gut formatierte Kommentare vermitteln Mitgliedern eines Teams, die mit dem Code möglicherweise nicht vertraut sind, wichtige Aspekte des Stylesheets. Diese Kommentare sind auch hilfreich für Leute, die bereits an der Site gearbeitet haben, aber nicht in letzter Zeit; Webdesigner arbeiten normalerweise auf vielen Websites, und es ist schwierig, sich Designstrategien von einer zur nächsten zu merken.
Nur für die Augen von Profis
CSS-Kommentare werden nicht angezeigt, wenn die Seite gerendert wird Internetbrowser. Diese Kommentare dienen nur zur Information, genauso wie HTML-Kommentare sind (obwohl die Syntax anders ist). Diese CSS-Kommentare wirken sich in keiner Weise auf die visuelle Darstellung einer Site aus.
CSS-Kommentare hinzufügen
Das Hinzufügen eines CSS-Kommentars ist recht einfach. Buchen Sie Ihren Kommentar mit den richtigen öffnenden und schließenden Kommentar-Tags:
Beginnen Sie Ihren Kommentar mit dem Hinzufügen /* und schließe es mit */.
Alles, was zwischen diesen beiden Tags erscheint, ist der Inhalt des Kommentars, der nur im Code sichtbar ist und nicht vom Browser gerendert wird.
Ein CSS-Kommentar kann beliebig viele Zeilen umfassen. Hier zwei Beispiele:
/* Beispiel mit rotem Rand */
div#border_red {
Rand: dünn einfarbig rot;
}
/***************************
****************************
Stil für Codetext
****************************
***************************/
Abschnitte ausbrechen
Viele Designer organisieren Stylesheets in kleinen, leicht verdaulichen Blöcken, die beim Lesen leicht zu scannen sind. Normalerweise werden Kommentare vor und nach einer Reihe von Bindestrichen angezeigt, die große, offensichtliche Umbrüche auf der Seite erzeugen, die leicht zu erkennen sind. Hier ist ein Beispiel:
/* Kopfzeilenstile */
Diese Kommentare geben den Beginn eines neuen Abschnitts der Codierung an.
Kommentarcode
Da die Kommentar-Tags den Browser anweisen, alles dazwischen zu ignorieren, können Sie sie verwenden, um bestimmte Teile des CSS-Codes vorübergehend zu deaktivieren. Dieser Trick kann beim Debuggen oder beim Anpassen der Webseitenformatierung praktisch sein. Tatsächlich verwenden Designer sie oft, um Codebereiche zu "auskommentieren" oder "auszuschalten", um zu sehen, was passiert, wenn dieser Abschnitt nicht Teil der Seite ist.
Fügen Sie das öffnende Kommentar-Tag vor dem Code hinzu, den Sie auskommentieren möchten (deaktivieren); Platzieren Sie das schließende Tag dort, wo der deaktivierte Teil enden soll. Nichts zwischen diesen Tags beeinflusst die visuelle Darstellung einer Site und hilft Ihnen, das CSS zu debuggen, um zu sehen, wo ein Problem auftritt. Sie können dann hineingehen und genau diesen Fehler beheben und dann die Kommentare aus dem Code entfernen.
CSS-Kommentartipps
Viele Programmierer fügen Kommentarblöcke am Anfang jeder neuen Datei mit Code hinzu. Ihme diese Strategie nach, indem du einen Kommentarblock mit deinem Namen, relevanten Daten und verwandten Informationen einfügst, um dir zu helfen Menschen verstehen den Kontext eines Projekts und nicht nur Entscheidungen darüber, was in Bezug auf einen bestimmten Code passiert Block.