Directives de révision de code pour CSS, JS et HTML

On m'a demandé de créer des lignes directrices pour la révision CSS, JS et HTML. Je sais qu'il existe des directives de codage pour JS, mais je n'en connais pas sur HTML et CSS. Pour revoir JS, je vais certainement suivre ces directives et les mentionner. Mais qu'en est-il du CSS et du HTML? Mis à part les erreurs logiques et les problèmes d'indentation, y a-t-il des choses spécifiques que je dois vérifier lorsque je passe en revue le balisage et / ou CSS?

Quelques éléments à rechercher:

• Les informations structurées sont-elles identifiées à l'aide des balises HTML appropriées? H1- H6pour les titres, UL/ OLet LIpour les listes, etc.?
• Aucune balise HTML existant ( <b>, <i>, <center>, par exemple <font>)?
• Le site utilise-t-il le moins de balisage possible?
• Les informations de style sont-elles externalisées dans des fichiers CSS?
• Tout Javascript est-il externalisé? y compris les gestionnaires d'événements?
• Les noms de classe CSS font-ils référence à la fonction dans la page ( img-caption), et non à form ( bold-red) ou content ( pink-elephant)?
• Les images sont-elles au format approprié (PNG ou JPEG, selon le type)?
• Des versions minimisées des bibliothèques Javascript ont-elles été utilisées?
• Facultativement, tous les fichiers Javascript et CSS développés localement ont-ils été minimisés?
• Le HTML / CSS valide-t-il?
• YSlow (ou similaire) at-il été utilisé pour vérifier / optimiser les performances?
• (principalement) [SEO] Le site est-il accessible avec Javascript désactivé?
• [SEO] Le contenu le plus pertinent se trouve-t-il en haut du HTML?

Un des éléments importants d'un bon style en HTML est l'amélioration progressive . Cela signifie que la mise en page HTML sera bonne même sans CSS ou JavaScript. Ensuite, une fois JS / CSS traités, ils seront plus beaux (par exemple, la <select>liste déroulante HTML à l'ancienne deviendra animée).

Cela concerne également le balisage non intrusif. Au lieu d' <font style="color:red;font-size:16pt">Hello</font>un utiliserait <div class="red-colored-big-fond">Hello</div>.

Même chose avec JavaScript. Au lieu de l' <button onclick="javascript:alert('a');">Clickme</button>un, il faudrait spécifier une classe de bouton / ID et la cibler à partir de JavaScript. Cela facilite également la maintenance de votre code de balisage.

Validez que la moindre quantité de balisage est utilisée pour accomplir la tâche. Assurez-vous que le balisage est également sémantique, ne l'utilisez pas lorsqu'une balise fait exactement la même chose et donne plus d'informations. Validez que les étendues ne sont pas faites d'éléments de bloc et vice-versa.

De plus, alex soulève un grand point de manière détournée. Assurez-vous que personne n'utilise des noms de classe comme "red-coloured-big-font", car environ 20 secondes après son déploiement pour de vrai, quelqu'un va le changer en une petite police bleue. J'ai effectivement vu ce CSS:

.arial12pt { font-family: Verdana; font-size: 8pt; }

Tout dans votre balisage doit décrire ce qu'est la page, pas à quoi elle ressemble. Je suis définitivement d'accord sur l'amélioration progressive, mais encore une fois de manière détournée. La page n'a aucune exigence pour regarder n'importe où près de la même chose avec CSS que sans elle. N'essayez pas de les faire ressembler, car vous vous retrouverez dans table-land et spacer.gif.

En ce qui concerne HTML, je tiens toujours à avoir des hiérarchies et des retraits dans mes fichiers. Par exemple, si j'ai un tas de divs:

<div id="content">
   <div id="post">
     <div class="title">
       Blah Blah Title
     </div>
   </div>
</div>

Je suppose que c'est assez évident pour la plupart de ceux qui créent des mises en page et des modèles, mais le plus souvent, je vois juste du HTML tronqué qui n'a aucune hiérarchie structurelle, ce qui rend la lecture difficile pour une autre personne. Je suppose que venant d'un arrière-plan plus CS, c'est quelque chose qui me reste à l'esprit. Il en va de même pour CSS. Disons que vous stylisez un div:

#whatever{
    background-image: url('blah.gif');
    color: #FFF000;
}

L'indentation facilite la lecture rapidement lorsque vous êtes habitué à une autre langue mélangée comme PHP / Ruby / Whats. Encore une fois, cela dépend de la façon dont vous travaillez le mieux, mais lorsque d'autres lisent mon code HTML, j'aime le rendre vraiment organisé :).

De plus, comme indiqué ci-dessus, c'est toujours une bonne idée de nommer vos classes CSS et ids des noms pertinents pour votre mise en page, surtout quand il devient poilu (un peu comme nommer des variables et des méthodes dans d'autres langues). Une autre chose à surveiller est la redoutable «deviner et vérifier» des marges, des rembourrages et d'autres problèmes d'alignement. Quelque chose que j'essaie souvent d'éviter est de mettre des nombres négatifs dans mes marges et mes rembourrages. Cela peut devenir déroutant si vous n'avez pas fait la mise en page vous-même et si vous souhaitez y revenir plus tard et la modifier, vous devrez peut-être la réviser. À mon avis, c'est toujours une bonne idée de ne rien essayer de hokey ou de "kludgy" en CSS, même si c'est joli; il y a généralement une meilleure façon de le faire, même si vous devez restructurer votre CSS!

Pour Javascript, je voudrais toujours qu'il soit validé avec JSLint, je peux penser à tant de bugs que JSLint attrape que ne pas l'utiliser est juste fou.

Je suis tombé sur ce document de normes que j'ai plutôt aimé. Je ferai également écho à ce qui a été dit à propos de l'amélioration progressive. En général, si quelqu'un d'autre écrit le code HTML / CSS, vous devriez pouvoir le regarder plus tard sur la ligne et être agréablement surpris de voir à quel point le balisage n'est pas mauvais et devrait être capable de faire des ajustements de style simples facilement et efficacement.