12 bonnes pratiques de HTML et CSS

Le code d’écriture est facile, la chose difficile est d’écrire un code de qualité propre et bien rangé. Pour atteindre cet objectif, la méthodologie est nécessaire, qui est acquise avec expérience. Habituellement, ce processus implique une pratique et une longue période, entraînant plusieurs fois accablant. Heureusement, il existe une série de bonnes pratiques qui peuvent être orientées (surtout quand nous commençons) et que je me suis beaucoup aidé à commencer.

Dans cet article, nous verrons 12 bonnes pratiques de HTML et CSS très facile à appliquer et ils amélioreront la qualité de notre code.

Link mieux que @Import

Pour inclure des feuilles de style sur notre HTML, il est préférable d’utiliser des balises de liaison cela fournit la langue elle-même. Notez que le nombre plus de feuilles de feuilles prendra la page à charger.

Utilisez des classes au lieu d’identifiants

the Ne contribuez pas non plus avantage au-delà de cela, ils ne peuvent pas (ou ne devraient pas) être répétés. Lors de l’application de styles sur nos éléments, il est préférable d’attribuer des cours. Cela ne signifie pas que les identifiants ne doivent pas être utilisés, ils sont tout à fait utiles pour JavaScript, car ils permettent d’accéder aux éléments DOM consommant peu de ressources.

en résumé, réservez les identifiants pour votre JavaScript et le reste Nom avec des cours De cette façon, vous n’aurez pas à vous rappeler que si vous attribuez un identifiant ou une classe, et vous perdrez moins de temps.

noms de classe

Il existe de nombreuses formes et recommandations pour nommer les classes . Personnellement, j’utilise la nomenclature BEM, car il est très auto-descriptif et est assez standardisé.

Il est également recommandé que les classes d’état (qui sont celles que nous affectons avec JavaScript pour manipuler des styles dans une certaine situation ) Avoir un nom similaire, par exemple: is-hide, is-show, , etc.

Évitez de déclarer des styles en ligne

lorsque nous créons un code HTML, nous devons penser que seule la structure de la page doit être définie, pas les styles.

<span style="color: blue">Texto</span>

Ce code HTML a déclaré un style en ligne, qui crée non seulement une confusion à une autre personne lisant le code, mais écrase également tout style attribué par CSS. . La chose recommandée est d’attribuer une classe et d’appliquer des styles dans le CSS.

Cependant, il existe des occasions dans lesquelles il est utile de déclarer des styles en ligne: lorsque nous les définissons via JavaScript (pour créer des effets de parallaxe par exemple ) Ou quand nous écrivons un élément sur un CMS et que nous voulons qu’un élément ait un style très spécifique.

réinitialiser toujours les styles

navigateurs par défaut Ajouter des marges et certains styles à base de base Étiquettes de HTML Le problème est que tous les navigateurs n’appliquent pas les mêmes styles, ce qui peut parfois découvrir nos conceptions. La solution est réinitialisée les styles et, pour cela, les plus connus sont normalisés ou réinitialisés. Qui choisir? La différence entre ces deux est que le premier est responsable de l’application des styles de base afin qu’ils soient les mêmes pour tous les navigateurs tandis que la seconde élimine les marges de tous les éléments. Personnellement, je préfère généralement la seconde mais avec une petite addition:

 » 5494A47681 « > C’est une propriété qui modifie le comportement du navigateur par défaut lorsque les dimensions d’un élément sont définies. Un exemple rapide: si nous attribuions un conteneur A width de 200px, puis nous ajoutons un bord de 2px, ce conteneur occupera . Étrange, non? Ce qu’il fait box-sizing: border-box est juste que par beaucoup de bord que nous vous ajoutons continuons à mesurer 200px

Commentaire CSS

Les langages de programmation sont conçus pour les comprendre une machine, pas l’humain. Nous devons penser à notre futur auto ou à une autre personne qui peut lire notre code, pour cette raison qu’il est toujours bon de quitter des commentaires.

/* Esto es un comentario simple */

>

C’est aussi une bonne idée d’entrer les sections avec des commentaires sous la forme d’un bloc:

/*------------------------------------*\ HEADER STYLES\*------------------------------------*/

Le 0 n’a pas d’unité

chaque fois qu’une valeur est nulle, la bonne chose n’est pas d’indiquer une unité. Il est incorrect d’utiliser 0px ou

p { color: red !important;}. . .p { color: blue;}

h1 { font-size: 2.5em; font-weight: 800;}h2 { font-size: 2em; font-weight: 800;}