11 règles pour garder votre code bien rangé

Écrire des pages Web, c'est comme construire une maison. Les fondations seront solides pour que la maison ne s'effondre pas. La même chose est vraie lorsque nous créons des pages Web. Une bonne structure HTML est le début de la création d'un beau site Web. De même, un bon CSS n'existe qu'en HTML tout aussi bon, donc les avantages d'un HTML propre et sémantique sont nombreux. , y sommes-nous parvenus ? Regardons une photo ensemble :

L'image ci-dessus montre deux morceaux de code. Je pense que tout le monde n'aimera que le premier. Ne parlons pas d'abord de sa sémantique. Au moins, sa structure nous donne un aspect rafraîchissant. Un code qui ressemble à première vue à un mauvais code, un code qui fait que les gens le détestent. Alors, comment pouvons-nous écrire du bon code, du code propre ? Apprenons ensemble des douze aspects suivants. Tant que vous pouvez adhérer aux douze principes suivants lors de l'écriture de code à l'avenir, vous pouvez vous assurer que la qualité de votre code s'améliorera et que le code que vous écrivez sera apprécié de tous.

1. Déclaration de DOCTYPE

Si nous voulons bien faire quelque chose, nous devons d'abord savoir de quels droits nous disposons pour le faire. Tout comme l'instruction "DOCTYPE", nous n'avons pas besoin de discuter de l'opportunité d'utiliser HTML4.01 ou XHTML1.0 ou le HTML5 actuel fournit des informations strictes. Version ou version transitionnelle, celles-ci peuvent bien supporter le code que nous écrivons :

Puisque notre mise en page actuelle peut faire une bonne mise en page sans la mise en page du tableau, nous pouvons envisager de ne pas utiliser le type de transition mais d'utiliser le strict "DOCTYPE". Pour une compatibilité ascendante, je recommande d'utiliser le mode de déclaration HTML5 :

.

Si vous souhaitez en savoir plus, vous pouvez cliquer sur :

1. W3C : DTD recommandées à utiliser dans votre document Web

2. 
   

3. Réparez votre site avec le bon DOCTYPE !

4. 
   

5. Plus de DOCTYPEs de transition, s'il vous plaît

2. Jeu de caractères et caractères codés

Au début de chaque page, nous définissons le jeu de caractères dans Nous utilisons ici "UTF-8"

<meta charset="UTF-8" />

. Et quand on écrit habituellement sur la page, on rencontre souvent des symboles comme "&", il ne faut donc pas écrire "&" directement sur la page :

Nous devons utiliser le codage de caractères dans le code pour y parvenir. Par exemple, "&" nous devons utiliser "&" pour le remplacer dans le code.

Si vous souhaitez en savoir plus, vous pouvez cliquer sur :

1. Wikipédia : UTF-8

2. 
   

3. Un tutoriel sur les problèmes de code de caractères

4. 
   

5. La table ASCII étendue

3. Corriger l'indentation du code

Lors de l'édition de pages, le fait que l'indentation du code soit correcte n'affectera aucune fonction de votre site Web, mais si vous n'avez pas de principe d'indentation standardisé, les personnes qui liront votre code seront très en colère, donc l'indentation correcte du code améliore la lisibilité de votre code. L'indentation d'un programme standard doit être un caractère de tabulation (ou quelques espaces). Pour le rendre plus vivant, jetons un coup d'œil à l'image au début de l'article, ou regardons l'image ci-dessous. vous saurez comment l'utiliser à l'avenir. Comment écrire le code pour que les gens puissent le lire avec plaisir :

Inutile de dire que tout le monde aimera le code ci-dessous. Ce n'est qu'une question d'habitudes, mais il est recommandé de bien le faire dès le début pour le bénéfice des autres et de vous-même. Pour une introduction à cet aspect, vous pouvez également vous référer à : Nettoyer vos pages Web avec HTML TIDY.

4. Liez en externe vos styles CSS et vos scripts Javascript

Il existe de nombreuses façons d'écrire des styles CSS dans la page. Certaines d'entre elles placent directement le style dans le "" de la page. Ce sera une très mauvaise habitude, car cela gâchera non seulement notre balisage, mais également. également ces styles. Convient uniquement à cette page HTML. Par conséquent, nous devons séparer le CSS et l'enregistrer en externe, afin que les pages suivantes puissent également créer un lien vers ces styles. Si votre page doit être modifiée, il nous suffit de modifier le fichier de style. Comme le montre l'image ci-dessous :

Ce dont nous parlons ci-dessus, ce ne sont que des styles. En fait, les scripts JavaScript sont identiques aux styles CSS. Avec des images et des textes, ce que je veux finalement exprimer est "Lorsque vous créez des pages Web, essayez de mettre vos styles CSS et vos scripts javascript dans un fichier séparé, puis référencez ces fichiers via des liens. C'est ainsi que le plus grand avantage est qu'il facilite la gestion et la modification de vos styles et scripts”

. 5. Corriger l'imbrication des étiquettes

Lorsque nous écrivons du HTML, nous avons toujours besoin de l'imbrication hiérarchique des balises pour nous aider à terminer l'écriture du HTML, mais il existe certaines règles pour l'imbrication de ces HTML. Si nous voulons l'expliquer en détail, nous devrons peut-être utiliser plusieurs chapitres. pour le décrire. Donc, ce que je veux dire ici aujourd'hui, c'est que nous ne devrions pas commettre les super erreurs suivantes lors de l'écriture HTML :

La structure de l'image ci-dessus nous est commune. Par exemple, le titre de la page d'accueil, alors nous ne pouvons pas mettre "

" dans la balise "". Je ne peux pas mettre d'éléments et dans des éléments en ligne. Ce qui précède n'est qu'un exemple, j'espère juste que tout le monde ne fera pas de telles erreurs dans la production quotidienne.

6. Supprimez les balises inutiles

Tout d’abord, jetons un coup d’œil à une capture d’écran d’un exemple :

L'image ci-dessus est évidemment la production d'un menu de navigation. Dans l'exemple ci-dessus : il y a un "p#topNav" enveloppant la liste "ul#bigBarNavigation", et les listes "p" et "ul" sont toutes deux des éléments de bloc, plus. "p" utilisé ici pour envelopper "ul" n'a aucun effet. Bien que l'apparition du « p » nous ait apporté de grands avantages dans la création de pages Web, nous n'avons pas besoin de l'utiliser partout. Je me demande si vous faites habituellement attention à de tels détails ? J'ai commis une telle erreur. Si vous avez également vécu une telle expérience, à partir d'aujourd'hui, nous travaillerons ensemble pour corriger ces erreurs.

Pour plus d'informations sur la façon d'utiliser correctement les étiquettes, si vous êtes intéressé, vous pouvez cliquer sur : pitis : qu'est-ce que c'est et comment y remédier.

7. Utilisez une meilleure dénomination

La dénomination mentionnée ici sert à définir des noms de classe ou des noms d'ID pour les éléments pertinents de votre page. De nombreux étudiants ont cette habitude, par exemple, si un élément a une police rouge, ajoutez-y « rouge », ou même une mise en page. Ils écrivent tous « . left-sidebar", etc., mais avez-vous déjà pensé à ce qui se passerait si cet élément était défini avec "rouge" et que le client demandait "bleu" dans quelques jours ? En d'autres termes, la barre latérale "gauche" à cette époque ne voulait plus être placée à gauche, mais à droite. De cette façon, on peut dire que notre nom précédent n'a aucun sens, comme le montre le. image ci-dessous affichée :

Ensuite, il est très important de définir un bon nom. Non seulement je peux comprendre votre code, mais d'autres peuvent aussi facilement comprendre votre code. Par exemple, un bon nom de classe et un bon nom d'ID "mainNav", "subNav", " footer ", etc. ., il peut décrire ce qui se passe. Les mauvais sont comme mentionné précédemment.

Si vous souhaitez en savoir plus, vous pouvez cliquer sur :

1. Standardisation des noms de classe et d'identifiant CSS

2. 
   

3. Astuce CSS n°2 : Convention de dénomination structurelle en CSS

4. 
   

5. Codage CSS : approche sémantique dans la convention de dénomination

6. 
   

7. Conventions de dénomination CSS et style de codage

8. Quitter la version de CSS

Lorsque nous concevons des menus, nous exigeons parfois que le texte de toutes les options de menu soit entièrement en majuscules. Les mettez-vous généralement en majuscules directement dans les balises HTML ? Si c'est le cas, je me sens mal. Si pour une meilleure évolutivité à l'avenir, nous ne devrions pas les mettre tous en majuscules en HTML. Une meilleure solution est d'y parvenir via CSS :

