Wie kann ein Junior-Frontend qualitativ hochwertigen Code schreiben?

HTML
1. Die Deklaration von DOCTYPE entspricht im Grunde der Welt von H5 und kann direkt über Tastenkombinationen generiert werden.
2. Zeichensatzdeklaration, normalerweise , denken Sie daran, Symbolzeichen wie Leerzeichen zu maskieren - 
3. Richtige Abkürzung Nun der Code In jedem FamilyMart-Bucket wurde Einrückung konfiguriert. Sie können es ohne große Notwendigkeit direkt verwenden. 4. CSS und JS betonen die Verwendung externer Links. Jetzt habe ich das Gefühl, dass in jeder Komponente Komponenten geschrieben werden . Mit vorkompilierten Sprachen wie less können leichter Skin-Änderungen und andere Effekte erzielt werden
5. Korrigieren Sie die Tag-Verschachtelung
6. Löschen Sie unnötige Tags. Beispielsweise kann

semantisch das äußere div gelöscht werden, da div und ul beide Elemente auf Blockebene sind
7. Legen Sie es beim Erstellen der Seite fest Bereich: Wenn Sie nach dem Layout der gesamten Site kleine Bereichsblöcke anpassen möchten, definieren Sie direkt eine separate Klasse (ID ist ebenfalls akzeptabel) im Körper oder in einem nahegelegenen großen Bereichsblock und führen Sie die Stilverarbeitung durch
8. Weglassen Bilder, Der Protokollteil (http:, https:) von Stylesheet-, Skript- und anderen Mediendatei-URLs, sofern keine dieser beiden Bedingungen erfüllt ist. Zum Beispiel
9. Verwenden Sie zwei Leerzeichen für die Einrückung (nicht notwendig, um so einheitlich zu sein). wie möglich), um eine Codeformatierung zu erreichen
10. Versuchen Sie, für Tag-Namen, Attribute und Attributwerte Kleinbuchstaben zu verwenden
11. Reduzieren Sie unnötige Leerzeichen im Inhalt des Elements und verwenden Sie keine Leerzeichen am Ende des Inhalts.
12. Fügen Sie entsprechende Kommentare hinzu, um die Funktion zu beschreiben.
13. Fügen Sie TODO hinzu, um Aufgaben zu markieren. Zum Beispiel

• Äpfel
• Orangen

14.h5 Mitte Laner Verwenden Sie für Beschriftungen keine geschlossene Form, sondern schreiben Sie Beschriftungen einfach direkt. Schreiben Sie es beispielsweise nicht als
; Multimedia-Elemente wie Bilder, Videos, Leinwandanimationen usw. stellen sicher, dass andere barrierefreie Inhalte bereitgestellt werden. Beispiel:
17. Beim Verweisen auf das Stylesheet gibt Typ standardmäßig Text/CSS an und kann weggelassen werden. Beim Zitieren eines Skripts gibt der Typ standardmäßig Text/Javascript an, was weggelassen werden kann
18. Verwenden Sie doppelte Anführungszeichen für Attributwerte
19. Der veröffentlichte Code muss komprimiert

und CSS 1. Reset verwenden. Klären Sie zunächst seine Rolle, da die Standardattributwerte jedes Browsers unterschiedlich sind und die Kompatibilität berücksichtigt werden muss. Verwenden Sie kein globales Zurücksetzen, da es ineffizient ist.
2. In der Reihenfolge der Attribute werden diejenigen, die das Layout ändern, vorne geschrieben, wie z. B. Anzeige, Rand, Abstand, Position, und andere werden hinten geschrieben (kann in alphabetischer Reihenfolge angeordnet werden)
3 . Definieren Sie aussagekräftige ID- und Klassennamen, kurz und klar, verwenden Sie den Konnektor
für mehrere Wörter. 4. Versuchen Sie, die ID in einem großen Block zu definieren und nach Elementen im Block zu suchen, z. B.

...nMehrere Inhalte Die Suche kann mit #content .title-color{color:red}
erfolgen. 5. Verwenden Sie abgekürzte Attribute, z. B. „font-family: palatino, georgia, serif;“ Schriftgröße: 100 %; Zeilenhöhe: 1,6; geschrieben als Schriftart: 100 %/1,6 Palatino, Georgia, Serif;
6. Wenn der Attributwert 0 ist, fügen Sie keine Einheit hinzu, z. B. Polsterung: 0 15px;
7. Wenn der Wert zwischen -1 und 1 liegt, kann 0 weggelassen werden, z. B. „font-size:.8em“
8. Verwenden Sie hexadezimale Werte für Farbwerte, z. B. „color: #ebc“ statt „color“. : #eebbcc
9. Beenden Sie jeden Stil mit einem Semikolon (;)
10 Zwischen dem Selektor und {} sollte ein Leerzeichen stehen, und zwischen dem Attributnamen und dem Attributwert sollte ein Leerzeichen stehen (denken Sie daran). formatieren Sie es beim Codieren)
11. Verwenden Sie einfache Anführungszeichen für Attributwerte und fügen Sie keine Anführungszeichen zu URIs hinzu
12. Kommentieren Sie in Abschnitten, es ist nicht erforderlich, jeden Stil zu kommentieren (es sei denn, er kann leicht unscharf werden). )
13. Nutzen Sie die Vererbung sinnvoll, definieren Sie Stile für das übergeordnete Element und untergeordnete Elemente erben den Stil. Attribute, die vererbt werden können, z. B. beginnend mit Schriftart-, beginnend mit Text-, Zeilenhöhe
14. Wenn die Darstellung nicht vorhanden ist, versuchen Sie, display:none anstelle von Visibility:hidden zu verwenden, da ersteres nicht vorhanden ist Belegen Sie Speicher für die Browseranalyse und letztere schafft Platz im Speicher
15. Vermeiden Sie die Verwendung von @import
16. Der veröffentlichte Code sollte komprimiert werden

Das obige ist der detaillierte Inhalt vonWie kann ein Junior-Frontend qualitativ hochwertigen Code schreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn