Leitfaden zum Schreiben flexibler, stabiler und hochwertiger HTML- und CSS-Codespezifikationen_HTML/Xhtml_Webseitenproduktion

Goldene Regel
Befolgen Sie immer die gleichen Codierungsstandards. 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. Grammatik:
1. Verwenden Sie zwei Leerzeichen, um das Tabulatorzeichen zu ersetzen.
3 . Stellen Sie sicher, dass Sie für Attributdefinitionen doppelte Anführungszeichen und niemals einfache Anführungszeichen verwenden. Fügen Sie am Ende selbstschließender Elemente keine Schrägstriche hinzu (
https://dev. w3.org /html5/spec-author-view/syntax.html#syntax-start-tag
) gibt eindeutig an, dass dies optional ist; 5. Fügen Sie einen Standard hinzu mode-Deklaration in der ersten Zeile jeder HTML-Seite, um sicherzustellen, dass in jedem Browser eine angezeigt wird;
2. Sprachattribut:

Gemäß der HTML5-Spezifikation wird empfohlen, das lang-Attribut für das HTML-Root-Element anzugeben, um die richtige Sprache für den Text festzulegen Synthese-Tool bestimmt, welche Sprache verwendet werden soll. Die Aussprache von hilft Übersetzungstools dabei, die Regeln zu bestimmen, die während der Übersetzung usw. befolgt werden sollten. Liste der Lang-Attribute: http://www.sitepoint.com/web-foundations/iso-2-letter -Sprachcodes/

3. IE-Kompatibilitätsmodus:

IE unterstützt die Verwendung spezifischer Tags, um die IE-Version zu bestimmen, die die aktuelle Seite der Quittung verwenden soll. Dies ist am besten festzulegen Es wird in den Edge-Modus versetzt. Daher wird der IE angewiesen, den neuesten unterstützten Modus zu übernehmen.

4. Zeichenkodierung:

Durch die Deklaration der Zeichenkodierung kann sichergestellt werden, dass der Browser die Darstellungsmethode des Seiteninhalts schnell und einfach bestimmen kann. Dadurch kann die Verwendung von Zeichenentitäts-Tags vermieden werden HTML, daher stimmen alle mit der Dokumentkodierung überein.

5. CSS- und JavaScript-Dateien importieren:

Gemäß der HTML5-Spezifikation ist es im Allgemeinen nicht erforderlich, das Typattribut bei der Einführung von CSS- und JavaScript-Dateien anzugeben, da text/css und text/ Javascript sind ihre jeweiligen Standardwerte.

6. Praktikabilität ist Trumpf:

Versuchen Sie, HTML-Standards und -Semantik zu befolgen, aber verzichten Sie nicht auf die Praktikabilität. Versuchen Sie, stets die geringste Komplexität beizubehalten

7. Attributreihenfolge:
HTML-Attribute sollten in der folgenden Reihenfolge angeordnet werden, um die Lesbarkeit des Codes zu gewährleisten:

1.class

2.id,name　 3.data-*　4.src,for,type,href　　
5.title,alt　　
6.Aria,role　
Klasse wird verwendet, um hochgradig wiederverwendbare Komponenten zu markieren, so sollte es auch sein Oben angeordnet.


8. Reduzieren Sie die Anzahl der Tags

Vermeiden Sie beim Schreiben von HTML-Code redundante übergeordnete Elemente. Dies erfordert oft Iteration und Refactoring.

9. Von JavaScript generierte Tags
Von JavaScript generierte Tags erschweren das Auffinden und Bearbeiten von Inhalten und verringern die Leistung, wenn möglich

10. CSS-Syntax: 1. Verwenden Sie zwei Leerzeichen, um das Tabulatorzeichen zu ersetzen.
2 🎜>3. Zur besseren Lesbarkeit fügen Sie zwischen der linken geschweiften Klammer jedes Deklarationsblocks ein Leerzeichen ein.

5. Danach sollte ein Leerzeichen eingefügt werden.

6. Um eine genauere Fehlerberichterstattung zu erhalten, sollte jede Anweisung mit einem Semikolon enden Das Semikolon nach der Anweisung ist optional, aber wenn Sie dieses Semikolon weglassen, ist der Code möglicherweise einfacher zu schreiben. 8 Bei durch Kommas getrennten Attributwerten sollte nach jedem Komma ein Leerzeichen eingefügt werden Lassen Sie bei Werten oder Farbparametern die 0 vor Dezimalstellen kleiner als 1 weg (z. B. .5 statt 0,5); hexadezimale Werte sollten alle in Kleinbuchstaben geschrieben werden, zum Beispiel: #fff, versuchen Sie es Verwenden Sie den abgekürzten hexadezimalen Basiswert, verwenden Sie beispielsweise #fff anstelle von #ffffff. Fügen Sie den ausgewählten Attributen doppelte Anführungszeichen hinzu, z. B. 12 Einheiten für 0-Werte verwenden beispielsweise margin:0 anstelle von margin:0px.


11. Deklarationsreihenfolge:


