Pourquoi ne pas utiliser le bon vieux CSS3 ??? Et oubliez Bootstrap!

Lorsque nous commençons à apprendre à créer une page Web et à les présenter à CSS, il peut être assez décourageant (ou exaltant) de voir la liste des propriétés que nous pouvons utiliser. Tant d'entre eux, tant de choses que nous pouvons faire! Ainsi, lorsque nous parcourons les pages et que nous leur présentons des moyens «faciles» de devenir développeurs Web, nous les saisissons sans arrière-pensée.

Mais attention aux promesses du Côté Obscur, jeune padawan.

Vous pouvez faire grand. Vous pouvez faire du brillant. Vous pouvez faire du squishy et avec beaucoup d'effets, mais PAR L'AMOUR DES DIEUX INTERNET, apprenez d'abord le régulier.

Lorsque vous ajoutez cet extrait de code cool que vous avez pris de Stack Overflow sans bien comprendre votre propre code, vous perdrez tellement de jours à déboguer votre page que vous voudrez jeter votre ordinateur sur le mur en un rien de temps. Je te le promets, ce ne sera pas amusant.

Croyez: vous pouvez faire des sites AMAZING avec CSS3 simple et simple - sans utiliser de frameworks externes. Alors, écoutez-moi, et écoutez-moi bien: oubliez Bootstrap. Non, laisse tomber ce rocher, laisse-moi t'expliquer.

Je ne sais pas si vous connaissez déjà les règles de priorité CSS. Sinon, je vais expliquer, brièvement, pour le bien de ceux qui savent déjà.

CSS est une liste de règles. Vous écrivez quelque chose comme "

margin-right: 3px

", et il se déplacera 

3 pixels 

loin de la marge droite. Cependant, que se passe-t-il lorsque vous avez dans une autre partie de votre feuille de règles CSS qui dit qu'elle ne doit se déplacer que

1 pixel

? Ensuite, vous avez une question de priorité. Quelle règle est la plus importante?

La règle à appliquer en premier est la plus spécifique. Il s'agit de la règle de spécificité. Par exemple: si vous postulez

color: blue

 à tous 

h1

, cela a une spécificité moindre qu'un 

h1

 avec un ID de 

"title-of-article"

. N'oubliez pas que si d'autres sont ciblés, c'est moins spécifique. Donc:

h1 { color: blue; }
h1 #title-of-article { color: red; }

Dans ce cas, tous 

h1

 sera bleu, sauf pour le 

h1

 que nous avons délibérément donné un 

ID

 pour manipuler la règle de priorité et lui appliquer le style.

Si aucune règle de spécificité n'est en action, nous suivons la séquence de déclaration. La dernière à être déclarée, de haut en bas, sera celle qui sera réellement appliquée, non pas parce que la première n'a pas été appliquée, mais parce qu'elle a été appliquée, puis remplacée.

p {color: black; }
p {color: white; }

Ainsi, tous nos paragraphes étaient d'abord noirs, puis blancs. Nous ne pouvons pas vraiment le voir, car ils sont rendus avant de nous être affichés, mais c'est comme ça que ça se passe. Pour nos yeux, le dernier est ce qui compte. Puisque vous savez comment cela se produira, vous pouvez décider où le mettre dans votre feuille CSS et prendre le contrôle total de votre site Web.

Padawan, ce n'étaient que les bonnes manières de la Force, mais je dois parler de quelque chose de sombre, de quelque chose d'interdit. Quelque chose qui est ... une mauvaise pratique . Je dois parler de l'utilisation de ! Important . Pour terminer votre entraînement, padawan, vous devez le comprendre. Lorsque vous appliquez une règle dans votre feuille CSS, vous pouvez, à côté d'elle, écrire "

!important

", et le navigateur sera en quelque sorte contrôlé par l'esprit pour le reconnaître comme plus important que toute autre chose dans tout le multivers, quel que soit l'ordre de priorité. Il brise l'ordre naturel des choses, padawan! Ce n'est pas naturel! Disons que vous utilisez une fois, vous vous en souvenez peut-être lorsque vous déboguez, mais la tentation de rendre chaque règle que vous faites aussi importante que l'autre est trop grande. La déboguer plus tard est un cauchemar.

Et c'est là que nous arrivons à Bootstrap, mon padawan. Tout dans Bootstrap, TOUT, a ! Important . Dites donc adieu à toutes les règles de priorité CSS, car vous ne les utiliserez pas. Vous voulez changer la longueur du coin de cette classe de "cartes"? Oublie. Oh, vous voulez appliquer une taille spécifique de rembourrage, par exemple

0.3rem

mais ils te donnent seulement 

0.25rem

 (p-1) ou 

0.5rem

(p-2)? C'est dommage. Et vous ne pouvez pas remplacer facilement, car leurs règles sont toutes

!important

, vous aurez donc bientôt l'impression de maudire votre site Web. Soit vous l'utilisez dans leur style, soit vous supprimez complètement Bootstrap. Si vous connaissez Bootstrap, vous remarquerez bientôt que tous les sites qui l'utilisent se ressemblent à peu près.

Donc, je ne dis pas (oui je le suis), vous ne devriez pas utiliser Bootstrap (mais oui, vous ne devriez pas), mais si vous voulez être un développeur Web gratuit, capable de personnaliser entièrement votre site Web et de créer un produit qui répond complètement aux besoins de votre client, vous devez vraiment apprendre le HTML et le CSS, de bout en bout. Vous ne pouvez pas y échapper, le site sera réalisé avec ces règles, et vous devez les comprendre. Alors retroussez vos manches et trouvez de bons cours (il y en a des milliers gratuitement sur Internet!) Et pratiquez, pratiquez et pratiquez.

Encore une note sur Bootstrap. Apprenez à ce sujet. Comme je l'ai dit, cela fait partie de votre entraînement, padawan. Les gens l'utiliseront et vous devrez déboguer leurs sites (et faire preuve de beaucoup de patience). Donc, tu ferais mieux de le comprendre. Mais ne tombez pas dans la promesse des moyens «faciles» et tentants de devenir «rapidement» des développeurs Web.

Padawan, il n'y a pas de moyen facile. Seule la bonne façon.

Avertissement: les gens de Twitter, vous êtes tous beaucoup plus professionnels que moi, et je serais très fier de travailler avec vous! Bootstrap était certainement une avancée incroyable pour tout le monde à l'époque. Je n'essaie nullement de diminuer votre travail, vos capacités ou votre importance, s'il vous plaît. Merci pour tout. Je suis un grand admirateur de vous, bien que je déteste Bootstrap, mais nous ne pouvons pas tout aimer, non?

Juste ...! Important partout? Les gars?

Les références:

CODEDGAR. (2019, 20 décembre) Pourquoi je n'utilise plus Bootstrap. Récupéré de: https://dev.to/codedgar/why-i-don-t-use-bootstrap-anymore-b8

jenkov.com (sd) Priorité CSS. Extrait de: http://tutorials.jenkov.com/css/precedence.html

L'exception importante! (nd) Les documents Web MDN. Extrait de: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity