Poser des fondations solides pour mon CSS

J'ai décidé de refondre le CSS de mon blog naissant suite à deux constats :

1. Alors que je n'ai écris presque aucun CSS pour mon site, ma feuille de style fait déjà 14ko (compressé)
2. je commence déjà à me perdre dans le peu que j'ai écris

Cette première repasse se découpe en 4 thèmes :

• Réduire le poids de mon CSS
• Poser une structure de fichier qui facilite les évolutions (je prévois de pas mal itérer sur le design) et force d'entrée de jeu des valeurs constantes (pour m'aider à garder un design cohérent)
• Poser la base du design du site (les grands principes qui régissent chaque page)
• Proposer une première itération sur le design (couleurs et font)

Cure de minceur

Après un peu d'investigation, il s'avère que plus de la moitié du poids de mon CSS vient du reset CSS d'Alsacréation(S'ouvre dans un nouvelle fenêtre)⎋. Dans la pure tradition des reset CSS, il a la main lourde et écrase de nombreuses règles que je n'utiliserais de toute façons pas.

Je fais donc le pari de m'en débarrasser et d'écrire mon propre reboot CSS, en ciblant uniquement les navigateurs "modernes" (je suis prêt à remonter sur plusieurs versions, mais disons que je ne compte me concentrer sur un support minimal pour les navigateurs sortis dans les 10 dernières années environ). Et avec ceux-ci les comportement se sont beaucoup uniformisés, même si certaines traînent les pieds sur certains sujets ou nous imposent des décisions unilatérales (Safari, on te voit 👀) : moins de différences dis moins de surcharge et donc moins de CSS.

Et il faut reconnaître que c'est efficace car j'ai ainsi divisé par deux mon CSS, sans voir de grandes différences sur les quelques devices que j'ai testé^[1].

Architecture SASS

Ce n'est pas tout d'alléger mon CSS, il faut aussi que je le structure pour :

• faciliter les futurs évolutions
• garder sa complexité / son poids sous contrôle.

Pour cela j'ai décidé de le composer en quelques strates de bases plus un fichier pour réunir chaque strate et ajouter quelques styles plus spécifiques.

Avec l'usage de SASS, deux options s'offrent à moi pour piloter mon design avec des valeurs dynamiques, centrales, que je peux rapidement modifier pour tout le site :

• les variables SASS
• les custom properties CSS

Les premières ont l'avantage de pouvoir être appelées et auto-complétées dans toutes mes "strates" (tant que je les isole bien dans un fichier sans aucun CSS généré). Les secondes ont l'avantage d'être réellement dynamiques (je peux les modifier directement dans le CSS, les altérer en quelques lignes dans une média-queries, etc.)

Pour profiter des deux monde j'imagine deux niveaux d'abstraction :

1. Un fichier de pilotage avec des variables SASS qui définissent ma palette de couleur (nommés selon l'intention, mais pas le contexte d'usage) et d'autres constantes du site (polices de caractères, dimensions, …)
2. Un fichier d'orchestration avec mes custom properties, nommées selon l'intention et le contexte d'usage

$color-error: #CC0000;
$color-error-light: #FfA7A7;
:root {
  --color-bg-error: #{$color-error-light};
  --color-txt-error: #{$color-error};
}

Avec ce système je peux très facilement et rapidement implémenter un mode sombre avec une simple mediaquery :

:root {
  --color-bg-base: #{$color-whitest-point};
  --color-txt-base: #{$color-darkest-point};
  --color-bg-error: #{$color-error-light};
  --color-txt-error: #{$color-error};
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-base: #{$color-darkest-point};
    --color-txt-base: #{$color-whitest-point};
    --color-bg-error: #{$color-error};
    --color-txt-error: #{$color-error-light};
  }
}

Structure finale :

Poser les premier éléments structurants

J'ai juste posé quelques principes :

• Une marge minimale avec les bords de l'écran (surtout pour mobile)
• Des tailles et styles de textes sur les en-têtes qui permette de distinguer les titres des corps de texte.
• une largeur maximale pour les paragraphes (pour le confort de lecture des long textes)

Première itération : Focus sur les basiques

couleurs

Je commence par définir les couleurs extrêmes :

• ma couleur la plus claire : #fff
• ma couleur la plus sombre : #222033

Puis une couleur de mise en avant : #ab4497

Avec ces couleurs de bases, j'ai déjà assez pour commencer à designer mon site. Je créé une couleur "moyenne" avec en tête les éléments désactivés mais il y a peu de chance que je l'utilise beaucoup : elle est insuffisamment contrastée avec les 3 autres.

J'ajoute aussi des couleurs "élévation" autour de mes couleurs de bases afin de pouvoir créer des effets de "strates" (si nécessaire) dans mon design. Ces couleurs sont peu contrastées avec la couleur qu'il déclinent car il seront utilisé purement pour de la décoration ou pour apporter un peu de confort visuel mais jamais des i informations cruciales.

Contrastes colorés

Pour calculer mes contrastes, j'ai pris comme base ma couleur la plus claire et son "élévation" : tous les couleurs choisies doivent avoir un ratio supérieur à 4.5:1 avec les premières (sauf la couleur "moyenne", qui est un cas un peu à part) afin de garantir un contraste suffisant quelques soient les usages.

Mode sombre

Pour le mode sombre, je vais pour l'instant simplement inverser mes couleurs. Pour les couleurs alternatives, comme la mise en avant, je créé une déclinaison claire et je m'assure que son ratio de contraste avec la couleur la plus sombre et son "élévation" soit de plus de 4.5:1.

espacements

Sur les espacements, je crée trois catégories de dimensions (décision que je regretterai peut-être plus tard ?) :

• Les dimensions "racine", dépendant de la taille de base réglée dans le navigateur (en rem)
• Les dimensions relatives
• Les dimensions fixes

Les dimensions "racine" posent les bases de mes textes : la taille par défaut d'un texte, la taille d'un titre (en fonction de son niveau), etc.

Les dimensions relatives permettent de définir les proportions d'éléments variant en fonction de la taille du texte de leur contenu : la hauteur de ligne, les marges pour séparer les en-têtes des contenus qui les précédent, la longueur max des blocs de textes, etc.

Les dimensions fixes sont réservées à des éléments qui ne doivent pas grossir en fonction du texte pour éviter de perdre bêtement de l'espace lors d'un zoom texte : la marge avec les bords de l'écran, etc.