HTML5+CSS3-Codierungsstandards

Die goldene Regel

Unabhängig davon, wie viele Personen an einem Projekt arbeiten, ist es wichtig sicherzustellen, dass jede Codezeile so aussieht, als wäre sie von derselben Person geschrieben worden.

Grammatik

1. Verwenden Sie zwei Leerzeichen anstelle von Tabulatoren – nur so ist eine konsistente Darstellung in allen Umgebungen gewährleistet.
2. Verschachtelte Elemente sollten einmal eingerückt werden (also zwei Leerzeichen).
3. Achten Sie bei Attributdefinitionen darauf, durchgängig doppelte Anführungszeichen zu verwenden und niemals einfache Anführungszeichen.
4. Fügen Sie selbstschließenden Elementen keinen abschließenden Schrägstrich hinzu – in der HTML5-Spezifikation wird ausdrücklich darauf hingewiesen, dass dies optional ist.
5. Lassen Sie das optionale schließende Tag nicht weg

<!DOCTYPE html>
<html>
  <Kopf>
    <title>Seitentitel</title>
  </Kopf>
  <Text>
    <img src="images/company-logo.png" alt="Unternehmen">
    <h1 class="hello-world">Hallo Welt!</h1>
  </body>
</html>

HTML5-Dokumenttyp

Durch das Hinzufügen einer Standardmodusdeklaration zur ersten Zeile jeder HTML-Seite wird eine konsistente Anzeige in jedem Browser sichergestellt.

<!DOCTYPE html>
<html>
  <Kopf>
  </Kopf>
</html>

Sprachattribute

Gemäß der HTML5-Spezifikation:
Es wird dringend empfohlen, das Attribut „lang“ im Stamm-HTML-Element anzugeben, um die richtige Sprache für das Dokument festzulegen. Auf diese Weise können Sprachsynthesetools die zu verwendende Aussprache bestimmen, Übersetzungstools können die beim Übersetzen zu befolgenden Regeln bestimmen usw.

<html lang="en-us">
  <!-- ... -->
</html>

IE-Kompatibilitätsmodus

IE unterstützt die Verwendung bestimmter Tags, um die IE-Version zu bestimmen, die zum Zeichnen der aktuellen Seite verwendet werden soll. Sofern kein besonderer Grund vorliegt, empfiehlt es sich, den Edge-Modus zu verwenden, um den IE anzuweisen, den neuesten unterstützten Modus zu verwenden.

<meta http-equiv="X-UA-kompatibel" content="IE=Edge">

Zeichenkodierung

Durch die explizite Angabe der Zeichenkodierung stellen Sie sicher, dass der Browser schnell und einfach ermitteln kann, wie der Seiteninhalt dargestellt werden soll. Dies hat den Vorteil, dass Sie die Verwendung von Zeichen-Entity-Tags in HTML vermeiden können, sodass alles mit der Dokumentcodierung (normalerweise UTF-8-Codierung) übereinstimmt.

<Kopf>
  <meta charset="UTF-8">
</Kopf>

Importieren von CSS- und JavaScript-Dateien

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“ deren Standardwerte sind.

<!-- Externes CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- CSS im Dokument -->
<Stil>
  /* … */
</Stil>

<!-- JavaScript -->
<script src="code-guide.js"></script>

Zweckmäßigkeit ist Trumpf

Versuchen Sie, HTML-Standards und -Semantik einzuhalten, jedoch nicht auf Kosten der Praktikabilität. Versuchen Sie immer, die geringstmögliche Anzahl Tags zu verwenden und die Komplexität auf ein Minimum zu beschränken.

Attributreihenfolge

Um die Lesbarkeit des Codes sicherzustellen, sollten HTML-Attribute in der unten angegebenen Reihenfolge angeordnet werden.

Klasse
ID, Name
Daten-*
src, für, Typ, href, Wert
Titel, Alt
Rolle, Arie-*

Die Klasse wird zur Identifizierung von Komponenten verwendet, die leicht wiederverwendbar sind, und sollte daher an erster Stelle stehen. Die ID wird zur Identifizierung einer bestimmten Komponente verwendet und sollte mit Vorsicht verwendet werden (z. B. ein Lesezeichen innerhalb einer Seite). Sie kommt daher an zweiter Stelle.

Boolesche Eigenschaften

Boolesche Eigenschaften können ohne Wert deklariert werden. Die XHTML-Spezifikation erfordert die Zuweisung eines Wertes, die HTML5-Spezifikation hingegen nicht.
Weitere Informationen finden Sie im WhatWG-Abschnitt zu Booleschen Attributen:
Ein boolesches Attribut eines Elements ist wahr, wenn es einen Wert hat, und falsch, wenn nicht.
Wenn Sie ihm einen Wert zuweisen müssen, beachten Sie bitte die WhatWG-Spezifikation:
Wenn das Attribut vorhanden ist, muss sein Wert entweder eine leere Zeichenfolge oder [...] der kanonische Name des Attributs sein, ohne führende oder nachfolgende Leerzeichen.
Einfach ausgedrückt ist es nicht erforderlich, einen Wert zuzuweisen.

