Travailler avec des feuilles de style en cascade (CSS) peut être difficile pour les débutants. À l'aide de CSS, vous pouvez structurer, mettre à jour et conserver l'apparence de votre application. Mais le langage nécessite des compétences pour manipuler les pages HTML afin d'obtenir la mise en page souhaitée.
Voici quelques erreurs à éviter lorsque vous travaillez avec CSS. Ils vous feront gagner du temps et faciliteront votre processus de développement.
1. Utilisation de px pour les tailles de police
L'unité "px" représente les pixels. Vous pouvez l'utiliser pour exprimer différentes longueurs sur une page Web, de la largeur et de la hauteur d'un élément à sa taille de police.
Cependant, px verrouille votre conception à une taille fixe pour tous les écrans. Une image en px peut occuper toute la largeur d'un écran, et seulement une petite partie d'un autre. Si vous voulez un élément plus proportionnel,
utiliser des mesures relatives tels que rem ou pourcentages (%).La meilleure mesure relative à utiliser est rem. Cette unité fait référence à la taille de police de l'élément racine qu'un lecteur peut souvent définir dans les paramètres de son navigateur. Vous pouvez voir l'impact de px et rem sur un élément dans l'exemple suivant :
html>
<HTML>
<diriger>diriger>
<corps>
<h1>C'est la rubrique 1h1>
<h2>C'est la rubrique 2h2>
<p>Ceci est un paragraphe.p>
<p>Ceci est un autre paragraphe.p>
corps>
html>Vous pouvez styliser les tailles de police dans ce document en utilisant des unités px avec le CSS suivant :
h1 {
taille de police: 50pixels;
}h2 {
taille de police: 30pixels;
}
p {
taille de police: 15pixels;
}
La page résultante semble acceptable lorsque vous la visualisez sur un grand écran :
Mais ça n'a pas l'air présentable sur un écran plus petit, comme sur un téléphone :
Ensuite, appliquez rem sur le même contenu. Spécifiez une taille de police de base sur l'élément html et dimensionnez les autres éléments à l'aide de rems, comme illustré ci-dessous :
html {
taille de police: 16pixels;
}h1 {
taille de police: 3rem;
}h2 {
taille de police: 2rem;
}
p {
taille de police: 1rem;
}
Remarquez la différence entre les grands et les petits écrans. Avec rem, le contenu s'adapte mieux quelle que soit la taille de l'écran. Les éléments ne dépasseront jamais la taille d'écran définie. C'est pourquoi il est préférable d'utiliser des longueurs relatives plutôt que des pixels.
Sur un écran de bureau :
Sur un petit écran, le texte en unités rem est toujours lisible :
2. Mettre tous vos styles dans un seul fichier
L'utilisation d'un fichier CSS pour un gros projet peut créer un gâchis. Vous aurez un fichier avec de longues lignes de code qui sera source de confusion lors de la mise à jour. Essayez d'utiliser différents fichiers pour les feuilles de style CSS pour différents composants.
Par exemple, vous pouvez avoir différents fichiers pour la navigation, l'en-tête et le pied de page. Et un autre pour les sections sur le corps. La séparation de vos fichiers CSS permet de structurer votre application et d'encourager la convivialité du code.
3. Utilisation inappropriée du CSS en ligne
En CSS vanille, vous pouvez écrire des styles sur les pages HTML comme sur Frameworks CSS comme Bootstrap et TailwindCSS. Le CSS en ligne vous permet d'appliquer un style unique à un élément HTML. Il utilise l'attribut style de l'élément HTML.
Le code suivant est un exemple de CSS en ligne.
<h2style="la couleur verte;">Ceci est une rubrique verteh2>
<pstyle="La couleur rouge;">Ceci est un paragraphe rouge.p>
Le texte apparaîtra ainsi :
Cependant, HTML avec CSS en ligne uniquement peut être désordonné. Puisqu'il n'y a pas d'autre emplacement pour le CSS, tout le CSS existe dans le même fichier que le HTML. Il aura l'air bondé. L'édition d'un tel fichier est difficile, surtout si ce n'est pas votre code.
De plus, avec le CSS en ligne, vous devez écrire du code pour chaque élément. Cela augmente la répétition et réduit la réutilisation du code. Utilisez toujours une combinaison de feuilles de style externes et de CSS en ligne pour styliser vos pages Web.
4. Utilisation excessive !important
En CSS, le !important règle ajoute plus d'importance à une propriété/valeur. Il remplace les autres règles de style pour cette propriété sur cet élément.
Vous ne devriez avoir que quelques !important règles dans votre code. Utilisez-le uniquement lorsque cela est nécessaire. Il ne sert à rien d'écrire du code puis de le remplacer. Votre code aura l'air désordonné et causera des problèmes lorsqu'il sera exécuté sur certains appareils.
html>
<html>
<diriger>diriger>
<corps>
<p> je suis orange p>
<pclasse="Ma classe"> je suis vert p>
<pidentifiant="ma pièce d'identité"> Je suis bleu. p>
corps>
html>CSS :
#ma pièce d'identité {
Couleur de l'arrière plan: bleu;
}.Ma classe {
Couleur de l'arrière plan: vert;
}
p {
Couleur de l'arrière plan: orange !important;
}
Le résultat est comme ça :
5. Ne pas suivre les conventions de dénomination
CSS a des conventions de nommage qui guident les développeurs sur la façon d'écrire du code standard. Ceci est essentiel si vous vous retrouvez débogage du fichier CSS à une date future.
L'une de ces normes comprend l'utilisation de tirets pour séparer les mots groupés. Une autre consiste à nommer un sélecteur en fonction de ce qu'il fait. Ainsi, quiconque le regarde n'aura pas à deviner. Cela facilite également la lecture, la maintenance et le partage du code. Par exemple:
Au lieu de cela:
.image1 { marge-gauche: 3%; }Écrivez-le comme ceci :
.boy-image { marge-gauche: 3%; }En regardant la feuille de style, vous saurez exactement à quelle image le code est destiné. Guide de style HTML/CSS de Google répertorie de nombreuses autres conventions que tout développeur devrait connaître.
La rédaction de commentaires est la compétence la plus sous-évaluée en programmation. Beaucoup de gens oublient d'écrire des commentaires pour expliquer leur code. Mais cela fait gagner du temps. Les commentaires sont essentiels pour lire et maintenir le code.
Étant donné que CSS est peu structuré et que n'importe qui peut développer ses propres conventions, les commentaires sont essentiels. Utiliser des commentaires bien structurés pour expliquer votre feuille de style est une bonne pratique. Vous pouvez écrire des commentaires expliquant les sections du code et ce qu'elles font.
/* les éléments vidéo ont besoin d'espace pour respirer */
.vidéo {
marge supérieure: 2em;
}
/* styliser la section héros */
.salutation {
marge supérieure: 1em;
}
7. Ne pas concevoir au préalable
Beaucoup de gens le font, mais c'est une grave erreur de commencer à coder sans plan. Le CSS détermine à quoi ressemble la structure de votre front-end. La conception en dit long sur vos compétences en programmation.
Une conception de votre site clarifie votre vision et les ressources nécessaires pour vous y rendre. Ayez une image mentale de votre projet. Ensuite, concevez-le sur papier ou utilisez une boîte à outils de conception comme Canva pour visualiser ce que vous voulez.
Lorsque vous avez une image complète du projet, rassemblez toutes vos ressources et commencez à coder. Cela vous fera gagner du temps et de la redondance.
Pourquoi devriez-vous considérer ces recommandations
Si vous développez des applications sur le Web, vous utiliserez CSS. Bien travailler avec CSS nécessite de la pratique et le respect des conventions standard. Les conventions rendent non seulement votre code lisible mais également maintenable.
L'écriture de code standardisé vous fera gagner du temps et des efforts. Le temps que vous auriez passé à formater le front-end peut être consacré à des fonctionnalités plus complexes. Cela garantit également que vous pouvez réutiliser le code et le partager avec d'autres. Écrivez un meilleur code en suivant les conventions définies et devenez un meilleur développeur.
