CSS Kommentare: Wie wir Kommentare in CSS einfügen
Wie du in CSS Kommentare einfügen kannst, wie diese in den anderen Web-Sprachen funktionieren und warum sie Sinn machen.Tags: .css-Datei | CSS lernen | CSS-Befehle | CSS-Selektoren | HTML lernen | Kommentare | PHP lernen | Programmieren lernen | Visual Studio Code | Web-Development lernen | Webseiten erstellen lernenWorum geht´s?
In diesem kurzen Tutorial werden wir uns ansehen, wie wir in CSS Kommentare einfügen können, und wofür Kommentare in CSS nützlich sein können.
1. Was ist ein CSS Kommentar?
Ein Kommentar in Programmiersprachen ist ein – meist kurzer – Textabschnitt, der nicht zum eigentlichen Programm gehört.
Er dient im Regelfall 3 Zwecken:
- Beschreibung, was im Programm an dieser Stelle geschieht
- Gliederung/Strukturierung des Programms in Abschnitte
- Finden von Fehlern durch Auskommentieren
2. Wie wir in CSS Kommentare einfügen können
In CSS gibt es – wie in den meisten Programmiersprachen – zwei Möglichkeiten von Kommentaren:
- Zeilenweise Kommentare mit //
- Längere Kommentare mit /* ALLES HIER IST EIN KOMMENTAR */
2.1 Zeilenweise Kommentare in CSS
Der Zeilenweise Kommentar ist – wenn man es ganz genau nimmt – in CSS eigentlich nicht so wirklich erlaubt, weswegen er in den meisten IDEs wie Visual Studio Code als Fehler angezeigt wird.
Aber interessanterweise funktioniert er trotzdem: Die jeweilige Zeile wird ignoriert.
2.2 Mehrzeilige Kommentare in CSS
Das kann nützlich sein, wenn man nur kurz mal eine Zeile auskommentieren will.
Die korrekte Methode ist jedoch die mit /* am Anfang und */ am Ende. Diese kann auch über mehrere Zeilen gehen.
3. Kommentare in PHP, JavaScript und HTML
Wo wir schon bei den Kommentaren sind, hier noch kurz, wie sie auch in den anderen Web-Sprachen funktionieren:
3.1 Kommentare in PHP einfügen
In PHP funktionieren Kommentare genau gleich wie in CSS:
- Zeilenweise Kommentare mit //
- Längere Kommentare mit /* ALLES HIER IST EIN KOMMENTAR */
Allerdings funktionieren die zeilenweisen Kommentare auch wirklich, und werden von der IDE nicht als Fehler gezählt.
3.2 Kommentare in JavaScript einfügen
Auch in JavaScript funktionieren Kommentare wieder ähnlich wie in CSS:
- Zeilenweise Kommentare mit //
- Längere Kommentare mit /* ALLES HIER IST EIN KOMMENTAR */
Und auch hier funktionieren zeilenweise Kommentare ohne Probleme.
3.3 Kommentare in HTML einfügen
HTML ist bei Kommentaren ein wenig eigenwillig, weil es einen Sonderweg geht.
Dort gibt es nur mehrzeilige Kommentare (die natürlich auch nur 1 Zeile haben können).
Diese funktionieren so:
- <!– ALLES HIER IST EIN KOMMENTAR –>
Wie du sehen kannst, funktionieren Kommentare in den meisten Programmiersprachen sehr ähnlich.
4. Warum auch in CSS Kommentare Sinn machen
In deinem CSS-Code wirst du wahrscheinlich auch nach einer Weile noch wissen, was dein CSS-Code da so macht, und auch debuggen (= Fehler suchen) wirst du wohl eher weniger, in dem du CSS-Selektoren oder CSS-Befehle auskommentierst.
Was dir aber langfristig sehr viel Zeit ersparen kann, ist eine Grundstruktur deiner .css-Datei mit Hilfe von CSS-Kommentaren.
So kannst du z.B. alle CSS-Selektoren, die mit dem Menü zu tun haben, unter eine entsprechende Kommentar-Überschrift packen, und alles, was mit dem Footer zu tun hat, unter die nächste.
Wenn deine .css-Datei mal 10.000 Zeilen oder mehr hat, wirst du über die zusätzliche Strukturierung immer wieder mal froh sein.