Reduzieren Sie die Anzahl der Tags

Versuchen Sie beim Schreiben von HTML-Code redundante übergeordnete Elemente zu vermeiden. Um dies zu erreichen, sind oftmals Iterationen und Refactorings erforderlich. Bitte sehen Sie sich das folgende Beispiel an:

Nicht so toll
<span class="avatar">
  <img src="...">
</span>

<!-- Besser -->
<img class="avatar" src="...">

Von JavaScript generierte Tags

Über JavaScript generierte Tags erschweren das Auffinden und Bearbeiten von Inhalten und verlangsamen die Leistung. Vermeiden Sie es, wenn Sie können.

CSS-Syntax

1. Verwenden Sie zwei Leerzeichen anstelle von Tabulatoren – nur so ist eine konsistente Darstellung in allen Umgebungen gewährleistet.
2. Platzieren Sie beim Gruppieren von Selektoren jeden Selektor in einer eigenen Zeile.
3. Fügen Sie zur besseren Lesbarkeit des Codes vor der öffnenden geschweiften Klammer jedes Deklarationsblocks ein Leerzeichen ein.
4. Die schließende geschweifte Klammer eines Deklarationsblocks sollte in einer separaten Zeile stehen.
5. Nach jeder Deklarationsangabe ist ein Leerzeichen einzufügen:
6. Für eine genauere Fehlerberichterstattung sollte jede Anweisung in einer eigenen Zeile erscheinen.
7. Alle Deklarationsanweisungen sollten mit einem Semikolon enden. Das Semikolon nach der letzten Deklaration ist optional, Ihr Code kann jedoch fehleranfälliger sein, wenn Sie es weglassen.
8. Bei durch Komma getrennten Eigenschaftswerten sollte nach jedem Komma ein Leerzeichen eingefügt werden (Beispiel: box-shadow).
9. Fügen Sie in den Werten rgb(), rgba(), hsl(), hsla() oder rect() keine Leerzeichen nach Kommas ein. Dies hilft, mehrere Farbwerte (mit Kommas, ohne Leerzeichen) von mehreren Attributwerten (sowohl mit Kommas als auch mit Leerzeichen) zu unterscheiden.
10. Bei Attributwerten oder Farbparametern ist bei Dezimalstellen kleiner als 1 die führende Null wegzulassen (zum Beispiel .5 statt 0.5; -.5px statt -0.5px).
11/Hexadezimale Werte sollten alle klein geschrieben sein, zum Beispiel #fff. Beim Scannen von Dokumenten lassen sich Kleinbuchstaben leichter erkennen, da ihre Form leichter zu unterscheiden ist.
12. Versuchen Sie, abgekürzte Hexadezimalwerte zu verwenden, zum Beispiel #fff statt #ffffff.
13. Fügen Sie den Attributen in Selektoren doppelte Anführungszeichen hinzu, zum Beispiel input[type="text"]. Dies ist nur in bestimmten Fällen optional. Aus Konsistenzgründen wird in Ihrem Code jedoch empfohlen, immer doppelte Anführungszeichen zu verwenden.
14. Vermeiden Sie die Angabe von Einheiten für Nullwerte. Verwenden Sie beispielsweise „margin: 0;“ statt „margin: 0px;“.

/* Schlechtes CSS */
.selector, .selector-secondary, .selector[Typ=Text] {
  Polsterung: 15px;
  Rand: 0px 0px 15px;
  Hintergrundfarbe: rgba (0, 0, 0, 0,5);
  Boxschatten: 0px 1px 2px #CCC, Einschub 0 1px 0 #FFFFFF
}

/* Gutes CSS */
.Wähler,
.Selektor-Sekundär,
.selector[Typ="text"] {
  Polsterung: 15px;
  Rand unten: 15px;
  Hintergrundfarbe: rgba(0,0,0,.5);
  Boxschatten: 0 1px 2px #ccc, Einschub 0 1px 0 #fff;
}

Deklarationsauftrag

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

Positionierung
Boxmodell
Typografisch
Visuell

Die Positionierung steht an erster Stelle, da hierdurch Elemente aus dem normalen Dokumentfluss entfernt werden und auch mit dem Boxmodell verbundene Stile überschrieben werden können. An zweiter Stelle steht das Boxmodell, da es die Größe und Position der Komponenten bestimmt.
Die weiteren Eigenschaften wirken sich nur auf das Innere des Bauteils aus bzw. beeinflussen die ersten beiden Eigenschaftsgruppen nicht und werden deshalb ans Ende gestellt.

