Avis pour écrire du bon CSS

Salut les geeks stylés ! Aujourd'hui, on va parler CSS. Ouais, ce truc qui vous fait arracher les cheveux quand votre div refuse obstinément de se centrer. Mais t'inquiète, après cet article, tu vas devenir un vrai Picasso du web !

1. Fais le ménage dans ton code, bordel !

Premier conseil, et pas des moindres : vire tout le CSS dont t'as pas besoin ! C'est comme ton frigo : si tu laisses traîner des trucs périmés, ça va puer. Pareil pour ton code. Expérimente, teste, mais fais le ménage après, sinon ça va devenir le bordel intersidéral.

2. Commente comme si ta vie en dépendait

Les commentaires, c'est comme les sous-titres d'un film coréen : sans eux, t'es paumé. Surtout quand t'écris un truc dont t'es pas sûr à 100%. Ça t'évitera de te demander "Mais WTF j'ai foutu là ?" dans 6 mois.

3. Les IDs, c'est le mal (pour le CSS)

Utiliser des IDs pour le CSS, c'est comme utiliser un bazooka pour tuer une mouche. Ça marche, mais c'est pas très élégant. Embrasse la cascade, mon ami. Pour plus d'infos, va mater la conf de Mayank, ce type est un génie.

4. !important ? Important mon cul !

!important, c'est comme crier dans une discussion : si t'en as besoin, c'est que quelque chose cloche. Utilise-le comme tu utiliserais une arme nucléaire : en dernier recours, et avec beaucoup de précautions.

5. Sois cohérent, bordel !

Avoir un système, c'est comme avoir un GPS pour ton code. Ça peut être BEM, CUBE, ou un truc que t'as inventé après 3 bières, peu importe. L'important c'est d'en avoir un et de s'y tenir. Sinon, c'est le chaos, et personne n'aime le chaos (sauf peut-être les fans de Game of Thrones).

6. Reset et defaults, tes nouveaux meilleurs potes

Un bon reset CSS, c'est comme mettre tous les navigateurs au pas. Checke les resets modernes d'Andy Bell ou Josh Comeau, ces mecs savent de quoi ils parlent. Et n'oublie pas les defaults malins, comme :

img:not([alt]) {
  border: 5px solid red;
}

Ça, c'est pour te rappeler d'être un bon dev et de mettre des alts à tes images, espèce de flemmard !

7. Connais ton code comme ta poche

Si tu bosses en équipe, passe du temps à lire le CSS des autres. C'est comme apprendre une nouvelle langue : au début c'est chiant, mais après tu te sens comme un local.

8. Les variables CSS, c'est la vie

Les variables CSS, c'est pas juste pour frimer. C'est comme préparer tes ingrédients avant de cuisiner. Tu sais, ces couleurs, ces backgrounds, ces valeurs en pixels que tu vas utiliser partout ? Mets-les en variables, tu me remercieras plus tard.

9. Responsive first, questions après

Avant de te jeter sur ton clavier comme un affamé, prends le temps de comprendre comment ton design va se comporter sur différents écrans. C'est comme prévoir le trajet avant un road trip : ça t'évitera de te retrouver dans un cul-de-sac.

10. Les marges et le padding, attention danger !

Évite les marges sur les composants et le padding sur les conteneurs. C'est comme mettre des chaussettes avec des sandales : ça peut marcher, mais c'est rarement une bonne idée. Attends de voir le contexte final avant de fixer ces valeurs.

11. Copier-coller, c'est pour les faibles

Ne colle pas de CSS comme un bourrin ! Ni de Copilot, ni de Figma, ni du composant de ton pote. C'est comme tricher à un examen : tu vas peut-être t'en sortir, mais tu n'auras rien appris. Écris chaque ligne, comprends-la, et deviens un vrai maître du CSS.

Conclusion : Ton CSS, ta bataille !

Voilà, maintenant t'as plus d'excuses pour avoir un CSS dégueulasse. Ces conseils sont pas gravés dans le marbre, mais ils t'aideront à avoir un code plus propre qu'une salle d'opération. Maintenant, à toi de jouer ! Va dompter ces feuilles de style et fais-nous des sites qui déchirent !

Et n'oublie pas : en CSS comme dans la vie, parfois "ça dépend" est la meilleure réponse. Mais au moins maintenant, tu sauras de quoi ça dépend ! 😎🚀

— Andrew Walpole