Comment écrire du code HTML et CSS flexible, stable et de haute qualité

Cette fois, je vais vous expliquer comment écrire du code HTML et CSS flexible, stable et de haute qualité, et quelles sont les précautions pour écrire du code HTML et CSS flexible, stable et de haute qualité. est le combat réel. Jetons un coup d'œil au cas.

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. Les éléments imbriqués doivent être mis en retrait (deux espaces) ; définition des attributs, assurez-vous d'utiliser tous les guillemets doubles, jamais de guillemets simples ;
4. N'ajoutez pas de barre oblique à la fin d'un élément à 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. chaque déclaration de page HTML, cela peut garantir qu'il y a un affichage 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. pour définir la langue correcte pour le texte. Cela aidera l'outil de synthèse vocale à déterminer la prononciation à utiliser, aidera l'outil de traduction à déterminer les règles à suivre lors de la traduction, etc. liste d'attributs de langue : http://www.sitepoint .com/web-foundations/iso -2-letter-lingual-codes/

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 À moins qu'il n'y ait une exigence forte, il est préférable qu'il soit réglé sur le mode Edge, ce qui oblige IE à adopter le dernier mode qu'il prend en charge

4. Encodage des caractères :

En déclarant l'encodage des caractères, cela peut garantir que le navigateur peut déterminer rapidement et facilement le rendu du contenu de la page. Cela peut éviter d'utiliser des balises d'entité de caractère en HTML, afin que tout soit cohérent avec l'encodage du document

5. Introduire le CSS. et fichiers JavaScript :

Selon la spécification HTML5, il est normal d'introduire des fichiers css et JavaScript. Il n'est pas nécessaire de spécifier l'attribut type, car text/css et text/javascript sont respectivement leurs valeurs par défaut. 🎜>
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.

7. Ordre des attributs :
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 doit donc être classée en premier.

8. Réduisez le nombre de balises
Lors de l'écriture de code HTML, essayez d'éviter les éléments parents redondants. Plusieurs fois, cela nécessite la mise en œuvre d'itérations et de reconstructions

9. générés par JavaScript rendent le contenu difficile à trouver et à modifier et affectent les performances autant que possible

10. Syntaxe CSS :

1. ;
2. Lors du regroupement de

sélecteurs

