Sauberes Coding
Typ: Sonstiges
Stufe:Einfach Mittelmäßig
Nichts ist beim Coden einer Website schlimmer als ein unsauber geschriebener Quelltext, in dem nachher nicht einmal mehr der Autor selber mehr durchblickt und der zudem häufig zu Darstellungsfehlern in einigen Browsern führt (es soll ja noch solche Browser geben, die nicht jeden Müll an Code irgendwie schlucken und verwurschteln... +g+).
Dabei ist es nicht schwer, seinen Code übersichtlich zu halten:
Absätze und Einrücken
Lege sinnvolle Absätze an, die den Code gliedern. Zudem solltest du Zeilen einrücken, um etwa verschachtelte Tags oder Tabellen klar strukturiert darzustellen:
<html>
<head>
...
</head>
<body>
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
</body>
</html>
Besser als
a { background-color:#666666; color:#cccccc; font-size:12px; font-family:tahoma,arial,verdana,herlvetica,sans-serif; }
liest sich folgende Schreibweise:
a {
background-color:#666666;
color:#cccccc;
font-size:12px;
font-family:tahoma,sans-serif;
}
Kommentieren
Du kannst deinen Quellcode mit Kommentaren versehen, die anmerken, worauf sich welcher Abschnitt des Codes überhaupt bezieht.
Diese Kommentare wirken sich nicht auf die Darstellung im Browser aus.
<!-- zwischen diese Zeichenfolge kommt dein Kommentar -->
Gruppieren
In Stylesheets - also den CSS-Anweisungen - empfiehlt es sich, die einzelnen Anweisungen logisch zu sortieren. Dadurch findet man sich nicht nur leichter im Code zurecht, sondern man vermeidet es so auch, Anweisungen doppelt aufzuführen.
Da Stylesheets vom Browser von oben nach unten abgearbeitet werden - darum heißen sie ja Cascading Style Sheets, kaskadieren bedeutet soviel wie "abfallen" - beginnt man am besten mit allgemeinen Anweisungen wie etwa dem Body und geht dann nach und nach auf die Einzelfälle ein. IDs würde ich zum Beispiel ganz an den Schluss stellen.
body { ... }
h1 { ... }
h2 { ... }
a { ... }
.navi { ... }
.navi a { ... }
#counter { ... }
5 Kommentare
Delite
ich denke das ist hauptsächlich wichtig, wenn man Lays zum download anbietet ^^