Règle d'or
Suivez toujours le même ensemble de normes de codage. Quel que soit le nombre de personnes travaillant sur le même projet, assurez-vous que chaque ligne de code semble avoir été écrite par la même personne.
1. Grammaire :
1. Utilisez deux espaces pour remplacer le caractère de tabulation (tabulation)
2. . Pour les définitions d'attributs, assurez-vous d'utiliser des guillemets doubles, jamais des guillemets simples ;
4. N'ajoutez pas de barres obliques à la fin des éléments à fermeture automatique - spécification HTML5 (
https://dev. w3.org. /html5/spec-author-view/syntax.html#syntax-start-tag) indique clairement que ceci est facultatif 5 N'omettez pas la balise de fermeture facultative
6. Ajoutez une norme ; déclaration de mode à la première ligne de chaque page HTML pour garantir qu'elle soit affichée dans chaque navigateur
2. Attribut de langue : Selon la spécification HTML5, il est recommandé de spécifier l'attribut lang pour l'élément racine HTML afin de définir la langue correcte pour le texte. l'outil de synthèse détermine la langue à utiliser. La prononciation de , aide les outils de traduction à déterminer les règles à suivre lors de la traduction, etc. Liste des attributs lang : http://www.sitepoint.com/web-foundations/iso-2-letter -codes-langues/
3. Mode de compatibilité IE : IE prend en charge l'utilisation de balises spécifiques pour déterminer la version d'IE que la page actuelle du reçu doit utiliser. Sauf exigence stricte, il est préférable de la définir. en mode Edge. Déterminant ainsi IE d'adopter le dernier mode qu'il prend en charge.
4. Codage des caractères :
En déclarant le codage des caractères, cela peut garantir que le navigateur peut déterminer rapidement et facilement la méthode de rendu du contenu de la page. Cela peut éviter d'utiliser des balises d'entité de caractère dans. HTML, donc Tous sont cohérents avec l'encodage du document.
5. Importez des fichiers CSS et JavaScript : Selon la spécification HTML5, il n'est généralement pas nécessaire de spécifier l'attribut type lors de l'introduction de fichiers CSS et JavaScript, car text/css et text/ javascript sont leur valeur par défaut respective.
6. L'aspect pratique est roi : Essayez de suivre les normes et la sémantique HTML, mais ne sacrifiez pas l'aspect pratique. Essayez d'utiliser le moins de balises et de maintenir le minimum de complexité à tout moment.
Les attributs HTML doivent être disposés dans l'ordre suivant pour garantir la lisibilité du code : 1.class
2.id,name
3.data-*
4.src,for,type,href
5.title,alt
6.Aria,role
la classe est utilisée pour marquer les composants hautement réutilisables, elle devrait donc être disposé Au sommet.
Lors de l'écriture de code HTML, essayez d'éviter les éléments parents redondants. Souvent, cela nécessite une itération et une refactorisation.
Les balises générées par JavaScript rendent difficile la recherche et la modification du contenu et réduisent les performances .
1. Utilisez deux espaces pour remplacer le caractère de tabulation (tabulation) 2. 🎜>3. Pour la lisibilité du code, ajoutez un espace entre l'accolade gauche de chaque bloc de déclaration
4. L'accolade droite du bloc de déclaration doit être sur une ligne distincte ; Un espace doit être inséré après ;
6 Afin d'obtenir un rapport d'erreurs plus précis, chaque instruction doit être sur sa propre ligne
7. Toutes les instructions de déclaration doivent se terminer par un point-virgule ; le point-virgule après l'instruction est facultatif, mais si vous omettez ce point-virgule, le code peut être plus facile à écrire ;
8. Pour les valeurs d'attribut séparées par des virgules, un espace doit être inséré après chaque virgule
9 . les valeurs ou les paramètres de couleur, omettez le 0 devant les décimales inférieures à 1 (par exemple, .5 au lieu de 0,5)
10. Les valeurs hexadécimales doivent être toutes en minuscules, par exemple : #fff, essayez de ; utilisez la forme hexadécimale abrégée Valeur de base, par exemple, utilisez #fff au lieu de #ffffff ; ajoutez des guillemets doubles aux attributs sélectionnés, tels que input[type="text"] ; unités pour les valeurs 0, par exemple, utilisez margin:0 au lieu de margin:0px.
11. Ordre de déclaration :
Les déclarations de propriété associées doivent être regroupées et classées dans l'ordre suivant :
1.positioning(position : absolue ; haut : 0 ; bas : 0 ; droite : 0 ; gauche : 0 ; z-index : 100 ; 2.box model (affichage : bloc ; float : gauche) ; largeur : 100px ; hauteur : 100px ;); 3.typographic(police : normal 13px « Microsoft YaHei » ; hauteur de ligne : 1,5em ; couleur : #333 ; text-align:center;
) 4.visual(background: jaune; border: 1px solid #c00; border-radius: 3px; opacity: 1; );Les éléments peuvent être supprimés du flux normal de documents en raison du positionnement, et ils peuvent également couvrent les styles liés au modèle de boîte, il est donc classé en premier. Le modèle de boîte est classé en deuxième, car il détermine la taille et la position du composant. D'autres connaissances sur les attributs affectent l'intérieur du composant ou ne l'affectent pas. deux ensembles d'attributs sont donc classés derrière.
12. N'utilisez pas @import
Par rapport aux balises, la commande @import est beaucoup plus lente. Elle augmente non seulement le nombre de requêtes supplémentaires, mais provoque également des problèmes imprévisibles. En voici quelques-uns :
1. Utilisez plusieurs éléments ;
2. Convertissez plusieurs fichiers CSS en un seul fichier via un préprocesseur CSS similaire à sass ou moins ;
3. fonction de fusion de fichiers CSS.
13. Position de la requête multimédia
Placez les requêtes multimédias aussi près que possible des règles pertinentes. Ne les regroupez pas dans un seul fichier de style et ne les placez pas dans le bas du document.
14. Attributs préfixés :
Lors de l'utilisation des attributs préfixés d'un fabricant spécifique, il est pratique de verrouiller les valeurs de chaque attribut dans le sens vertical. exemple :
15. Déclaration de règle sur une seule ligne :
Pour les styles dont la valeur contient une déclaration, par souci de lisibilité et d'édition rapide, il est recommandé de mettre l'instruction For sur la même ligne. styles avec plusieurs styles de déclarations, la déclaration doit toujours être divisée en plusieurs lignes. Le facteur clé pour cela est la détection des erreurs. Par exemple, il y a une erreur de syntaxe dans le validateur CSS à la ligne 180. S'il s'agit d'une seule ligne et. une seule déclaration, vous n'ignorerez pas cette erreur. S'il y a plusieurs déclarations sur une seule ligne, vous devez les analyser attentivement pour éviter les erreurs manquantes.
16. Nesting dans Less and Sass Évitez l'imbrication inutile, car même si vous pouvez utiliser l'imbrication, cela ne signifie pas que vous devez utiliser l'imbrication uniquement lorsque le. le style doit être limité à l'élément parent (c'est-à-dire le sélecteur descendant) et plusieurs éléments doivent être imbriqués
.
17. Commentaires : Le code est écrit et maintenu par des personnes. Assurez-vous que votre code est auto-descriptif, bien commenté et facile à comprendre pour les autres. et le but du code ;
Ne reformulez pas simplement les noms de composants ou de classes
Pour les commentaires plus longs, assurez-vous d'écrire des phrases complètes, et pour les commentaires généraux, vous pouvez écrire des phrases d'introduction.
18. Nommage des classes Seuls les petits caractères et les tirets peuvent apparaître dans les noms de classes (pas de soulignement ni de casse). Les tirets doivent être utilisés pour nommer les classes associées (similaires aux espaces de noms, tels que . btn et .btn-danger)
Évitez les abréviations excessivement arbitraires. .btn représente un bouton, mais .s ne peut exprimer aucune signification
Les noms de classe doivent être aussi courts que possible et avoir une signification claire
Utilisez des noms significatifs ; , utilisez des noms organisés ou utiles, n'utilisez pas de noms expressifs ;
Préfixez les nouvelles classes en fonction de la classe la plus récente ou de la classe de base
Utilisez les classes .js-* pour identifier les comportements (par opposition aux styles) ; ne pas inclure ces classes dans les fichiers CSS ;
Vous pouvez également vous référer aux spécifications répertoriées ci-dessus lorsque vous nommez sass et moins de variables.
19. Sélecteurs Utilisez la classe pour les éléments communs, ce qui aidera à optimiser les performances de rendu
Pour les composants fréquents, évitez d'utiliser des sélecteurs d'attributs (par exemple : [class^ ="· ··"]), les performances du navigateur seront affectées par ces facteurs ;
Faites en sorte que le sélecteur soit le plus court possible, et essayez de limiter le nombre d'éléments qui composent le sélecteur. Il est recommandé de ne pas dépasser 3 ;
Seulement Limitez uniquement les classes à l'élément parent le plus proche lorsque cela est nécessaire
.
20. Organisation du code : Organisez les segments de code en unités de composants ;
Spécifiez des spécifications de commentaires cohérentes
Utilisez des espaces cohérents pour séparer le code en blocs, de manière à faciliter la numérisation de plus grandes dimensions ; documents ;
Si plusieurs fichiers CSS sont utilisés, divisez-les en composants plutôt qu'en pages, car les pages seront réorganisées et les composants seront uniquement déplacés.
Texte original :
Comment éliminer le code HTML
Quels sont les quatre principaux modèles d'E/S en Java ?
Quelles sont les méthodes pour changer instantanément l'IP dans les vps dynamiques ?
Connecté mais impossible d'accéder à Internet
Introduction à la signification d'un mot de passe invalide
Classement des applications de la plateforme de trading de devises virtuelles
Pourquoi le wifi a-t-il un point d'exclamation ?
Comment retirer de l'argent sur WeChat sans frais de gestion
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
