CSS Kommentar: Eine Schnellübersicht für 2020

Ein CSS Kommentar wird meist genutzt um Klassen, IDs und anderen CSS-Code zu betiteln oder deren Funktionsweise näher zu beschreiben.
Dabei werden Code und Text innerhalb eines Kommentars nicht ausgeführt.
Deshalb nutzt man Kommentare auch oft um bestimmte Zeilen des Codes temporär zu deaktivieren.

Alle CSS-Kommentare müssen dabei mit /* beginnen und müssen mit */ enden. Das gilt sowohl für einzeilige als auch mehrzeilige Kommentare.

1. Einzeiliger CSS Kommentar

Der einzeilige Kommentar stellt dabei die einfachste Variante dar.
Dieser eignet sich perfekt um Klassen und ID‘s zu betiteln.

/* Für alle Call-To-Actions Buttons auf der Startseite */
.button-primary {
  color: red;
}
	
/* IE - Internet Explorer 7 catch*/
#p {
  font-size: 14px\0/;
}

Wie du siehst, haben wir in diesem Fall den Zweck unserer Klasse button-primary näher beschrieben.
Ebenso haben wir die Schriftgröße aller unserer paragraph Tags auf 14 Pixel gesetzt. Da dieser aber nur für den Internet Explorer 7 greifen soll, haben wir es extra nochmal beschrieben um den Code später mal für andere (und für dich selbst) verständlicher zu machen.

2. Mehrzeiliger CSS Kommentar

Der mehrzeilige Kommentar hat zwar die gleiche Syntax wie der einzeilige, kann aber vielfältiger genutzt werden.
Wir haben für dich die gängigsten Varianten vorbereitet.

2.1 Zweck des Stylesheets erläutern

Wenn du ein neues Stylesheet anfängst, ist es zu empfehlen direkt zu Beginn des Sheets den Namen und den Zweck zu manifestieren.
Dafür ist ein mehrzeiliger CSS Kommentar perfekt geeignet.

/*********************************/
/*          Produkt.css          */
/* Stylesheet für die Startseite */
/*********************************/

2.2 Inhaltsverzeichnis erstellen

Da du wahrscheinlich, wie wir alle, nach hunderten Zeilen schnell mal den Überblick verlierst, empfehlen wir ein Inhaltsverzeichnis zu erstellen.
Wo du die einzelnen Sektion deines Sheets untergliederst und ordnest.
Für alle Beteiligten ist es von Vorteil, wenn das Sheet ordentlich und sauber gehalten wird.

/********************************/
/*  Inhaltsverzeichnis
        1. Globale Einstellungen
		2. Fonts
		3. Farben
		4. Startseite
			4.1 Header
			4.2 Body
			4.3 Footer
				 */
/*********************************/

3. CSS Code auskommentieren

Jeder kennt den Moment, wenn irgendwas nicht so aussieht wie es aussehen soll. Anstatt jedes Mal die betreffenden Zeilen zu löschen und gegebenenfalls erneut wieder hinzuzufügen, kannst du diese auch einfach temporär auskommentieren.

/* Die erste Klasse wird auskommentiert und somit nicht ausgeführt */
/*p{
	font-size: 16px;
    color: red;
}*/

p{
	font-size: 16px;
	color: green;
}

4. Schnellübersicht

Hier nochmal die gängigsten Varianten für dich im Schnellüberblick.

/* Einfacher einzeiliger Kommentar */


/*
	Das ist
	ein mehrzeiliger
	Kommentar
*/


/*********************************/
/*	Home.css		 */
/* Stylesheet für die Startseite */
/*********************************/


/********************************/
/*	Inhaltsverzeichnis
		1. Globale Einstellungen
		2. Fonts
		3. Farben
		4. Startseite
			4.1 Header
			4.2 Body
			4.3 Footer
				 */
/*********************************/