ADR-002 (portfolio) — Approche CSS et design
Statut : accepté (2026-07-19)
Contexte
Le risque R4 du cadrage : un portfolio au design daté ou générique dessert le profil. Il faut un rendu sur mesure et soigné, tenable par un dev solo, dans le budget poids (< 1 Mo, LCP < 2 s).
Comparatif pondéré
Question : comment styler le site ?
1. Filtre éliminatoire (licence libre)
Tous les candidats considérés sont libres — aucun écarté à ce stade.
2. Critères et pondérations (total = 100)
| Critère | Poids | Pourquoi ce poids |
|---|---|---|
| Aptitude au design sur mesure (éviter le « look template ») | 35 | C'est la réponse directe à R4 |
| Valeur d'apprentissage / CV | 25 | Même logique que l'ADR-001 |
| Productivité et maintenance en solo | 25 | Le CSS doit aider, pas devenir un projet dans le projet |
| Poids et performance | 15 | Budget < 1 Mo par page |
3. Candidats
| Candidat | Licence | Version évaluée |
|---|---|---|
| Tailwind CSS | MIT | 4.x |
| Bootstrap | MIT | 5.x |
| CSS moderne « vanilla » | — (standard) | — |
4. Notation (1 à 5, justifiée)
| Critère (poids) | Tailwind | Bootstrap | CSS vanilla |
|---|---|---|---|
| Sur mesure (35) | 5 — utilitaires : chaque pixel est un choix, pas un défaut de thème | 3 — le « look Bootstrap » se reconnaît, exactement le piège R4 | 4 — liberté totale, mais tout se paie en temps |
| Valeur CV (25) | 5 — standard de fait de l'industrie front actuelle | 3 — connu mais peu différenciant | 3 — les fondamentaux, toujours valables |
| Productivité solo (25) | 4 — rapide une fois les utilitaires en tête, intégration Astro native | 4 — composants prêts à l'emploi | 2 — système de design complet à écrire et maintenir seul |
| Poids/perf (15) | 5 — CSS purgé : seuls les utilitaires employés sont livrés | 3 — CSS + JS embarqués plus lourds | 5 — minimal par construction |
| Score pondéré / 5 | 4,75 | 3,25 | 3,40 |
5. Recommandation
Tailwind CSS (v4), intégré à Astro. Il coche le critère décisif (design sur mesure sans partir d'une feuille 100 % blanche), pèse quasi rien une fois purgé, et c'est la compétence front la plus visible sur le marché — cohérent avec l'objectif vitrine. Ce que les chiffres ne captent pas : Tailwind ne dessine pas à ma place — la direction artistique (typo, couleurs, espaces) reste un travail à part entière, revu avant chaque mise en ligne (parade R4 du cadrage).
Décision
Tailwind CSS 4 (licence MIT), intégré au build Astro. Je l'ai validé le 2026-07-19 sur la base du comparatif ci-dessus.
Conséquences
- Classes utilitaires dans le HTML : lisibilité différente du CSS classique, assumée.
- Le purge Tailwind fait partie du build Astro — rien à exploiter en prod.
- Pas de bibliothèque de composants tiers au MVP (YAGNI) ; si besoin plus tard, préférer des composants headless accessibles.