← Tous les outils

CSS

Gratuit

Le langage de la mise en forme web. La cascade, les sélecteurs, le responsive — ce n'est pas un langage de programmation, mais c'est un savoir indispensable pour tout vibe codeur qui veut que ses apps soient belles.

CSS, c'est un langage que j'aime beaucoup. Mais je vais être clair : ce n'est pas un langage de programmation. C'est un langage de description de style.

CSS (Cascading Style Sheets, ou « feuilles de style en cascade ») permet de contrôler l'apparence de tes pages web : couleurs, polices, espacements, animations, mise en page responsive. Tout ce qui rend une application belle ou moche, c'est du CSS.

La cascade, c'est quoi ?

Le C de CSS, c'est « Cascading » — la cascade. C'est le concept le plus important à comprendre :

1. Navigateur (valeurs par défaut)
2. User Agent (styles du navigateur)
3. Auteur (tes fichiers CSS)
4. !important (le marteau-pilon)

Chaque niveau surcharge le précédent. En pratique, ça signifie que l'ordre de déclaration de tes règles CSS a un impact direct sur le résultat final. Et c'est souvent la source de bugs CSS que l'IA elle-même peut avoir du mal à résoudre.

Pourquoi apprendre le CSS en vibe coding

L'IA génère du CSS correct la plupart du temps. Mais dès que tu veux :

  • Ajuster l'espacement entre deux éléments
  • Changer la couleur d'un bouton sans casser le reste
  • Centrer un div (la blague classique du développeur)
  • Rendre une page responsive sur mobile
  • Corriger un débordement ou un chevauchement

...tu vas devoir toucher au CSS toi-même. C'est le genre de micro-ajustement où un aller-retour avec l'IA prend plus de temps que de le faire directement.

Tailwind CSS a changé la donne : au lieu d'écrire du CSS dans un fichier séparé, tu utilises des classes utilitaires directement dans ton HTML. flex, pt-4, text-lg, bg-blue-500. L'IA génère du Tailwind très naturellement, et c'est plus facile à ajuster qu'un fichier CSS traditionnel.

Les notions essentielles à connaître

  • Sélecteurs — classe (.), id (#), balise (div), combinateurs
  • Box model — margin, border, padding, content
  • Flexbox — alignement et distribution en une dimension
  • Grid — mise en page en deux dimensions
  • Responsive — media queries, unités relatives (rem, vh, %)
  • Couleurs et dégradés — hex, rgb, hsl, linear-gradient
  • Animations — transition, @keyframes

Frameworks CSS

  • Tailwind CSS — le standard en vibe coding. Des classes utilitaires, zéro fichier CSS à écrire
  • Bootstrap — l'ancien standard, encore très présent dans les projets existants
  • shadcn/ui — des composants React copiables, build sur Tailwind

En vibe coding, c'est Tailwind qui domine largement. Les IA le maîtrisent très bien, et les projets générés par Lovable, Bolt ou v0 l'utilisent quasi systématiquement.

Ressources