Comment un front-end junior peut-il écrire du code de haute qualité ?

HTML
1. La déclaration de DOCTYPE est fondamentalement le monde de H5 maintenant, et elle peut être générée directement par des touches de raccourci.
2. Déclaration du jeu de caractères, généralement , n'oubliez pas d'échapper les caractères symboliques tels que les espaces - 
3. Corriger l'abréviation Maintenant, le code dans chaque compartiment FamilyMart a été configuré avec une indentation. Vous pouvez l'utiliser directement sans grand besoin
4. CSS et js mettent l'accent sur l'utilisation de liens externes. Maintenant, j'ai l'impression que des éléments composants sont écrits dans chacun. Cela peut être fait dans le composant. . L'utilisation de langages précompilés tels que less permet d'obtenir plus facilement des changements de peau et d'autres effets
5. Corriger l'imbrication des balises
6. Supprimer les balises inutiles. Par exemple

sémantiquement, le div externe peut être supprimé, car div et ul sont tous deux des éléments de niveau bloc
7. Définissez-le lors de la création de la page. Zone, une fois l'ensemble du site aménagé, si vous souhaitez ajuster des blocs de petite zone, définissez directement une classe distincte (l'ID est également acceptable) dans le corps ou dans un bloc de grande zone à proximité, et effectuez un traitement de style
8. Omettre images, la partie protocole (http :, https :) de l'URL pour les styles, scripts et autres fichiers multimédias, à moins qu'aucun de ces deux ne soit satisfait. Tels que
9. Utilisez deux espaces pour l'indentation (pas nécessaire pour être aussi unifié autant que possible) pour obtenir le formatage du code
10. Essayez d'utiliser des minuscules pour les noms de balises, les attributs et les valeurs d'attribut
11. Réduisez les espaces inutiles dans le contenu de l'élément et n'utilisez pas d'espaces à la fin du contenu.
12. Ajoutez des commentaires appropriés pour décrire la fonction
13. Ajoutez TODO pour marquer les éléments à faire. Tels que

• Pommes
• Oranges

14.h5 mid laner N'utilisez pas de formulaire fermé pour les étiquettes, écrivez simplement les étiquettes directement. Par exemple,
ne l'écrivez pas sous la forme
; les éléments multimédias tels que les images, les vidéos, les animations sur toile, etc. garantissent que d'autres contenus accessibles sont fournis. Par exemple,
17. Lors de la référence à la feuille de style, le type spécifie text/css par défaut et peut être omis. Lorsque vous citez un script, le type spécifie le texte/javascript par défaut, qui peut être omis
18. Utilisez des guillemets doubles pour les valeurs d'attribut
19. Le code publié doit être compressé

et CSS
1. Utilisez la réinitialisation. Tout d’abord, clarifiez son rôle, car les valeurs d’attributs par défaut de chaque navigateur sont différentes et la compatibilité doit être prise en compte. N'utilisez pas la réinitialisation globale car elle est inefficace.
2. Dans l'ordre des attributs, ceux qui modifient la mise en page sont écrits devant, comme l'affichage, la marge, le remplissage, la position, et les autres sont écrits à l'arrière (peuvent être classés par ordre alphabétique)
3 . Définissez des noms d'identifiant et de classe significatifs, courts et clairs, utilisez le connecteur
pour plusieurs mots 4. Essayez de définir l'identifiant dans un grand bloc et recherchez des éléments dans le bloc, tels que

...nContenu multiple La recherche peut être effectuée avec #content .title-color{color:red}
5. Utilisez des attributs abrégés, tels que font-family : palatino, georgia, serif ; taille de police : 100 % ; hauteur de ligne : 1,6 ; écrit sous la forme police : 100 %/1,6 palatino, georgia, serif ;
6. Lorsque la valeur de l'attribut est 0, n'ajoutez pas l'unité, telle que padding : 0. 15px;
7. Lorsque la valeur est comprise entre -1 et 1, 0 peut être omis, par exemple font-size:.8em
8. Utilisez un format hexadécimal pour les valeurs de couleur, telles que color: #ebc au lieu de color. : #eebbcc
9. Terminez chaque style par un point-virgule (;)
10 Il doit y avoir un espace entre le sélecteur et {}, et il doit y avoir un espace entre le nom de l'attribut et la valeur de l'attribut (n'oubliez pas de formatez-le lors du codage)
11. Utilisez des guillemets simples pour les valeurs d'attribut et n'ajoutez pas de guillemets aux URI
12. Commentez dans les sections, il n'est pas nécessaire de commenter chaque style (sauf s'il est facile d'être flou )
13. Faites bon usage de l'héritage, définissez des styles sur l'élément parent et les éléments enfants héritent du style. Attributs qui peuvent être hérités, comme commencer par font-, commencer par text-, line-height
14. Lorsque la représentation n'existe pas, essayez d'utiliser display:none au lieu de visible:hidden, car la première n'existe pas. occupe de la mémoire pour l'analyse du navigateur et ce dernier crée de l'espace en mémoire
15. Évitez d'utiliser @import
16. Le code publié doit être compressé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn