Erreurs SS que font souvent les débutants

CSS n'est pas aussi simple qu'il y paraît et les développeurs commettent souvent des erreurs qui les laissent sans savoir quoi faire. CSS est perçu comme un langage peu intuitif et difficile à utiliser en raison de ces erreurs courantes qui contrecarrent la plupart des développeurs lorsqu'ils tentent d'écrire du CSS. En conséquence, la plupart des développeurs choisissent d'utiliser des frameworks CSS tels que Bootstrap et Tailwind CSS pour éviter d'écrire leur propre CSS.

Dans ce blog, nous discuterons de cinq erreurs courantes que commettent souvent les développeurs. Reconnaître et éviter ces erreurs vous aidera à écrire du CSS qui :

• Fonctionne sur tous les appareils, pas seulement sur votre ordinateur portable
• Fonctionne dès la première fois que vous l'essayez
• Cela vous rend moins frustré avec CSS

Plongeons-nous.

Erreur 1 : ne pas utiliser la réinitialisation CSS

C'est l'une de mes découvertes surprenantes et je me suis seulement rendu compte que j'avais mal fait le CSS pendant tout ce temps. Les navigateurs ont des styles par défaut qui servent de solution de secours si la feuille de style n'existe pas. Cependant, ces styles par défaut sont différents selon les navigateurs. Dans tous les cas, deux navigateurs fournissent rarement un style par défaut identique, donc le seul véritable moyen de garantir l'efficacité de vos styles est d'utiliser une réinitialisation CSS.

Une réinitialisation CSS implique de réinitialiser (ou plutôt de définir) tous les styles de tous les éléments HTML à une valeur de base prévisible. La beauté de ceci est qu'une fois que vous avez effectivement inclus une réinitialisation CSS, vous pouvez styliser tous les éléments de votre page comme s'ils étaient tous identiques au départ.

La réinitialisation CSS est une page vierge qui vous aide à avoir un style cohérent sur différents navigateurs. Le plus souvent, cela implique de définir un margin:0 et un padding:0, bien qu'il soit nécessaire de réinitialiser d'autres éléments.
Voici un exemple de code de réinitialisation :

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol,
ul {
  list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
}
blockquote,
q {
  quotes: "" "";
}

Erreur 2 : Utiliser les unités px

Je suis également coupable d'avoir utilisé des unités px pour la taille des polices, les marges, le remplissage et les attributs de hauteur ou de poids. Bien que l'utilisation des unités px puisse convenir dans certains cas, une dépendance excessive à leur égard entraîne des problèmes d'accessibilité.

Selon MDN, la définition des tailles de police en px n'est pas accessible, car l'utilisateur ne peut pas modifier la taille de la police dans certains navigateurs. Par exemple, les utilisateurs ayant une vision limitée souhaiteront peut-être définir une taille de police beaucoup plus grande que celle choisie par un concepteur Web. Évitez de les utiliser pour les tailles de police si vous souhaitez créer un design inclusif.

Cependant, les unités px sont également mauvaises pour définir la hauteur et la largeur du contenu, car le contenu peut également déborder si l'utilisateur augmente la taille de police par défaut dans le navigateur. L'utilisation d'unités px dans les requêtes multimédias affecte également la mise en page lorsqu'un utilisateur effectue un zoom avant ou modifie la taille de police par défaut. 

? Erreur

p {
  font-size: 16px;
 /*this prevents users from resizing the font-size*/
  line-height: 20px;
  margin-bottom: 8px;
}

✅ Correct

body {
  font-size: 16px;
}
p {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

Erreur 3 : utiliser les identifiants comme sélecteurs

L'un des problèmes les plus négligés dans le développement Web est l'utilisation de sélecteurs surqualifiés, trop spécifiques et difficiles à remplacer. Les sélecteurs d'ID ont plus de spécificité en CSS, ce qui signifie que vous ne pouvez pas les remplacer ou réutiliser le style dans un autre composant.

Écrivez toujours vos sélecteurs CSS avec le niveau minimum de spécificité nécessaire pour que cela fonctionne. L'inclusion de toutes ces informations supplémentaires peut donner l'impression que cela est plus sûr et plus précis, mais lorsqu'il s'agit de sélecteurs CSS, il n'y a que deux niveaux de spécificité : spécifique et pas assez spécifique.

? Erreur

#header {
  font-size: 1em;
  line-height: normal;
}

✅ Correct

.header {
  font-size: 1em;
  line-height: normal;
}

En général, vous devez éviter d'utiliser des sélecteurs trop spécifiques en CSS. Le Tournoi de spécificité CSS illustre pourquoi c'est une mauvaise idée d'utiliser des sélecteurs trop puissants. Lorsqu'un sélecteur est très puissant dans le tournoi, il gagne rapidement et dès le début, ce qui signifie que la seule façon de le battre est d'écrire un sélecteur encore plus puissant.

