Apprenez correctement le CSS

Apprendre correctement le CSS

Les CSS (Cascading Style Sheets) sont utilisées par les développeurs Web pour styliser les sites Web.

Quand j'ai commencé à apprendre le développement Web, j'étais très confus à propos du CSS. La plus grande difficulté que j'ai eue était à la fois de mémoriser les propriétés et de maintenir mon code. Dans cet article, j'aiderai les débutants à éviter les erreurs que j'avais commises en apprenant.

1. Pratique
La programmation est quelque chose que vous ne pouvez pas entièrement mémoriser. Il s'agit de le comprendre en pratiquant.
Pendant que j'apprenais le CSS, c'était un peu difficile parce que je n'arrive pas très bien à mémoriser les choses. J'ai essayé d'éviter le "copier-coller" car je pensais que cela ruinerait mes compétences. À la fin, j’ai fini de copier et coller le code CSS. Maintenant, je ne dis pas que copier-coller améliorerait les choses. Mais si vous essayez de comprendre ce qui se passe lorsque vous exécutez votre code CSS copié-collé. Ce sera bien mieux que de mémoriser les propriétés CSS.

(Par exemple) Si vous souhaitez styliser un bouton rond et noir avec du texte blanc et que vous souhaitez qu'il échange les couleurs d'arrière-plan et de texte lors du survol. Vous pouvez coller un bloc de code CSS qui fait exactement cela comme :

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

Sans comprendre ce que ça fait, ça ne servira pas à grand-chose.
Si tu comprends ça :

• bordure : 2px solide ; ajout d'une bordure solide de 2 pixels au bouton,
• border-radius : 16px l'a rendu 16 pixels plus rond,
• couleur d'arrière-plan : #000000 ; a rendu le fond noir,
• couleur : #ffffff ; rendu le texte blanc, :hover,
• couleur d'arrière-plan : #ffffff ;
• et couleur : #000000 ; rend l'arrière-plan blanc et le texte noir au survol.

Vous pourrez coder un bouton la prochaine fois sans avoir besoin de copier-coller et, mieux encore, vous aurez une compréhension de base de la bordure, du rayon de bordure, de la couleur d'arrière-plan, de la couleur et de :hover et pourrez l'utiliser à d'autres fins. qu'un simple bouton. C'est pourquoi vous devez comprendre le code que vous copiez-collez.

Recours :
L’endroit à partir duquel vous copiez et collez le code est également important. Comme vous aurez besoin d'une bonne explication du code en tant que débutant.

Il existe de nombreux sites qui font bien ce travail mais je recommande :

1. Geeks pour les geeks :

GeeksforGeeks est une plateforme en ligne leader qui fournit des ressources informatiques et de programmation à des millions de développeurs et de passionnés de technologie dans le monde entier avec une vaste bibliothèque de cours, des programmes de classe hors ligne, des didacticiels, des articles, des défis de codage, des problèmes pratiques et bien plus encore.

Cette plateforme donne du code avec de bonnes explications et c'est ma préférée.

Visitez GeeksForGeeks

2. W3Écoles :

W3Schools est une école pour développeurs web, couvrant tous les aspects du développement web : Tutoriel HTML. Tutoriel CSS. Tutoriel JavaScript. Tutoriel PHP.

Ce site Web est également à peu près le même que "Geeks For Geeks". Mais la technique d'explication est différente donc cela dépend si vous êtes à l'aise ou non.

Visitez W3Schools

Maintenabilité du code :
Lors de l'apprentissage du développement Web, la deuxième chose la plus ennuyeuse était que mon code CSS devenait trop volumineux. Il devenait difficile de maintenir le code CSS pour un projet de site Web complexe. Eh bien, grâce à des frameworks comme TailwindCSS, vous n'avez toujours pas besoin d'écrire du CSS brut.

TailwindCSS :

Tailwind CSS est un framework CSS open source. Contrairement à d'autres frameworks, comme Bootstrap, il ne fournit pas une série de classes prédéfinies pour des éléments tels que des boutons ou des tableaux. Au lieu de cela, il crée une liste de classes CSS « ​​utilitaires » qui peuvent être utilisées pour styliser chaque élément en les mélangeant et en les faisant correspondre.

TailwindCSS crée des codes CSS comme notre exemple de bouton précédent :

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

Dans des cours comme :

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton :hover{
    background-color: #ffffff;
    color: #000000;
}

Cela peut être ajouté à votre élément de bouton HTML comme :

border-2 rounded-md bg-black text-white hover:bg-white hover:text-black

Sur d'autres frameworks comme ReactJS, je recommanderais TailwindCSS aux débutants. C'est beaucoup plus facile à apprendre et à utiliser en production. Cela rend votre code CSS très maintenable. Vous pouvez également l'utiliser avec ReactJS pour augmenter l'efficacité et la maintenabilité de votre code. TailwindCSS propose également des documents avec des explications de code très détaillées et faciles à comprendre.

Visitez TailwindCSS

Conclusion :
Bien qu’apprendre le CSS puisse être difficile, le pratiquer fréquemment tout en le comprenant aidera beaucoup.

Ne vous contentez pas de copier-coller le code, mais comprenez également ce qu'il fait car c'est la bonne façon d'apprendre le CSS.

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!