Ein Leitfaden zum Schreiben flexibler, stabiler und qualitativ hochwertiger HTML- und CSS-Codestandards

Die goldene Regel
Befolgen Sie immer die gleichen Codierstandards. Unabhängig davon, wie viele Personen am selben Projekt beteiligt sind, stellen Sie sicher, dass jede Codezeile so aussieht, als wäre sie von derselben Person geschrieben worden.

1. Grammatik:
1. Verwenden Sie zwei Leerzeichen anstelle von Tabulatoren.
2. Verschachtelte Elemente sollten einmal eingerückt werden (zwei Leerzeichen);
3. Achten Sie bei der Definition von Attributen darauf, doppelte Anführungszeichen zu verwenden und verwenden Sie niemals einfache Anführungszeichen.
4. Fügen Sie am Ende selbstschließender Elemente keinen Schrägstrich hinzu – in der HTML5-Spezifikation (https://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag) wird eindeutig darauf hingewiesen, dass dies optional ist.
5. Lassen Sie das optionale End-Tag nicht weg;
6. Fügen Sie der ersten Zeile jeder HTML-Seite eine Standardmodusdeklaration hinzu, um sicherzustellen, dass sie in jedem Browser angezeigt wird.

2. Sprachattribute:
Gemäß der HTML5-Spezifikation wird empfohlen, das Attribut „lang“ für das HTML-Stammelement anzugeben, um die richtige Sprache für den Text festzulegen. Auf diese Weise können Sprachsynthesetools die zu verwendende Aussprache bestimmen, Übersetzungstools die zu befolgenden Regeln beim Übersetzen usw. Liste der Attribute „lang“: http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/

3. IE-Kompatibilitätsmodus:
Der IE unterstützt bestimmte Tags, um die IE-Version zu bestimmen, die zum Anzeigen der aktuellen Seite verwendet werden soll. Sofern keine strengen Anforderungen bestehen, ist es am besten, den Edge-Modus einzustellen, um den IE zu zwingen, den neuesten unterstützten Modus zu verwenden.

4. Zeichenkodierung:
Durch die Angabe der Zeichenkodierung können Sie sicherstellen, dass der Browser schnell und einfach feststellen kann, wie der Seiteninhalt gerendert werden soll. Dadurch wird die Verwendung von Zeichen-Entity-Tags in HTML vermieden, sodass alles mit der Dokumentkodierung übereinstimmt.

5. CSS- und JavaScript-Dateien importieren:
Gemäß der HTML5-Spezifikation müssen Sie beim Importieren von CSS- und JavaScript-Dateien das Typattribut im Allgemeinen nicht angeben, da text/css bzw. text/javascript ihre Standardwerte sind.

6. Zweckmäßigkeit ist Trumpf:
Versuchen Sie, HTML-Standards und -Semantik einzuhalten, ohne dabei die Benutzerfreundlichkeit zu beeinträchtigen. Verwenden Sie immer so wenige Tags wie möglich und halten Sie die Komplexität auf ein Minimum.

7. Attributreihenfolge:
Um die Lesbarkeit des Codes sicherzustellen, sollten HTML-Attribute in der folgenden Reihenfolge angeordnet werden:
1.Klasse
2.ID,Name
3.Daten-*
4.src, für, Typ, href
5.title,alt
6.Aria, Rolle
Die Klasse wird verwendet, um Komponenten zu kennzeichnen, die leicht wiederverwendbar sind, und sollte deshalb an erster Stelle stehen.

8. Reduzieren Sie die Anzahl der Tags <br />Versuchen Sie beim Schreiben von HTML-Code, redundante übergeordnete Elemente zu vermeiden. Dies erfordert häufig Iterationen und Refactoring.

9. Von JavaScript generierte Tags <br /> Von JavaScript generierte Tags erschweren das Auffinden und Bearbeiten von Inhalten und beeinträchtigen die Leistung. Versuchen Sie, sie nach Möglichkeit zu vermeiden.

10. CSS-Syntax:
1. Verwenden Sie zwei Leerzeichen anstelle von Tabulatoren.
2. Platzieren Sie beim Gruppieren von Selektoren jeden Selektor in einer eigenen Zeile.
3. Fügen Sie zur besseren Lesbarkeit des Codes vor der linken geschweiften Klammer jedes Deklarationsblocks ein Leerzeichen ein.
4. Die schließende geschweifte Klammer des Deklarationsblocks sollte in einer separaten Zeile stehen.
5. Nach jeder Deklarationsangabe ist ein Leerzeichen einzufügen:
6. Um genauere Fehlerberichte zu erhalten, sollte jede Anweisung in einer eigenen Zeile stehen.
7. Alle Deklarationsanweisungen sollten mit einem Semikolon enden. Das Semikolon nach der letzten Deklarationsanweisung ist optional, aber wenn es weggelassen wird, kann der Code leichter gedruckt werden.
8. Bei durch Kommas getrennten Attributwerten sollte nach jedem Komma ein Leerzeichen eingefügt werden;
9. Bei Attributwerten oder Farbparametern ist bei Dezimalstellen kleiner als 1 die führende Null wegzulassen (zB .5 statt 0,5);
10. Hexadezimalwerte sollten alle in Kleinbuchstaben geschrieben sein, zum Beispiel: #fff. Versuchen Sie, abgekürzte Hexadezimalwerte zu verwenden, verwenden Sie zum Beispiel #fff statt #ffffff.
11. Fügen Sie den ausgewählten Attributen doppelte Anführungszeichen hinzu, zum Beispiel input[type="text"];
12. Vermeiden Sie die Angabe von Einheiten für Nullwerte. Verwenden Sie beispielsweise margin:0 statt margin:0px.

11. Erklärungsauftrag:

Zusammengehörende Eigenschaftsdeklarationen sollten gruppiert und in der folgenden Reihenfolge angeordnet werden:

1.Positionierung (Position: absolut; oben: 0; unten: 0; rechts: 0; links: 0; Z-Index: 100;);
2.Boxmodell (Anzeige: Block; Float: links; Breite: 100px; Höhe: 100px;);
3.typografisch (Schriftart: normal 13px „Microsoft YaHei“; Zeilenhöhe: 1,5em; Farbe: #333; Textausrichtung: zentriert;);
4.visual(Hintergrund: gelb; Rahmen: 1px durchgezogen #c00; Rahmenradius: 3px; Deckkraft: 1;);

Die Positionierung steht an erster Stelle, da sie Elemente aus dem normalen Dokumentfluss entfernt und Stile überschreiben kann, die mit dem Boxmodell in Zusammenhang stehen. Das Boxmodell kommt an zweiter Stelle, da es die Größe und Position von Komponenten bestimmt. Andere Eigenschaften wirken sich nur auf das Innere von Komponenten aus oder haben keinen Einfluss auf die ersten beiden Eigenschaftengruppen, daher kommen sie später.

12. Verwenden Sie kein @import
Im Vergleich zu Tags ist die @import-Direktive viel langsamer und fügt nicht nur zusätzliche Anfragen hinzu, sondern verursacht auch unerwartete Probleme. Es gibt mehrere Alternativen:
1. Verwenden Sie mehrere Elemente;
2. Verwenden Sie Sass- oder Less-ähnliche CSS-Präprozessoren, um mehrere CSS-Dateien in eine Datei zu konvertieren.
3. Stellen Sie eine Funktion zum Zusammenführen von CSS-Dateien über Rails, Jekyll oder andere Systeme bereit.

13. Speicherort der Medienabfrage
Platzieren Sie Medienabfragen so nah wie möglich an verwandten Regeln. Bündeln Sie sie nicht in einem einzigen Stylesheet und platzieren Sie sie nicht am Ende des Dokuments.

14. Attribute mit Präfixen:
Wenn Sie herstellerspezifische Präfixattribute verwenden, sperren Sie die Werte jedes Attributs, um sie vertikal auszurichten. Dies erleichtert die Bearbeitung mehrerer Zeilen. Beispiel:

15. Erklärung der einzelnen Regeln:
Bei Stilen, die eine einzelne Deklaration enthalten, empfiehlt es sich, die Anweisung aus Gründen der Lesbarkeit und schnellen Bearbeitung in dieselbe Zeile zu setzen. Bei Stilen mit mehreren Deklarationen sollten Sie die Deklarationen dennoch auf mehrere Zeilen aufteilen. Der Schlüsselfaktor dabei ist die Fehlererkennung. Beispielsweise weist der CSS-Validator in Zeile 180 einen Syntaxfehler auf. Wenn es sich um eine einzelne Zeile und eine einzelne Deklaration handelt, können Sie diesen Fehler nicht ignorieren. Wenn es sich um eine einzelne Zeile und mehrere Deklarationen handelt, müssen Sie ihn sorgfältig analysieren, um den Fehler nicht zu übersehen.

16. Verschachtelung in Less und Sass <br /> Vermeiden Sie unnötige Verschachtelungen. Denn obwohl Sie Verschachtelungen verwenden können, heißt das nicht, dass Sie sie verwenden sollten. Verschachtelungen können nur verwendet werden, wenn der Stil auf das übergeordnete Element (also den Nachkommenselektor) beschränkt sein muss und mehrere Elemente verschachtelt werden müssen.

17. Hinweise:
Code wird von Menschen geschrieben und gepflegt. Stellen Sie sicher, dass Ihr Code selbsterklärend, gut kommentiert und für andere leicht verständlich ist. Gute Codekommentare vermitteln Kontext und Zweck des Codes;
Wiederholen Sie nicht einfach Komponenten- oder Klassennamen.
Achten Sie bei längeren Kommentaren darauf, vollständige Sätze zu schreiben, bei allgemeinen Kommentaren können Sie prägnante Sätze verfassen.

18. Klassenbenennung
In Klassennamen dürfen nur Kommas und Bindestriche vorkommen (keine Unterstriche oder CamelCase). Bindestriche sollten in Namen verwandter Klassen verwendet werden (ähnlich wie bei Namespaces wie .btn und .btn-danger).
Vermeiden Sie allzu willkürliche Abkürzungen. .btn steht für Button, aber .s bedeutet nichts;
Klassennamen sollten möglichst kurz sein und eine klare Bedeutung haben.
Verwenden Sie aussagekräftige Namen, verwenden Sie organisatorische oder zweckgebundene Namen, keine ausdrucksstarken Namen;
Verwenden Sie die nächstgelegene Klasse oder Basisklasse als Präfix für die neue Klasse.
Verwenden Sie .js-*-Klassen, um Verhalten zu identifizieren (im Gegensatz zum Stil), und schließen Sie diese Klassen nicht in Ihre CSS-Dateien ein.
Auch bei der Benennung von Sass- und Less-Variablen können Sie sich an den oben genannten Vorgaben orientieren.

19. Selektor <br />Verwenden Sie Klassen für gemeinsame Elemente, um die Rendering-Leistung zu optimieren.
Vermeiden Sie die Verwendung von Attributselektoren (z. B. [class^="···"]) für häufig vorkommende Komponenten, da diese Faktoren die Browserleistung beeinträchtigen.
Der Selektor sollte so kurz wie möglich sein und die Anzahl der Elemente, aus denen der Selektor besteht, sollte auf höchstens 3 begrenzt sein.
Beschränken Sie eine Klasse nur bei Bedarf auf ihr unmittelbar übergeordnetes Element.

20. Code-Organisation:
Organisieren Sie Codesegmente nach Komponenten.
Geben Sie konsistente Anmerkungskonventionen an.
Verwenden Sie durchgängig Leerzeichen, um den Code in Blöcke zu unterteilen. Dadurch lassen sich größere Dokumente leichter scannen.
Wenn Sie mehrere CSS-Dateien verwenden, teilen Sie diese nach Komponenten statt nach Seiten auf, da Seiten neu organisiert und Komponenten nur verschoben werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird Ihnen helfen, standardisierten, flexiblen, stabilen und qualitativ hochwertigen HTML- und CSS-Code zu schreiben.

Originaltext: http://www.cnblogs.com/codinganytime/p/5258223.html