Pourquoi tu dois passer á Tailwindcss après cet article??

Salut cher développeur(se)! Bientôt rendu aux prémices de l'année 2023, nous disposons encore de certaines vieilles habitudes que nous devons laisser a 2022. Dans cet article, je vais notamment parler du CSS(Cascading Style Sheet) qui permet de spécifier au navigateur comment il doit rendre notre document HTML.

#Genèse

Le CSS, Cascading Style Sheet en francais langage de feuille de style est utilisé pour spécifier la façon avec laquelle un document HTML ou XML doit etre présenté.

HTML, CSS ET JS sont de technologies fondamentales du World Wide Web

Le CSS permet la séparation du contenu et de la présentation , y compris la mise en page , les couleurs et les polices . Cette séparation peut améliorer l' accessibilité des contenus ; fournir plus de flexibilité et de contrôle dans la spécification des caractéristiques de présentation ; permettre à plusieurs pages Web de partager la mise en forme en spécifiant le CSS pertinent dans un fichier .css séparé, ce qui réduit la complexité et la répétition dans le contenu structurel ; et activer la mise en cache du fichier .css pour améliorer la vitesse de chargement des pages entre les pages qui partagent le fichier et sa mise en forme.

#Les problématiques du CSS pure

Bien qu'étant une reference et presque irremplaçable, sur de tout petits projets de sites statiques, la question ne se posent pas, utiliser le css pure reste et restera de légitime! Mais lorsqu’on passe a des projets de grandes envergure qui nécessitent l'utilisation de framework front-end(Angular, next ou nuxt) alors des problèmes sont a relever:

• Chaque composant de l'application doit être lie a au moins un fichier css et presque tous ces fichiers CSS se ressemblent car contiennent les même classes;
• A chaque nouveau projet, il faut repartir de zéro dans les fichiers css, ce qui rallongera a chaque fois le temps de développement d'un produit et par conséquent les couts;
• Les allers et retours entre les fichiers HTML pour la structure et les fichiers CSS pour le style qui de nouveau rallonge le temps de développement du produit Avec ce qui précède, il revient du coup de présenter une autre manière d'ecrire du CSS qui n'est autre que:

Tailwindcss

#Les solutions de Tailwindcss

• c'est un cadre de travail CSS (qui reste du css) qui contient beaucoup de classes (modifiables) prête a l'emploi qui peuvent être combinées directement dans l'attribut class de votre balise HTML ou á côté lorsque nous écrivons du css pure par nous même, nous devons partir a chaque fois de zéro;
• Plus besoin de créer des fichiers .css rattachés aux composants car tous les composants de votre application seront rattachés a un fichier tailwind.css
• Le développeur se concentre sur la structure du projet et reste dans le code HTML sans plus se préoccuper des fichiers css.

#Les bonus qu'offre Tailwindcss

• Il facilite le responsive design comme ceci:

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

• L'implementation et la customisation du mode sombre(dark mode) y est simplifiée:

<div class="bg-white `dark:bg-slate-800` rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
</div>

• c'est un outil utility first ce qui signifie qu'une class n'a qu'une seule occurrence dans le css.

#Conclusion

Bien qu'étant fervent défenseur de tailwind, je ne peux nier la nécessite de maîtriser un minimum le CSS avant de se lancer dans l'apprentissage de ce framework vue qu'il s'agit toujours de CSS d’où mon conseil n'utiliser tailwind que dans des projets a grandes envergure. Conscient de l’évolution constante des technologies, si mes dires ne t'on pas convaincu, je suis ouvert pour en discuter et approfondir mes connaissance.A bientot 👋🏽 pour de nouveaux articles et en passant le prochain article va concerner Nextjs, si ça t'interresse fais le moi savoir

#Liens utiles:

• Tailwindcss

• Freecodecamp

• Protailwind

• TailwindUi

• tailwind on youtube