Avec CSS, nous pouvons gérer les media queries, mieux utiliser les propriétés Background et les animations pour accélerer le chargement de nos pages web. Cela étant dit, tous les développeurs ne suivent pas les meilleurs pratiques CSS. Si vous voulez être un bon développeur développeur web ou designer, écrire du code CSS propre est une excellente habitude pour rendre votre code facilement maintenable.

Voyons donc les techniques qui vous aideront à tirer le plus profit de CSS et vous aider à écrire de magnifiques styles CSS.

Mauvaises pratiques CSS

Utiliser la même règle indéfiniment

De nombreux débutants utilisent des règles répétitives pour chaque élément. Si vous souhaitez créer une règle pour plusieurs éléments, utilisez plutôt un attribut de classe.

Par exemple, au lieu de répéter la propriété color: blue pour chaque balise et ID:

Utilisez un ID pour de multiples éléments

Utilisez toujours un seul ID dans votre HTML

Au lieu de:

<p id="big">This is a great heading.</p>

<p ​id="big">This is absolutely a greater heading.</p>

Utilisez plutôt

<p class="big">This is a great heading.</p>

<p ​class="big">This is absolutely a greater heading.</p>

 

Abuser de la valeur !important

La valeur !important a été écrite entre le milieu et la fin des années 90 pour aider les concepteurs Web et les développeurs à remplacer les règles de leur feuille de style. La valeur !important prévaut sur tous les styles précédents et dit: « Je suis plus important, oubliez tous ces autres CSS et utilisez-moi ! «. Utiliser cela par paresse vous donnera un mal de tête plus tard car votre feuille de style sera plus difficile à maintenir.

Par exemple:

header {
    color: #e74c3c;
}
header.intro {
    color: ​#3498db !important;
  ​font-size: 20px;
}
header#capture {
  ​color: ​#2ecc71;
  ​font-size: 20px;

}

Dans l’exemple ci-dessus, la couleur de l’en-tête est le rouge. Sauf l’en-tête avec la classe intro et celui avec l’ID capture. L’importance de la règle entière (à la fois le color et font-size dans ce cas) est accomplie par la spécificité du sélecteur.

Si vous utilisez !important, il est ajouté au niveau de la propriété et non au niveau du sélecteur. Cela signifie que la propriété color a une importance plus élevée que la taille de la police. La couleur est également plus importante que la couleur dans le sélecteur header#capture.

Recommandation: vous ne devez utiliser la valeur !important que lorsque vous remplacez les styles dans une feuille de style utilisateur, remplacez le code tiers et les styles inline ainsi que les classes utilitaires.

L’utilisation de la valeur !important est souvent considérée comme une mauvaise pratique en raison de l’encombrement qu’elle peut entraîner avec l’un des mécanismes de base de CSS qui est la spécificité.

 

Utiliser des styles inline

L’utilisation des styles inline est probablement l’une des pires pratiques CSS que de nombreux designers et développeurs Web appliquent encore à ce jour. Il transgresse l’objectif principal de la raison pour laquelle nous utilisons CSS – qui est de séparer le style de la structure HTML. Cela brise la spécificité des pages Web.

Il est considéré comme une bonne habitude de séparer votre CSS et votre HTML. Lorsque vous ajoutez des styles inline, cela complique la maintenance de votre site et rend votre code plus difficile à gérer.

Cependant, vous pouvez utiliser le CSS inline pour les e-mails HTML car de nombreuses règles ne sont pas prises en charge par les clients de messagerie. C’est une chose importante si vous créez des designs de newsletter.

Dans l’ensemble, les styles inline sont au niveau le plus bas de la cascade car ils remplaceront tous les autres styles, vous devez donc être prudent lorsque vous les utilisez.

Bonnes pratiques CSS

Rendez votre CSS lisible

Il y a deux facons de rendre votre code CSS lisible

1 – format une ligne

.box {background: #3498db; border: 1px solid black;}

 

2 – format standard

.box {
background: #2ecc71;
border: 1px solid black;
}

Utiliser un CSS reset

Un CSS Reset (ou «Reset CSS») est un ensemble compressé ou réduit de règles CSS qui réinitialise tous les styles de votre HTML. L’ajout d’une réinitialisation réduit les incohérences du navigateur en fournissant des styles généraux qui peuvent être modifiés et étendus.

Le MeyerWeb est la réinitialisation CSS la plus populaire et la plus largement utilisée, bien qu’il existe une autre option qui est normalize.css de Nicolas Gallagher. C’est une sorte de réinitialisation CSS HTML5 moderne. Vous pouvez utiliser une réinitialisation CSS en plaçant le lien du fichier source dans votre fichier HTML ou en copiant toute la réinitialisation CSS dans votre feuille de style.

Combiner les éléments

Si les éléments de votre feuille de style partagent les mêmes règles, vous pouvez simplement les combiner tous sur une seule ligne ou sous une forme standard au lieu de réécrire le code encore et encore.

Par exemple, votre h1, h2 et des éléments h3 pourraient tous partager la même famille de polices et de couleurs

h1, h2, h3 {font-family: 'Lato', sans-serif; color: #dadada;}

Toujours utiliser des commentaires

L’une des meilleures pratiques pour écrire du CSS consiste à placer un commentaire sur chaque groupe d’éléments. Cela vous donnera une facilité d’accessibilité lorsque vous recherchez un groupe spécifique.

/* GENERAL RULE */

html,

body {

font-family: 'Lato', sans-serif;

height: ​100%;

background: ​#ecf0f1;

overflow: hidden;

}

h1 {

color: ​#3498db;

text-align: center;

font-size: ​35px;

margin: ​100px 0px;

font-weight: 7
}

 

Utiliser des préprocesseurs

C’est un sujet brûlant ces derniers temps.

Il existe trois préprocesseurs CSS principaux disponibles aujourd’hui, Sass, LESS et Stylus. L’utilisation d’un préprocesseur peut aider à accélérer votre processus de développement car il minimise les tâches répétitives telles que le placement de valeurs de couleur hexadécimales, etc. que tous les designers et développeurs Web rencontrent souvent.

Sources:

Vous êtes libre de recevoir mon cours gratuit sur les fondations du coding et le problem solving

* indicates required