Unabhängig davon, wie viele Personen an demselben Projekt arbeiten, stellen Sie sicher, dass jede Codezeile so aussieht, als wäre sie von derselben Person geschrieben worden.
1. Verwenden Sie zwei Leerzeichen statt Tabulatoren – nur so ist eine einheitliche Darstellung in allen Umgebungen gewährleistet.
2. Verschachtelte Elemente sollten einmal eingerückt werden (d. h. zwei Leerzeichen).
3. Achten Sie bei der Definition von Attributen darauf, doppelte Anführungszeichen und niemals einfache Anführungszeichen zu verwenden.
4. Fügen Sie einem selbstschließenden Element keinen abschließenden Schrägstrich hinzu – die HTML5-Spezifikation besagt eindeutig, dass dies optional ist.
5. Lassen Sie das optionale schließende Tag nicht weg
<!DOCTYPE html> <html> <Kopf> <title>Seitentitel</title> </head> <Körper> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hallo Welt!</h1> </body> </html>
Fügen Sie der ersten Zeile jeder HTML-Seite eine Standardmodusdeklaration hinzu, um eine konsistente Darstellung in jedem Browser sicherzustellen.
<!DOCTYPE html> <html> <Kopf> </head> </html>
Gemäß der HTML5-Spezifikation:
Es wird dringend empfohlen, das lang-Attribut für das HTML-Stammelement anzugeben, um die richtige Sprache für das Dokument festzulegen. Dies hilft Sprachsynthese-Tools dabei, die Aussprache zu bestimmen, die sie verwenden sollten, Übersetzungstools dabei, die Regeln zu bestimmen, die sie beim Übersetzen befolgen sollten, und so weiter.
<html lang="en-us"> <!-- ... --> </html>
IE unterstützt bestimmte Tags, um die IE-Version zu bestimmen, die zum Zeichnen der aktuellen Seite verwendet werden soll. Sofern keine besonderen Anforderungen bestehen, ist es am besten, den Edge-Modus einzustellen, um den IE zu benachrichtigen, den neuesten unterstützten Modus zu übernehmen.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Durch die explizite Angabe der Zeichenkodierung können Sie sicherstellen, dass der Browser schnell und einfach ermittelt, wie der Seiteninhalt gerendert werden soll. Dies hat den Vorteil, dass Sie die Verwendung von Zeichen-Entity-Tags in HTML vermeiden können, sodass alles mit der Dokumentkodierung (normalerweise UTF-8-Kodierung) übereinstimmt.
<Kopf> <meta charset="UTF-8"> </head>
Gemäß der HTML5-Spezifikation besteht bei der Einführung von CSS- und JavaScript-Dateien im Allgemeinen keine Notwendigkeit, das Typattribut anzugeben, da text/css bzw. text/javascript ihre Standardwerte sind.
<!-- Externes CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --> <Stil> /* ... */ </style> <!-- JavaScript --> <script src="code-guide.js"></script>
Versuchen Sie, HTML-Standards und -Semantik zu befolgen, aber verzichten Sie nicht auf die Praktikabilität. Versuchen Sie, die wenigsten Tags zu verwenden und die Komplexität stets auf ein Minimum zu beschränken.
HTML-Attribute sollten in der unten angegebenen Reihenfolge angeordnet werden, um die Lesbarkeit des Codes zu gewährleisten.
Klasse
ID, Name
Daten-*
src, für, Typ, href, Wert
Titel, alt
Rolle, Arie-*
Die Klasse wird zur Identifizierung hochgradig wiederverwendbarer Komponenten verwendet und sollte daher zuerst aufgeführt werden. Die ID wird zur Identifizierung einer bestimmten Komponente verwendet und sollte mit Vorsicht verwendet werden (z. B. Lesezeichen innerhalb einer Seite), sodass sie an zweiter Stelle steht.
Boolesche Eigenschaften können ohne Wert deklariert werden. Die XHTML-Spezifikation erfordert die Zuweisung eines Werts, die HTML5-Spezifikation jedoch nicht.
Weitere Informationen finden Sie im WhatWG-Abschnitt zu booleschen Attributen:
Wenn ein boolesches Attribut eines Elements einen Wert hat, ist es wahr; wenn es keinen Wert hat, ist es falsch.
Wenn Sie ihm einen Wert zuweisen müssen, lesen Sie bitte die WhatWG-Spezifikation:
Wenn das Attribut vorhanden ist, muss sein Wert die leere Zeichenfolge oder […] der kanonische Name des Attributs sein, ohne führende oder nachfolgende Leerzeichen.
Vereinfacht ausgedrückt besteht keine Notwendigkeit, einen Wert zuzuweisen.
Versuchen Sie beim Schreiben von HTML-Code, redundante übergeordnete Elemente zu vermeiden. Um dies zu erreichen, sind häufig Iterationen und Umgestaltungen erforderlich. Bitte beachten Sie den folgenden Fall:
<!-- Nicht so toll --> <span class="avatar"> <img src="..."> </span> <!-- Besser --> <img class="avatar" src="...">
Durch JavaScript generierte Tags erschweren das Auffinden und Bearbeiten von Inhalten und verlangsamen die Leistung. Vermeiden Sie es, wenn Sie können.
1. Verwenden Sie zwei Leerzeichen statt Tabulatoren – nur so ist eine einheitliche Darstellung in allen Umgebungen gewährleistet.
2. Wenn Sie Selektoren gruppieren, platzieren Sie einzelne Selektoren in einer eigenen Zeile.
3. Fügen Sie zur besseren Lesbarkeit des Codes vor der öffnenden Klammer jedes Deklarationsblocks ein Leerzeichen ein.
4. Die schließende geschweifte Klammer des Deklarationsblocks sollte in einer separaten Zeile stehen.
5. In jeder Deklarationsanweisung sollte nach: ein Leerzeichen eingefügt werden.
6. Für eine genauere Fehlerberichterstattung sollte jede Anweisung in einer eigenen Zeile stehen.
7. Alle Deklarationsanweisungen sollten mit einem Semikolon enden. Das Semikolon nach der letzten Deklarationsanweisung ist optional. Wenn Sie es jedoch weglassen, ist Ihr Code möglicherweise fehleranfälliger.
8. Bei durch Kommas getrennten Attributwerten sollte nach jedem Komma ein Leerzeichen eingefügt werden (z. B. box-shadow).
9. Fügen Sie nach Kommas keine Leerzeichen in die Werte rgb(), rgba(), hsl(), hsla() oder rect() ein. Dies hilft dabei, mehrere Farbwerte (nur Kommas, keine Leerzeichen) von mehreren Attributwerten (Kommas und Leerzeichen) zu unterscheiden.
10. Lassen Sie bei Attributwerten oder Farbparametern die führende 0 für Dezimalstellen kleiner als 1 weg (z. B. .5 statt 0,5; -.5px statt -0,5px).
11/Hex-Werte sollten alle in Kleinbuchstaben geschrieben sein, zum Beispiel #fff. Kleinbuchstaben sind beim Scannen eines Dokuments leichter zu lesen, da ihre Form leichter zu unterscheiden ist.
12. Versuchen Sie, abgekürzte Hexadezimalwerte zu verwenden, verwenden Sie beispielsweise #fff anstelle von #ffffff.
13. Fügen Sie doppelte Anführungszeichen für die Attribute im Selektor hinzu, zum Beispiel input[type="text"]. Dies ist nur in einigen Fällen optional, aus Gründen der Codekonsistenz wird jedoch die Verwendung von doppelten Anführungszeichen empfohlen.
14. Vermeiden Sie die Angabe von Einheiten für 0-Werte, verwenden Sie beispielsweise margin: 0; anstelle von margin: 0px;.
/* Schlechtes CSS */
.selector, .selector-secondary, .selector[type=text] {
Polsterung:15px;
Rand:0px 0px 15px;
Hintergrundfarbe:rgba(0, 0, 0, 0,5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Gutes CSS */
.Wähler,
.selector-secondary,
.selector[type="text"] {
Polsterung: 15px;
Rand unten: 15px;
Hintergrundfarbe: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}Zugehörige Eigenschaftsdeklarationen sollten gruppiert und in der folgenden Reihenfolge angeordnet werden:
Positionierung
Boxmodell
Typografisch
Visuell
Die Positionierung steht an erster Stelle, da sie Elemente aus dem normalen Dokumentfluss entfernt und Boxmodell-bezogene Stile überschreiben kann. An zweiter Stelle steht das Box-Modell, da es die Größe und Platzierung der Komponenten bestimmt.
Andere Eigenschaften wirken sich nur auf das Innere der Komponente aus oder wirken sich nicht auf die ersten beiden Eigenschaftsgruppen aus und werden daher nachrangig eingestuft.
.declaration-order {
/* 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: Mitte;
/* Visuell */
Hintergrundfarbe: #f5f5f5;
Rand: 1px durchgezogen #e5e5e5;
Randradius: 3px;
/* Sonstiges */
Deckkraft: 1;
}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. Zu den Alternativen gehören:
Kompilieren Sie mehrere CSS-Dateien in einer Datei über einen CSS-Präprozessor, ähnlich wie Sass oder Less. Funktionen zum Zusammenführen von CSS-Dateien werden von Rails, Jekyll oder anderen Systemen bereitgestellt.
<!-- Linkelemente verwenden -->
<link rel="stylesheet" href="core.css">
<!-- @imports vermeiden -->
<Stil>
@import url("more.css");
</style>Platzieren Sie Medienabfragen so nah wie möglich an relevanten Regeln. Packen Sie sie nicht in eine einzelne Stildatei und platzieren Sie sie nicht am Ende des Dokuments. Wenn man sie trennt, werden sie in Zukunft nur noch von allen vergessen. Ein typisches Beispiel ist unten aufgeführt.
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (Mindestbreite: 480 Pixel) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}Bei Stilen, die nur eine Aussage enthalten, wird empfohlen, die Aussage zur besseren Lesbarkeit und schnellen Bearbeitung in derselben Zeile zu platzieren. Bei Stilen mit mehreren Deklarationen sollten die Deklarationen dennoch in mehrere Zeilen aufgeteilt werden.
Der Schlüsselfaktor dabei ist die Fehlererkennung – der CSS-Validator zeigt beispielsweise an, dass in Zeile 183 ein Syntaxfehler vorliegt. Wenn es sich um eine einzelne Anweisung in einer einzelnen Zeile handelt, können Sie den Fehler nicht ignorieren. Wenn es sich um mehrere Anweisungen in einer einzelnen Zeile handelt, müssen Sie diese sorgfältig analysieren, um den Fehler nicht zu übersehen.
/* 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 }In Fällen, in denen Sie alle Werte explizit festlegen müssen, sollten Sie versuchen, die Verwendung verkürzter Eigenschaftsdeklarationen einzuschränken. Zu den häufigsten Missbräuchen verkürzter Eigentumserklärungen gehören:
Polsterung
Marge
Schriftart
Hintergrund
Grenze
Grenzradius
In den meisten Fällen müssen wir nicht alle Werte für eine kurze Eigenschaftsdeklaration angeben. Beispielsweise muss das HTML-Überschriftenelement nur die Werte für den oberen und unteren Rand festlegen, sodass Sie diese beiden Werte nur bei Bedarf überschreiben müssen. Die übermäßige Verwendung verkürzter Eigenschaftsdeklarationen kann zu unübersichtlichem Code führen und unbeabsichtigte Nebenwirkungen verursachen, indem Eigenschaftswerte unnötig überschrieben werden.
/* Schlechtes Beispiel */
.element {
Rand: 0 0 10px;
Hintergrund: rot;
Hintergrund: url("image.jpg");
Randradius: 3px 3px 0 0;
}
/* Gutes Beispiel */
.element {
Rand unten: 10px;
Hintergrundfarbe: rot;
Hintergrundbild: url("image.jpg");
Rand-oben-links-Radius: 3px;
Rand-oben-rechts-Radius: 3px;
}Vermeiden Sie unnötige Verschachtelungen. Denn obwohl Sie die Verschachtelung nutzen können, heißt das nicht, dass Sie das auch tun sollten. Verwenden Sie die Verschachtelung nur, wenn Stile auf das übergeordnete Element (d. h. untergeordnete Selektoren) beschränkt werden müssen und mehrere Elemente verschachtelt werden müssen.
// Ohne Verschachtelung
.table > thead > tr > th { …
.table > thead > tr > td { …
// Mit Verschachtelung
.table > thehead > tr {
> th { …
> td { …
}Um die Lesbarkeit zu verbessern, fügen Sie zwischen den in Klammern eingeschlossenen Werten, Variablen und Operatoren mathematischer Ausdrücke ein Leerzeichen ein.
// Schlechtes Beispiel
.element {
Rand: 10px 0 @variable*2 10px;
}
// Gutes Beispiel
.element {
Rand: 10px 0 (@variable * 2) 10px;
}Code wird von Menschen geschrieben und gepflegt. Stellen Sie sicher, dass Ihr Code selbstbeschreibend, gut kommentiert und für andere leicht verständlich ist. Gute Codekommentare vermitteln Kontext und Zweck des Codes. Formulieren Sie Komponenten- oder Klassennamen nicht einfach neu.
Achten Sie bei längeren Kommentaren darauf, vollständige Sätze zu schreiben; bei allgemeinen Kommentaren können Sie prägnante Formulierungen schreiben.
/* Schlechtes Beispiel */
/* Modaler Header */
.modal-header {
...
}
/* Gutes Beispiel */
/* Umschließendes Element für .modal-title und .modal-close */
.modal-header {
...
} 1. In Klassennamen dürfen nur Kleinbuchstaben und Bindestriche (keine Unterstriche oder Kamelbuchstaben) vorkommen. Bindestriche sollten bei der Benennung verwandter Klassen (ähnlich wie Namespaces) verwendet werden (z. B. .btn und .btn-danger).
2. Vermeiden Sie allzu willkürliche Abkürzungen. .btn stellt eine Schaltfläche dar, aber .s kann keine Bedeutung ausdrücken.
3. Klassennamen sollten so kurz wie möglich sein und eine klare Bedeutung haben.
4. Verwenden Sie aussagekräftige Namen. Verwenden Sie organisierte oder zielgerichtete Namen und keine Präsentationsnamen.
5. Basierend auf der nächsten übergeordneten Klasse oder Basisklasse als Präfix der neuen Klasse.
6. Verwenden Sie .js-*-Klassen zur Identifizierung von Verhaltensweisen (im Gegensatz zu Stilen) und fügen Sie diese Klassen nicht in CSS-Dateien ein.
/* Schlechtes Beispiel */
.T { ... }
.Rot { ... }
.header { ... }
/* Gutes Beispiel */
.tweet { ... }
.wichtig { ... }
.tweet-header { ... } Verwenden Sie Klassen für allgemeine Elemente, um die Rendering-Leistung zu optimieren.
Vermeiden Sie für häufig vorkommende Komponenten die Verwendung von Attributselektoren (z. B. [class^=“…“]). Die Browserleistung kann durch diese Faktoren beeinträchtigt werden.
Der Selektor sollte so kurz wie möglich sein und versuchen, die Anzahl der Elemente, aus denen der Selektor besteht, zu begrenzen. Es wird empfohlen, 3 nicht zu überschreiten.
Beschränken Sie Klassen nur dann auf das nächstgelegene übergeordnete Element (d. h. den Nachkommenselektor), wenn dies erforderlich ist (z. B. wenn keine Klassen mit Präfixen verwendet werden – Präfixe sind wie Namespaces).
/* Schlechtes Beispiel */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Gutes Beispiel */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }Richten Sie Ihren Editor wie folgt ein, um häufige Codeinkonsistenzen und -unterschiede zu vermeiden:
Verwenden Sie zwei Leerzeichen, um Tabulatorzeichen zu ersetzen (Soft-Tab bedeutet, dass Leerzeichen zur Darstellung von Tabulatorzeichen verwendet werden). Entfernen Sie beim Speichern der Datei nachfolgende Leerzeichen. Stellen Sie die Dateikodierung auf UTF-8 ein. Fügt am Ende der Datei eine Leerzeile hinzu.
Lesen Sie die Dokumentation und fügen Sie diese Konfigurationsinformationen der .editorconfig-Datei Ihres Projekts hinzu. Beispiel: .editorconfig-Instanz in Bootstrap. Weitere Informationen finden Sie unter EditorConfig.