, placez des sélecteurs séparés Une ligne
3 Pour la lisibilité du code, ajoutez un espace entre l'accolade gauche de chaque bloc de déclaration ; L'accolade droite du bloc de déclaration doit être sur une ligne distincte ;
5. Chaque instruction Déclaration : un espace doit être inséré après elle 6. être sur sa propre ligne ; 7. Toutes les instructions de déclaration doivent se terminer par un point-virgule, et la dernière instruction de déclaration Le point-virgule suivant est facultatif, mais si vous omettez ce point-virgule, le code peut être plus facile à écrire ; . Pour les valeurs d'attribut séparées par des virgules, un espace doit être inséré après chaque virgule ;
9. Pour les valeurs d'attribut ou les paramètres de couleur, omettez le 0 devant les décimales inférieures à 1 (par exemple, 0,5 au lieu de 0,5). );
10. Les valeurs hexadécimales doivent être toutes en minuscules, par exemple : #fff, essayez d'utiliser la forme hexadécimale abrégée
11. Ajoutez des guillemets doubles aux attributs sélectionnés, tels que input[type="text". "];
12. Évitez de spécifier des unités pour les valeurs 0, telles que margin :0 au lieu de margin:0px.

11. Ordre de déclaration :

Les déclarations d'attributs associés doivent être regroupées et disposés dans l'ordre suivant :

1. positionnement(position : absolue ; haut : 0 ; bas : 0 ; droite : 0 ; gauche : 0 ; z-index : 100 ;

2. modèle de boîte (affichage : bloc ; flotteur : gauche ; largeur : 100 px ; hauteur : 100 px ; ) 3.typographic (police : normal 13 px « Microsoft YaHei » ; hauteur de ligne : 1,5em ; couleur : #333 ; texte -align:center;);

4.visual(background : jaune; border: 1px solid #c00; border-radius: 3px; opacity: 1; );

　

En raison du positionnement, les éléments peuvent être supprimé du flux de documents normal et peut également remplacer les styles liés au modèle de boîte (modèle de boîte), il est donc classé en premier. Le modèle de boîte est classé en deuxième position, car il détermine la taille et la position du composant. D'autres attributs de connaissance affectent l'interne. (à l'intérieur) du composant ou n'affecte pas les deux premiers ensembles d'attributs, il se classe donc 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 :
1. . Utilisez plusieurs éléments ;
2. Convertissez plusieurs fichiers CSS en un seul fichier via un préprocesseur CSS similaire à sass ou moins
3. Fournissez des fichiers CSS via Rails, Jekyll ou d'autres fonctions de fusion.

13. Position de la requête multimédia (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 document Bottom.

14. Attributs préfixés :
Lors de l'utilisation des attributs préfixés d'un fabricant spécifique, la valeur de chaque attribut est alignée verticalement grâce au verrouillage, ce qui est beaucoup plus pratique. Édition de ligne

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 sur la même ligne. Pour les styles avec plusieurs déclarations, ou si la déclaration est divisée en plusieurs lignes. Le facteur à prendre en compte est la détection d'erreurs. Par exemple, le validateur CSS a une
erreur de syntaxe à la ligne 180. S'il s'agit d'une déclaration sur une seule ligne, vous ne le ferez pas. Cette erreur sera ignorée. déclarations sur une seule ligne, vous devez analyser soigneusement pour éviter les erreurs manquantes

16. Imbrication dans Less et Sass

Évitez l'imbrication inutile, car même si vous pouvez utiliser l'imbrication, cela ne signifie pas cela. vous devez utiliser l'imbrication. Uniquement lorsque le style doit être limité à l'élément parent (c'est-à-dire
sélecteur descendant) et que plusieurs éléments d'imbrication doivent être imbriqués. L'imbrication ne peut être utilisée que par les ingénieurs qui ont éléments imbriqués.

17. Remarque :

Le code est écrit et maintenu par des personnes. Veuillez vous assurer que votre code est auto-descriptif, bien commenté et facile à comprendre pour les autres. contexte et objectif du code ;
Ne vous contentez pas de réitérer 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. Dénomination des classes

Seuls les petits caractères et les tirets peuvent apparaître dans les noms de classe (pas de soulignement ni de casse). Les tirets doivent être utilisés pour nommer les classes associées (similaire à
Namespace, comme .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 ; 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 la classe .js-* pour identifier les comportements (par opposition aux styles) et n'incluez pas. ces classes dans des fichiers CSS ;
Vous pouvez également vous référer aux spécifications répertoriées ci-dessus pour nommer les variables sass et moins.

19. Le sélecteur

utilise la classe pour les éléments communs, ce qui est bénéfique pour l'optimisation. des performances de rendu ;
Pour les composants fréquents, évitez d'utiliser le sélecteur d'attribut
(par exemple : [class^="···" ]), les performances du navigateur seront affectées par ces facteurs ; >Le sélecteur doit être le plus court possible et essayez de limiter le nombre d'éléments qui composent le sélecteur. Utilisez-le uniquement lorsque la classe nécessaire est limitée à l'élément parent le plus proche. 🎜>
20. Organisation du code :
organiser les segments de code en unités de composants ;

spécifier des spécifications de commentaires cohérentes

utiliser des espaces cohérents pour séparer le code en morceaux, ce qui facilite la numérisation de documents plus volumineux ;
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 ne seront déplacés

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour plus de passionnant. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture connexe :

Dans un framework responsive, comment gérer le retour à la ligne automatique des en-têtes de tableau

Comment faire Bordures d'affichage des tableaux

Comment les tableaux HTML doivent-ils être disposés

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!