.Deklarationsreihenfolge {
  /* Positionierung */
  Position: absolut;
  oben: 0;
  rechts: 0;
  unten: 0;
  links: 0;
  Z-Index: 100;

  /* Box-Modell */
  Anzeige: Block;
  schweben: rechts;
  Breite: 100px;
  Höhe: 100px;

  /* Typografie */
  Schriftart: normal 13px „Helvetica Neue“, serifenlos;
  Zeilenhöhe: 1,5;
  Farbe: #333;
  Textausrichtung: zentriert;

  /* Visuell */
  Hintergrundfarbe: #f5f5f5;
  Rand: 1px durchgezogen #e5e5e5;
  Rahmenradius: 3px;

  /* Verschiedenes */
  Deckkraft: 1;
}

Verwenden Sie nicht @import

Im Vergleich zu Tags ist die @import-Direktive viel langsamer, was nicht nur die Anzahl zusätzlicher Anfragen erhöht, sondern auch unvorhersehbare Probleme verursacht. Es gibt mehrere Alternativen:

Mehrere Elemente verwenden

Kompilieren Sie mehrere CSS-Dateien mit einem CSS-Präprozessor wie Sass oder Less in eine Datei. Verwenden Sie Rails, Jekyll oder andere Systeme, die Funktionen zum Zusammenführen von CSS-Dateien bieten.

<!-- Linkelemente verwenden -->
<link rel="stylesheet" href="core.css">

<!-- @imports vermeiden -->
<Stil>
  @import url("mehr.css");
</Stil>

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. Wenn Sie sie trennen, geraten sie in Zukunft in Vergessenheit. Nachfolgend finden Sie ein typisches Beispiel.

.element { ... }
.element-avatar { ... }
.element-ausgewählt { ... }

@media (Mindestbreite: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-ausgewählt { ... }
}

Einzeilige Regeldeklaration

Bei Stilen, die nur eine Deklaration enthalten, wird empfohlen, die Anweisung aus Gründen der Lesbarkeit und schnellen Bearbeitung in einer einzigen Zeile zu platzieren. Bei Stilen mit mehreren Deklarationen sollten die Deklarationen dennoch auf mehrere Zeilen aufgeteilt werden.

Der Hauptgrund hierfür liegt in der Fehlererkennung. Beispielsweise weist der CSS-Validator auf einen Syntaxfehler in Zeile 183 hin. Wenn es sich um eine einzelne Anweisung in einer einzelnen Zeile handelt, können Sie den Fehler nicht ignorieren. Wenn es sich hingegen um mehrere Anweisungen in einer einzelnen Zeile handelt, müssen Sie diese sorgfältig analysieren, um zu vermeiden, dass Ihnen der Fehler entgeht.

/* Einzelne Deklarationen in einer Zeile */
.span1 { Breite: 60px; }
.span2 { Breite: 140px; }
.span3 { Breite: 220px; }

/* Mehrere Deklarationen, eine pro Zeile */
.sprite {
  Anzeige: Inline-Block;
  Breite: 16px;
  Höhe: 15px;
  Hintergrundbild: URL(../img/sprite.png);
}
.icon { Hintergrundposition: 0 0; }
.icon-home { Hintergrundposition: 0 -20px; }
.icon-account { Hintergrundposition: 0 -40px; }

Kurze Eigenschaftsdeklaration

In Situationen, in denen Sie alle Werte explizit festlegen müssen, sollten Sie die Verwendung von Kurzform-Eigenschaftsdeklarationen auf ein Minimum beschränken. Zu den häufigen Missbräuchen von abgekürzten Eigentumsdeklarationen gehören:

Polsterung
Marge
Schriftart
Hintergrund
Grenze
Randradius

In den meisten Fällen müssen wir nicht alle Werte für die Kurzeigenschaftendeklaration angeben. Beispielsweise muss das HTML-Überschriftenelement nur die oberen und unteren Randwerte festlegen. Überschreiben Sie diese beiden Werte also einfach, wenn nötig. Der übermäßige Gebrauch von abgekürzten Eigenschaftsdeklarationen kann zu unübersichtlichem Code führen und durch unnötiges Überschreiben von Eigenschaftswerten unerwartete Nebenwirkungen verursachen.

/* Schlechtes Beispiel */
.element {
  Rand: 0 0 10px;
  Hintergrund: rot;
  Hintergrund: URL("bild.jpg");
  Rahmenradius: 3px 3px 0 0;
}

/* Gutes Beispiel */
.element {
  Rand unten: 10px;
  Hintergrundfarbe: rot;
  Hintergrundbild: URL("bild.jpg");
  Rahmen oben links – Radius: 3px;
  Rahmen oben rechts – Radius: 3px;
}