.

9. Définissez le nom de classe ou le nom d'identification de

Je ne sais pas si vous avez rencontré un tel problème lors de la création de pages Web. L'ensemble du site Web utilise la même mise en page et la même structure, vous utilisez la même structure et le même nom de classe dans la mise en page. votre superviseur dit qu'en réponse à la demande des clients, la mise en page d'une page doit être permutée entre la barre latérale et le contenu principal. Pour le moment, vous ne souhaitez pas modifier la structure de la page entière simplement pour changer la mise en page. Une bonne solution consiste à définir un nom de classe ou un nom d'ID spécial dans le "" de votre page. que vous pouvez facilement réaliser ce que vous voulez. Je ne sais pas si vous l'avez utilisé comme ça :

Définir une classe et un nom d'ID uniques pour "" est très puissant, non seulement pour vous aider à modifier la mise en page comme ci-dessus, mais le plus important est que cela peut parfois vous aider à implémenter une certaine partie de la page pour atteindre effets spéciaux. Cela n’affecte pas les performances des autres pages. Je n’ai pas besoin d’expliquer pourquoi il existe une telle fonction, je pense que tout le monde le sait. Parce que le contenu de chaque page est l'élément descendant de "".

Si vous souhaitez en savoir plus, vous pouvez cliquer sur :

1. Identifiez votre corps pour un meilleur contrôle et une plus grande spécificité CSS

2. 
   

3. Étude de cas : Réutiliser des styles avec une classe body

10. Vérifiez votre code

Les gens feront inévitablement des erreurs, et c'est la même chose lorsque nous écrivons du code. Parfois, vous écrivez toujours en minuscules ou en plusieurs mots. Par exemple, vous oubliez de fermer les balises de vos éléments et vous ne vous souvenez pas d'écrire les attributs nécessaires du. éléments. Bien qu'il y ait certaines erreurs qui ne seront pas révélées, quelles que soient les conséquences désastreuses que vous entraînerez, cela vous entraînera également des erreurs que vous ne pouvez pas prévoir. Par conséquent, il est recommandé de vérifier votre code une fois que vous avez fini de l'écrire. Un code vérifié est toujours meilleur qu'un code non vérifié :

Afin de vérifier efficacement votre code, nous pouvons utiliser des outils ou des plug-ins de navigateur pertinents pour nous aider à le compléter. S'il n'y a aucune erreur dans votre code, l'outil de vérification du W3C affichera un texte vert devant vous, ce qui vous rend extrêmement excité, car cela prouve une fois de plus que le code que vous avez écrit peut résister aux normes du W3C.

Si vous souhaitez en savoir plus, vous pouvez cliquer sur :

1. Le service de validation du balisage du W3C

2. 
   

3. Validateur XHTML-CSS

4. 
   

5. Validateur de site gratuit (vérifie l'intégralité du site, pas seulement une page)

11. Séquence logique

Il s'agit d'une situation d'erreur rare, car je pense que tout le monde ne perturbera pas l'ordre logique lors de la rédaction des pages. En d'autres termes, si possible, il est préférable d'avoir un ordre logique pour votre site Web, par exemple écrire d'abord l'en-tête, puis le corps. , et enfin le pied de page. Bien sûr, nous rencontrons parfois des circonstances particulières. La partie pied de page se trouve au-dessus de la barre latérale de notre code. Cela peut être dû au fait qu'elle correspond le mieux aux besoins de conception de votre site Web, mais si vous avez d'autres moyens de l'implémenter, nous devrions le faire. placez le pied de page à la fin d'une page, puis utilisez des techniques spécifiques pour qu'il réponde à vos besoins de conception :

Ci-dessus, nous avons discuté de plusieurs façons de vous aider à commencer à écrire du code HTML propre. Dès le début d’un projet, c’est très simple, mais si vous devez corriger un code existant, ce sera plus ou moins difficile. Ce que j'ai dit ci-dessus est principalement de vous expliquer comment apprendre à écrire un bon code HTML propre et à vous y tenir. J'espère qu'après avoir lu cet article, vous pourrez repartir de zéro et insister pour écrire un code HTML propre dans votre prochain projet.

Documents associés : 10 erreurs de balises HTML les plus courantes

Source en anglais : 12 principes pour garder votre code propre

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!