Dieses Mal erkläre ich Ihnen, wie Sie flexiblen, stabilen und qualitativ hochwertigen HTML- und CSS-Code schreiben, welche Vorsichtsmaßnahmen für das Schreiben von flexiblem, stabilem und qualitativ hochwertigem HTML- und CSS-Code gelten und was Das Folgende ist der eigentliche Kampf. Werfen wir einen Blick auf den Fall.
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.
2 Definition von Attributen. Stellen Sie sicher, dass Sie nur doppelte Anführungszeichen verwenden, niemals einfache Anführungszeichen.
4 Fügen Sie am Ende eines selbstschließenden Elements keinen Schrägstrich hinzu (https://dev.w3.org/html5 /spec-author-view/ syntax.html#syntax-start-tag) besagt eindeutig, dass dies optional ist;
5. Fügen Sie den Standardmodus nicht in die erste Zeile ein jede HTML-Seite Anweisung, dies kann sicherstellen, dass es in jedem Browser eine Anzeige gibt;
2. Sprachattribut:
3. IE-Kompatibilitätsmodus:
4. Zeichenkodierung:
Gemäß der HTML5-Spezifikation ist es normal, CSS- und JavaScript-Dateien einzuführen. Es ist nicht erforderlich, das Typattribut anzugeben, da text/css bzw. text/javascript ihre Standardwerte sind 🎜>
6. Praktikabilität ist Trumpf:
7. Attributreihenfolge:
1.class
2.id,name
4.src,for,type,href
5.title,alt
6.Aria,role
Klasse wird verwendet, um hoch wiederverwendbare Komponenten zu kennzeichnen, daher sollte sie an erster Stelle stehen.
8. Reduzieren Sie die Anzahl der Tags
Vermeiden Sie beim Schreiben von HTML-Code redundante übergeordnete Elemente. Dies erfordert oft die Implementierung von
Tags Durch JavaScript generierte Inhalte erschweren das Auffinden und Bearbeiten und beeinträchtigen die Leistung so weit wie möglich.
10. Verwenden Sie zwei Leerzeichen, um das Tabulatorzeichen zu ersetzen. ;
2. Platzieren Sie beim Gruppieren von
3. Fügen Sie zwischen der linken geschweiften Klammer jedes Deklarationsblocks ein Leerzeichen ein. Die rechte geschweifte Klammer des Deklarationsblocks sollte in einer separaten Zeile stehen.
5. Nach jeder Anweisung sollte ein Leerzeichen eingefügt werden stehen in einer eigenen Zeile;
9 Bei Attributwerten oder Farbparametern sollte die 0 vor Dezimalstellen weggelassen werden (z. B. .5 statt 0,5). );
10. Hexadezimalwerte sollten alle in Kleinbuchstaben geschrieben sein, zum Beispiel: #fff, versuchen Sie, die abgekürzte Hexadezimalform zu verwenden
11 "]; 12. Vermeiden Sie die Angabe von Einheiten für 0-Werte, z. B. margin :0 statt margin:0px.
11. Deklarationsreihenfolge:
Verwandte Attributdeklarationen sollten gruppiert werden und in der folgenden Reihenfolge angeordnet:
1. Positionierung (Position: absolut; oben: 0; unten: 0; rechts: 0; links: 0; Z-Index: 100;);
2. box model(display: block; float: left; width: 100px; height: 100px;);
3.typographic(font: normal 13px „Microsoft YaHei“; line-height: 1.5em; color: #333; text -align:center;);
4.visual(background: gelb; border: 1px solid #c00; border-radius: 3px; opacity: 1; );
Aufgrund der Positionierung können Elemente sein Es wird aus dem normalen Dokumentenfluss entfernt und kann auch die mit dem Box-Modell (Box-Modell) verbundenen Stile überschreiben. Das Box-Modell steht also an zweiter Stelle, da es die Größe und Position der Komponente bestimmt (innerhalb) der Komponente oder hat keinen Einfluss auf die ersten beiden Attributsätze. Daher rangiert es dahinter.
12. Verwenden Sie @import nicht.
Im Vergleich zu Tags ist der Befehl @import viel langsamer. Er erhöht nicht nur die Anzahl zusätzlicher Anfragen, sondern verursacht auch unvorhersehbare Probleme:
1 . Mehrere Elemente verwenden;
2. Konvertieren Sie mehrere CSS-Dateien in eine Datei, ähnlich wie bei Sass
3. Stellen Sie CSS-Dateien über Rails, Jekyll oder andere Systeme bereit.
13. Position der Medienabfrage (Medienabfrage)
Platzieren Sie Medienabfragen so nah wie möglich an den relevanten Regeln und platzieren Sie sie nicht in einer einzigen Stildatei.
14. Präfixierte Attribute:
Bei Verwendung der präfixierten Attribute eines bestimmten Herstellers wird der Wert jedes Attributs durch Sperren vertikal ausgerichtet, was viel praktischer ist. Zeilenbearbeitung
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 die gleiche Zeile zu setzen. Bei Stilen mit mehreren Deklarationen sollte die Deklaration in mehrere Zeilen unterteilt werden Ein Faktor dabei ist die Fehlererkennung. Der CSS-Validator hat beispielsweise einen Syntaxfehler in Zeile 180. Wenn es sich um eine einzeilige Deklaration handelt, wird dieser Fehler ignoriert Deklarationen in einer einzelnen Zeile müssen Sie sorgfältig analysieren, um fehlende Fehler zu vermeiden.
16. Vermeiden Sie unnötige Verschachtelungen. Dies bedeutet jedoch nicht, dass dies der Fall ist Sie sollten die Verschachtelung nur verwenden, wenn der Stil auf das übergeordnete Element beschränkt sein muss (d. h.
Nachkommenselektor) und mehrere Verschachtelungselemente vorhanden sind, die verschachtelt werden müssen. Die Verschachtelung kann nur von Ingenieuren verwendet werden, die dies getan haben verschachtelte Elemente.
Bitte stellen Sie sicher, dass Ihr Code selbstbeschreibend, gut kommentiert und für andere leicht verständlich ist Kontext und Zweck des Codes;
Wiederholen Sie nicht einfach Komponenten- oder Klassennamen.
Stellen Sie sicher, dass Sie vollständige Sätze schreiben, und für allgemeine Kommentare können Sie einleitende Sätze schreiben.
In Klassennamen dürfen nur kleine Zeichen und Bindestriche verwendet werden (keine Unterstriche oder Kamelbuchstaben). .btn-danger)
Vermeiden Sie übermäßig willkürliche Abkürzungen, aber .s kann keine Bedeutung ausdrücken; Verwenden Sie aussagekräftige Namen Organisierte oder zielgerichtete Namen, verwenden Sie keine ausdrucksstarken Namen. Stellen Sie neue Klassen als Präfix auf die neueste Klasse oder Basisklasse ein.
Verwenden Sie die Klasse .js-*, um Verhaltensweisen zu identifizieren (im Gegensatz zu Stilen). diese Klassen in CSS-Dateien umwandeln;
Sie können sich bei der Benennung von Sass- und Less-Variablen auch auf die oben aufgeführten Spezifikationen beziehen.
19 Der Selektor
verwendet Klassen für gemeinsame Elemente, was für die Optimierung von Vorteil ist der Rendering-Leistung;
Vermeiden Sie bei häufig vorkommenden Komponenten die Verwendung des
(zum Beispiel: [class^="···" ]), die Browserleistung wird durch diese Faktoren beeinträchtigt
Der Selektor sollte so kurz wie möglich sein und versuchen, die Anzahl der Elemente, aus denen er besteht, zu begrenzen. Es wird empfohlen, ihn nicht zu überschreiten.
Nur wenn die erforderliche Klasse auf das nächstgelegene übergeordnete Element beschränkt ist 🎜> 20. Code-Organisation: Codesegmente in Komponenteneinheiten organisieren;
konsistente Kommentarspezifikationen angeben;
konsistente Leerzeichen verwenden, um den Code in Blöcke zu unterteilen, was das Scannen größerer Dokumente erleichtert;
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!
Verwandte Lektüre:
Wie man in einem responsiven Framework mit dem automatischen Zeilenumbruch von Tabellenüberschriften umgeht
Wie man es macht Tabellenanzeigeränder
Wie sollen HTML-Tabellen angeordnet sein
Das obige ist der detaillierte Inhalt vonSo schreiben Sie flexiblen, stabilen und qualitativ hochwertigen HTML- und CSS-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