Cette tendance à la spécificité à toujours s'intensifier est connue sous le nom de guerre de spécificité. Tout comme pour le stockage d’armes nucléaires, personne ne gagne dans cette guerre – les choses deviennent de plus en plus difficiles à désamorcer à mesure que la spécificité augmente. La meilleure façon d'éviter une véritable guerre de spécificité est de ne pas utiliser de sélecteurs hautement spécifiques en premier lieu.

Erreur 4 : couleurs nommées

Une autre erreur que j'ai découverte en faisant mes recherches est le problème des couleurs nommées. Les développeurs ignorent souvent que ce que vous percevez comme une couleur spécifique est très différent selon les navigateurs.

En disant : couleur : rouge ; Vous dites essentiellement que le navigateur doit afficher ce qu'il pense être le rouge. Si vous avez appris quelque chose en faisant fonctionner correctement les éléments dans tous les navigateurs, c'est que vous ne devez jamais laisser le navigateur décider comment afficher vos pages Web.

Instead, you should go to the effort to find the actual hex value for the color you’re trying to use. That way, you can make sure it’s the same color displayed across all browsers. You can use a color cheat sheet that provides a preview and the hex value of a color.

? Mistake

.header {
  font-size: 1em;
  line-height: normal;
  color: red;
}

✅ Correct

.header {
  font-size: 1em;
  line-height: normal;
  color: rgb(255, 0, 0);
}

Mistake 5: Not Using Shorthand Properties

As a developer, one rule is to never repeat yourself. Therefore, you should find ways to minimize the number of lines of code that you write.

One common problem with CSS is understanding shorthand properties for things like margin, padding and inset. As a confession, I also struggle with this problem and often have to look to the documentation on whether margin: 0 5px sets the margin in top-bottom or left-right.

? Mistake

.my-cool-div {
  margin-top: 50px;
  margin-right: 0;
  margin-bottom: 50px;
  margin-left: 0;
  background-image: url(background.png);
  background-repeat: repeat-y;
  background-position: center top;
}

✅ Correct

.my-cool-div {
  margin: 50px 0;
  background: url(background.png) repeat-y center top;
}

Using shorthand CSS improves efficiency and makes it easier to maintain our code. However, this could take time to master and I recommend checking the documentation.

Mistake 6: Overreliance on Position Absolute

Position absolute is that one band-aid solution that can cause more problems as it breaks the document flow. When using positions absolute, MDN recommends that you ensure that elements that are positioned with an absolute or fixed value do not obscure other content when the page is zoomed to increase text size.

Position absolute should be the last choice since it has some effects such as pulling the element out of the flow and making it stack over other things. 

Furthermore, elements positioned absolutely don't naturally adapt to changes in screen size or parent element dimensions, which can break the layout on different devices.

? Mistake

.sidebar {
  position: absolute;
  top: 50px;
  right: 0;
  width: 30%;
  background-color: #e0e0e0;
  padding: 20px;
}

✅ Correct

.sidebar {
  transform: translateY(50px) translateX(0);
  /* Moves the element down by 50px */
  width: 30%;
  background-color: #e0e0e0;
  padding: 20px;
}

In this example, we see that we can achieve the same functionality without breaking the document flow by using transform to move the sidebar down by 50px.

Mistake 7: Collapsing Margins

Collapsing margins can be really hard to understand and frustrating to decode since you might not understand why your applied margin or padding is not working as expected.

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

Understanding margin collapse is essential for achieving consistent spacing in your layouts, particularly in scenarios where you want to ensure a specific amount of space between elements.

One solution to collapsing margins is using padding, especially for child elements rather than margins. It is generally advised not to add margin to the child element, especially in JavaScript frameworks such as react since this might affect their reusability.

You must always remember that adding a margin to a child element can affect the position of the parent element as the margins collapse.

? Mistake

/* html */
/* 
<div class="element1">Element 1</div>
<div class="element2">Element 2</div> 
*/
.element1 {
  margin-bottom: 20px;
}
.element2 {
  margin-top: 30px;
}
/* the total margin will be 30px rather than 50px */

✅ Correct

.element1 {
  margin-bottom: 20px;
  padding-bottom: 1px;
  /* Prevents collapse */
}
.element2 {
  margin-top: 30px;
}

Conclusion

I hope you enjoyed this article, and that it gave you a sense of how to avoid the topmost common mistakes developers make when they write CSS. There are many mistakes not covered in this blog such as separating between layout and content elements, overusing flex box and much more. Comment below with some other mistakes.

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!