Dans un article récent, Donnie D’Amato pose une question intrigante : "Si vous ne pouviez utiliser que 4 propriétés CSS pour créer un site web, lesquelles choisiriez-vous ?"
Cette question, en apparence simple, a suscité un débat passionné parmi l’équipe de CSS-Tricks. Elle ressemble à une version pour développeurs front-end du célèbre dilemme : "Si tu devais emmener un seul album sur une île déserte..." Chaque membre a donné une réponse différente, révélant les priorités, compromis et approches uniques que chacun adopte en matière de développement web sous contrainte.
Voici un aperçu des choix des membres de l’équipe :
Juan Diego Rodriguez
-
font : La typographie est essentielle et cette propriété raccourcie regroupe plusieurs aspects du texte.
-
padding : Pour donner de l’espace aux éléments.
-
background : Utile pour styliser avec peu de code.
-
color : Crée une hiérarchie visuelle.
Juan a hésité à remplacer "color" par "place-items", utile en Grid, mais cela nécessiterait aussi "display".
Ryan Trimble
-
display : Permet l’utilisation de Flexbox.
-
flex-direction : Pour gérer les axes des éléments.
-
width : Pour contraindre la largeur du contenu.
-
margin : Pour les espacements et centrages.
Ryan suggère aussi l’utilisation du <meta name="color-scheme"> pour gérer les thèmes sans CSS supplémentaire.
Danny Schwarz
Il admet ensuite que "width" pourrait être indispensable pour la longueur des lignes de texte.
Sunkanmi Fafowora
Sunkanmi opte pour une stratégie axée sur CSS Grid, mettant l’accent sur une structure complète.
Zell Liew
Zell mentionne qu’il échangerait "color" contre "background" sur des sites plus complexes. Il remplacerait aussi "margin" par "padding" selon les besoins.
Amit Sheen
-
font
-
color
-
background
-
color-scheme
Son objectif est de contrer les styles par défaut des navigateurs, en se concentrant sur la typographie et les couleurs.
Geoff Graham
Geoff met l’accent sur la lisibilité et la hiérarchie visuelle, même si renoncer à "display" est un vrai sacrifice pour lui.
Chaque membre de l’équipe propose une combinaison unique, influencée par ses priorités (typographie, mise en page, espacement, ou style visuel), mettant en lumière les compromis nécessaires dans un contexte très contraint.
La typographie domine les choix, avec font apparaissant dans presque toutes les listes. Cette propriété, un raccourci englobant plusieurs aspects (taille, famille, poids, etc.), est essentielle pour rendre le contenu lisible et esthétiquement cohérent. Juan Diego Rodriguez, Sunkanmi Fafowora, Zell Liew, Amit Sheen, et Geoff Graham incluent font, soulignant son importance pour structurer l’information. Cependant, Danny Schwarz est le seul à envisager de ne pas utiliser une quatrième propriété, privilégiant la simplicité.
L’espacement est une autre priorité. Padding est plébiscité par Juan, Danny, et Geoff pour créer une aération visuelle et séparer les éléments, tandis que margin est choisi par Ryan Trimble et Zell pour sa polyvalence, notamment pour centrer ou ajuster les espaces. Ryan préfère margin à gap, car il permet plus de flexibilité sans dépendre de display.
La mise en page divise les approches. Ryan opte pour display (avec flex-direction et width) pour des layouts flexibles, tandis que Sunkanmi mise sur display et grid pour un système de grille complet. Ces choix reflètent une vision structurelle, mais consomment rapidement les quatre propriétés disponibles, limitant les options de style. Juan envisage place-items pour les grilles, mais note qu’il faudrait sacrifier une autre propriété pour inclure display.
La couleur et le style visuel sont également cruciaux. Color est choisi par Juan, Danny, Sunkanmi, Zell, Amit, et Geoff pour établir une hiérarchie visuelle et éviter des contrastes agressifs. Background, sélectionné par Juan et Amit, offre des possibilités de style variées (couleur, dégradés, images). Color-scheme, proposé par Amit et Geoff, permet un thème minimal (clair/sombre) sans alourdir les choix.
Les compromis sont au cœur des décisions. Zell, par exemple, hésite entre color et background selon la complexité du site, tandis que Danny questionne l’absence de width pour contrôler la longueur des lignes. Ryan ajoute une astuce hors contrainte avec une balise meta pour gérer les thèmes de couleur automatiquement, montrant une créativité face aux limites.
Ce débat illustre la diversité des priorités des développeurs front-end : certains privilégient la lisibilité (typographie), d’autres la structure (layout), ou encore l’esthétique (couleurs). Les choix, bien que variés, convergent vers un équilibre entre fonctionnalité et style, révélant que même avec seulement quatre propriétés CSS, un site peut être fonctionnel, mais toujours avec des concessions stratégiques.