Verwandte Eigentumsdeklarationen 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.Box-Modell(Anzeige: Block; Float: links ; Breite: 100 Pixel; Höhe: 100 Pixel; 4.visual(background: yellow; border: 1px solid #c00; border-radius: 3px; opacity: 1; );
　
Elemente können aufgrund der Positionierung aus dem normalen Dokumentenfluss entfernt werden, und das ist auch möglich Decken Sie die Stile ab, die sich auf das Boxmodell beziehen, und rangieren Sie an zweiter Stelle, da es die Größe und Position der Komponente bestimmt Es rangieren daher zwei Sätze von Attributen dahinter.

12. Verwenden Sie @import nicht　
Im Vergleich zu Tags ist es nicht nur viel langsamer, sondern verursacht auch unvorhersehbare Probleme Hier sind einige:
1. Verwenden Sie mehrere CSS-Dateien über einen CSS-Präprozessor oder weniger Funktion zum Zusammenführen von CSS-Dateien.

13. Position der Medienabfrage

Platzieren Sie Medienabfragen so nah wie möglich an relevanten Regeln und platzieren Sie sie nicht in einer einzigen Stildatei.

14. Präfixierte Attribute:

Bei Verwendung der präfixierten Attribute eines bestimmten Herstellers ist es praktisch, die Werte jedes Attributs in vertikaler Richtung zu sperren Beispiel:

CSS-Code

Inhalt in die Zwischenablage kopieren

1. .selector { 　　　
- webkit-box-shadow: 0
3. 1px 2px rgba(0,0,0,.15 ); 　　　　
　　　　　　box-shadow: 0 
5. 1px 2px rgba(0,0,0,.15); 🎜 >
6. }

15. Einzeilige Regeldeklaration:

Für Stile, deren Wert eine Deklaration enthält, wird aus Gründen der Lesbarkeit und schnellen Bearbeitung empfohlen, die Anweisung in derselben Zeile zu platzieren Bei Stilen mit mehreren Deklarationen sollte die Deklaration dennoch in mehrere Zeilen unterteilt werden, um Fehler zu erkennen. Beispielsweise liegt ein Syntaxfehler im CSS-Validator in Zeile 180 vor Wenn Sie eine einzelne Deklaration verwenden, können Sie diesen Fehler nicht ignorieren. Wenn sich mehrere Anweisungen in einer einzelnen Zeile befinden, müssen Sie diese sorgfältig analysieren, um fehlende Fehler zu vermeiden.
16. Verschachtelung in Less und Sass

Vermeiden Sie unnötige Verschachtelung. Dies bedeutet jedoch nicht, dass Sie nur Verschachtelung verwenden sollten Der Stil muss auf das übergeordnete Element (d. h. den Nachkommenselektor) beschränkt sein, und es müssen mehrere Elemente verschachtelt werden
17. Kommentare:

Stellen Sie sicher, dass Ihr Code selbstbeschreibend, gut kommentiert und für andere leicht verständlich ist und Codezweck; Formulieren Sie Komponenten- oder Klassennamen nicht einfach neu. Stellen Sie sicher, dass Sie vollständige Sätze schreiben. Bei allgemeinen Kommentaren können Sie einleitende Sätze schreiben.


18. Klassenbenennung

In Klassennamen dürfen nur kleine Zeichen und Bindestriche verwendet werden (keine Unterstriche oder Groß-/Kleinschreibung). btn und .btn-danger) Vermeiden Sie übermäßig willkürliche Abkürzungen, aber .s kann keine Bedeutung ausdrücken; Verwenden Sie aussagekräftige Namen , verwenden Sie organisierte oder zielgerichtete Namen, verwenden Sie keine ausdrucksstarken Namen;
Stellen Sie neuen Klassen ein Präfix basierend auf der neuesten Klasse oder Basisklasse voran.
Verwenden Sie .js-*-Klassen, um Verhaltensweisen zu identifizieren (im Gegensatz zu Stilen). Fügen Sie diese Klassen nicht in CSS-Dateien ein.
Sie können sich bei der Benennung von Sass- und Less-Variablen auch auf die oben aufgeführten Spezifikationen beziehen.


19. Selektoren

Verwenden Sie Klassen für allgemeine Elemente, um die Rendering-Leistung zu optimieren.

Vermeiden Sie bei häufig vorkommenden Komponenten die Verwendung von Attributselektoren (zum Beispiel: [class^ ="·). ··"]), die Browserleistung wird durch diese Faktoren beeinträchtigt; Machen Sie den Selektor so kurz wie möglich und versuchen Sie, die Anzahl der Elemente, aus denen der Selektor besteht, zu begrenzen. Es wird empfohlen, 3 nicht zu überschreiten; Nur Klassen nur bei Bedarf auf das nächstgelegene übergeordnete Element beschränken


20. Code-Organisation:

Codesegmente in Komponenteneinheiten organisieren;

Konsistente Kommentarspezifikationen verwenden; Verwenden Sie konsistente Leerzeichen, um den Code in Blöcke zu unterteilen Dokumente; Wenn mehrere CSS-Dateien verwendet werden, teilen Sie diese in Komponenten statt in Seiten auf, da die Seiten neu organisiert werden und Komponenten nur verschoben werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er allen beim Schreiben standardisierter, flexibler, stabiler und qualitativ hochwertiger HTML- und CSS-Codes hilfreich sein wird.

Originaltext:

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