Verschachtelung in Less und Sass

Vermeiden Sie unnötige Verschachtelungen. Denn nur weil Sie nisten können, heißt das nicht, dass Sie es auch tun sollten. Verwenden Sie die Verschachtelung nur, wenn Sie Stile auf das übergeordnete Element (auch als Nachkommenselektor bezeichnet) beschränken müssen und wenn mehrere Elemente verschachtelt werden müssen.

// Ohne Verschachtelung
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// Mit Verschachtelung
.table > thead > tr {
  > das { … }
  > td { … }
}

Operatoren in Less und Sass

Um die Lesbarkeit zu verbessern, fügen Sie in mathematischen Ausdrücken in Klammern ein Leerzeichen zwischen Werten, Variablen und Operatoren ein.

// Schlechtes Beispiel
.element {
  Rand: 10px 0 @variable*2 10px;
}

// Gutes Beispiel
.element {
  Rand: 10px 0 (@variable * 2) 10px;
}

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 den Kontext und Zweck des Codes. Wiederholen Sie nicht einfach Komponenten- oder Klassennamen.

Achten Sie bei längeren Kommentaren darauf, vollständige Sätze zu verfassen, bei allgemeinen Anmerkungen genügen prägnante Sätze.

/* Schlechtes Beispiel */
/* Modaler Header */
.modal-header {
  ...
}

/* Gutes Beispiel */
/* Wrapping-Element für .modal-title und .modal-close */
.modal-header {
  ...
}

Klassenbenennung

1. In Klassennamen dürfen nur Kleinbuchstaben und Bindestriche vorkommen (keine Unterstriche oder CamelCase). Bindestriche sollten zum Benennen verwandter Klassen verwendet werden (ähnlich wie bei Namespaces) (z. B. .btn und .btn-danger).
2. Vermeiden Sie allzu willkürliche Abkürzungen. .btn steht für Button, aber .s bedeutet nichts.
3. Klassennamen sollten möglichst kurz sein und eine klare Bedeutung haben.
4. Verwenden Sie aussagekräftige Namen. Verwenden Sie organisatorische oder zweckgebundene Namen anstelle von Präsentationsnamen.
5. Verwenden Sie die nächstgelegene übergeordnete Klasse oder Basisklasse als Präfix für die neue Klasse.
6. Verwenden Sie .js-*-Klassen, um Verhalten zu identifizieren (im Gegensatz zum Stil), und schließen Sie diese Klassen nicht in Ihre CSS-Dateien ein.

/* Schlechtes Beispiel */
.T { ... }
.Rot { ... }
.header { ... }

/* Gutes Beispiel */
.tweet { ... }
.wichtig { ... }
.tweet-header { ... }

Wähler

Verwenden Sie Klassen für allgemeine Elemente, um die Rendering-Leistung zu optimieren.
Vermeiden Sie die Verwendung von Attributselektoren (z. B. [class^="..."]) für häufig vorkommende Komponenten. Die Leistung Ihres Browsers wird durch diese Faktoren beeinträchtigt.
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 den nächsten übergeordneten Knoten (also einen Nachkommenselektor) (also wenn Sie keine Klasse mit einem Präfix verwenden – ein Präfix ist wie ein Namespace).

/* Schlechtes Beispiel */
Spanne { ... }
.page-container #stream .stream-item .tweet .tweet-header .benutzername { ... }
.avatar { ... }

/* Gutes Beispiel */
.avatar { ... }
.tweet-header .Benutzername { ... }
.tweet .avatar { ... }

Editor-Konfiguration

Richten Sie Ihren Editor mit der folgenden Konfiguration ein, um häufige Codeinkonsistenzen und -unterschiede zu vermeiden:

Verwenden Sie zwei Leerzeichen anstelle von Tabulatorzeichen (Soft-Tab bedeutet, dass Leerzeichen anstelle von Tabulatorzeichen verwendet werden).
Entfernen Sie beim Speichern der Datei nachstehende Leerzeichen.
Stellen Sie die Dateikodierung auf UTF-8 ein.
Fügen Sie am Ende der Datei eine Leerzeile hinzu.

Befolgen Sie die Dokumentation und fügen Sie diese Konfigurationsinformationen zur .editorconfig-Datei Ihres Projekts hinzu. Beispiel: .editorconfig-Beispiel von Bootstrap. Weitere Informationen finden Sie unter EditorConfig.

Für ein besseres und bequemeres Lesen lesen Sie bitte diesen Artikel https://www.jb51.net/shouce/codeguide/.

<<: Beispiel für die Umsetzung eines 2-spaltigen Layouts in HTML (links feste Breite, rechts adaptive Breite)

>>: Mehrere Möglichkeiten zum Zentrieren einer Box in der Webentwicklung