Tutorial: Übersicht im CSS Code behalten
Das Problem
Jeder CSS Coder kennt das, man codet und codet und irgendwann möchte man
etwas ändern. Doch was ist nun? Man findet den zuständigen Teil im CSS nicht
mehr wieder. Man sucht und sucht, aber der Code ist einfach
zu lang.
Die Lösung
Die Lösung für dieses Problem besteht aus vielen Teilen. Es geht darum den
Code anders zu schreiben, einige Dinge hinzuzufügen und so die
Übersicht
über ihn zurück zu erlangen.
Schritt 1: Texteditoren
Als ersten Weg aus dem Chaos, solltest du deinen Code nicht in der kleinen
Textbox bearbeitet, sondern ihn in einen
Texteditor kopieren, dieser arbeitet
mit einem großen Textfeld, welches dir eine deutliche Übersichtverbesserung
verschafft.
Du kannst jeden Editor verwenden den du willst, am besten geht es aber mit
einer Umgebung die Extra zur Entwicklung gemacht wurde, zum Beispiel
Net-
Beans. Für den Anfang reicht aber auch
WordPad oder der ganz normale Edi-
tor.
Schritt 2: Das Einrücken
Jetzt kommt ein sehr großer Schritt, das
Einrücken des Codes. Was ist das?
Ganz einfach, beim einrücken werden Teile vom Code nach rechts verscho-
ben, dadurch sieht man deutlich was zu was gehört. Einrücken tut man mit
der
Tabulatortaste, diese ist oben links auf der Tastatur, es befinden sich 2
Pfeile darauf.
Doch wie sollte man einrücken? Ich zeige euch einmal ein Bild eines einge-
rückten und eines nicht eingerückten Textes, dadurch wird der Unterschied
deutlicher.
1.
CSS Code ohne einrücken
2.
CSS Code mit einrücken
Was habe ich gemacht? Zuerst habe ich den Code in
Zeilen aufgeteilt. Ich
jede Option in eine neue Zeile gesetzt. Dann habe ich mit dem Cursor vor
eine Zeile geklickt und die
Tabulatortaste gedrückt, dadurch wird der Text
eingerückt.
Schritt 3: Kommentieren des Codes
Der vorletzte Schritt ist das
Kommentieren des Codes. Was heißt das? Das
heißt dem Code kleine Beschreibungen hinzuzufügen. Somit erspart man sich
suchen, da man nach dem Element nur in den Überschriften suchen muss.
Kommentare in CSS fangen mit diesem Zeichen an
/* und hören mit
*/ auf, da-
zwischen steht das Kommentar.
Ein Kommentar ist also sehr
simpel aufgebaut, also ist es auch einfach einige
zu deinem Code hinzuzufügen. Mein Beispielcode könnte mit Kommentaren
etwa so aussehen:
CSS Code mit Kommmentaren
Ich habe also /* und */ genommen und mein Kommentar dazwischen gesetzt.
Der Browser wird die Kommentare nicht auf der Seite anzeigen, sie helfen dir
aber dich in deinem Code zurechtzufinden.
Schritt 4: Im Baukasten einfügen
Jetzt wo wir den Code im Editor fertig haben, wollen wir ihn ja auch auf der
Seite. Also kopieren wir ihn im Editor und fügen ihn einfach im
Baukasten
ein. Die Werte kann man auch sehr gut direkt im Baukasten verändern, da
man sich nun zurecht findet.
Weitere Möglichkeiten
Es gibt noch viele weitere Möglichkeiten Code zu formatieren. Zum Beispiel
mehrzeilige Kommentare oder mehr Tabulatoren/Zeilen. Ich möchte euch nur
einmal den Endcode im Vergleich mit dem Anfangscode zeigen:
1.
CSS Code ohne Formatierung
2.
CSS Code mit Formatierung
Viel besser, oder nicht?
Ich hoffe ich konnte euch ein bisschen helfen.
Gruß,
Frederike
