-
reset
- Elle a d’abord copié environ 200 lignes des preflight styles de Tailwind depuis
tailwind.css
- Elle était habituée depuis longtemps au reset de Tailwind, et la règle qui applique
box-sizing: border-box à tous les éléments fait en sorte que la largeur d’un élément inclut son padding
* { box-sizing: border-box; }
- Il est aussi possible qu’elle dépende inconsciemment d’autres règles de reset comme
html {line-height: 1.5;}, et écrire du CSS sans elles demanderait sans doute une grosse adaptation
-
components
- La majeure partie du CSS est organisée dans des fichiers par composant, un peu comme avec des composants Vue ou React
- Chaque composant possède une classe propre, afin que le CSS d’un composant n’écrase pas celui d’un autre
- En pratique, environ 80 % du CSS qu’elle veut modifier se trouve dans ces fichiers de composants, donc quand elle édite un composant de 100 lignes, elle n’a à penser qu’à ces 100 lignes
- Par exemple, un composant
.zine peut avoir le HTML suivant
<figure class="zine horizontal">
<img src="whatever.jpg">
</figure>
- Le CSS regroupe à l’intérieur du composant les états comme
.horizontal, .vertical et :hover via des sélecteurs imbriqués
.zine {
...
&.horizontal {
...
}
&.vertical {
...
}
&:hover {
...
}
}
- Elle n’a pas mis en place de protection programmatique contre les interférences entre composants comme avec les Web Components ou
@scope, mais le simple fait de définir et respecter des conventions donne déjà l’impression d’un grand progrès
-
colours
colours.css regroupe des variables CSS pouvant être utilisées en cas de besoin- Les couleurs étant difficiles, et comme elle ne voulait pas revoir leur usage dans cette refactorisation, elle a conservé l’approche existante
- La seule règle consiste à lister dans ce fichier toutes les couleurs utilisées sur le site
:root {
--pink: #fea0c2;
--pink-light: #F9B9B9;
--red: #f91a55;
--orange: rgb(222, 117, 31);
...
}
-
font sizes
- Avec Tailwind, il suffisait de choisir un palier comme
text-lg, xl ou 2xl, sans avoir à se souvenir s’il fallait utiliser em, px ou rem
- Pour conserver cela en CSS vanilla, elle a défini des variables de taille reprises de Tailwind
--size-xs: 0.75rem;
--line-height-xs: 1rem;
--size-sm: 0.875rem;
--line-height-sm: 1.25rem;
- Les tailles de police sont définies via des variables ; c’est un peu plus verbeux que Tailwind, mais cela lui convient pour l’instant
h3 {
font-size: var(--size-lg);
line-weight: var(--line-weight-lg);
}
-
utilities
- Les éléments répétés dans plusieurs composants, comme les boutons, sont classés dans les utilities
- Certaines classes utilitaires comme
.sr-only, destinées à des éléments visibles uniquement pour les utilisateurs de lecteurs d’écran, ont été copiées depuis Tailwind
- Elle veut garder cette zone réduite et la modifier avec prudence
-
base
- Les styles “base” sont des styles appliqués directement à l’ensemble du site
- Comme elle n’est pas assez sûre d’elle pour imposer beaucoup de styles à tout le site, cette zone reste très petite
- Pour l’instant, les seules règles qui lui semblent correctes concernent
<section> et a, et la règle sur <section> pourra changer plus tard
/* put a 950px column in the middle of each <section> */
section {
--inner-width: 950px;
padding: 3rem max(1rem, (100% - var(--inner-width))/2);
}
a {
color: var(--orange);
}
- Il semble plus simple de laisser les styles de base presque vides au départ, puis de faire remonter progressivement depuis les composants vers la base ce qu’on souhaite partager, dans une approche bottom-up
-
spacing
- Sa manière de gérer
padding et margin n’est pas encore complètement définie
- Lorsqu’elle utilisait Tailwind, elle ajoutait du padding et des marges un peu partout de manière improvisée jusqu’à obtenir le rendu voulu, et elle cherche maintenant une méthode plus principielle
- Pour l’instant, elle essaie autant que possible de faire porter la responsabilité des espacements aux composants de layout externes
- Lorsqu’on veut espacer uniformément les enfants d’une
<section> qui en contient plusieurs, on peut utiliser la règle suivante
section > *+* {
margin-top: 1rem;
}
-
responsive design
- Avec Tailwind, elle utilisait beaucoup une syntaxe basée sur les media queries comme
md:text-xl, qui applique le style text-xl à partir d’une certaine largeur
- Elle essaie maintenant de construire des layouts CSS grid plus souples, qui nécessitent moins de breakpoints
- Avec
auto-fit, il est possible d’obtenir automatiquement 2 colonnes sur grand écran et 1 colonne sur petit écran
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content));
justify-content: center;
-
build system
- Aucun système de build séparé n’est nécessaire pendant le développement
- Le CSS intègre l’instruction
@import, qui permet de découper les fichiers et de les importer
@import "reset.css";
@import "typography.css";
@import "colors.css";
- Le CSS prend aussi en charge les sélecteurs imbriqués
.page {
h2 { ...}
}
- Pour la production, si elle souhaite regrouper les fichiers CSS, elle peut utiliser
esbuild
esbuild style.css --bundle --loader:.svg=dataurl --loader:.woff2=file --outfile=/tmp/out.css
- Elle évite en général d’utiliser des systèmes de build pour le CSS et le JS, mais
esbuild lui paraît acceptable car il repose sur des standards du web et se présente sous la forme d’un binaire Go statique
- Elle a d’ailleurs écrit en 2021 un article sur esbuild et Vue
1 commentaires
Avis sur Lobste.rs
Pour mes projets personnels, je n’utilise presque plus de frameworks CSS/JavaScript
Sans dépendances, il ne peut pas y avoir de vulnérabilités de supply chain. Bien sûr, ce n’est pas le seul type de vulnérabilité, mais ça aide
C’est le résultat combiné de la fatigue des frameworks, de la surcharge de
npm audit, et du fait qu’avec les LLM je me soucie moins du jugement des autres sur la manière d’implémenter les choses. Par exemple, des questions du genre « pourquoi tu n’utilises pas React et Tailwind ? »C’est simplement comme ça que CSS fonctionne
Quand je vois des gens utiliser Tailwind aveuglément sans comprendre ça, j’ai envie de sortir crier sur les nuages. À mes yeux, 90 % de Tailwind, c’est du style inline avec une syntaxe différente, à peine une étape au-dessus de la balise
<FONT>Ce billet de blog explique des choses que j’avais réellement besoin de comprendre
Tailwind fonctionne assez différemment du style inline, et se rapproche bien davantage de CSS. Comme le souligne l’article, une bonne partie des bonnes habitudes qui permettent de bien utiliser Tailwind sont aussi nécessaires pour écrire un CSS efficace. Tailwind se rapproche davantage du fait d’attacher à chaque élément un bloc CSS avec une portée implicite, tout en utilisant un DSL particulier
Je comprends très bien le fonctionnement de CSS, mais le CSS natif reste lourd pour moi, et je ne suis pas très bon non plus en design graphique, donc j’utilise toujours Tailwind. Cet article propose des idées pour structurer son CSS en partant de Tailwind
En tant que personne qui n’a pas très bien suivi les tendances récentes, j’ai l’impression que cet article montre assez bien les pratiques CSS modernes
J’aime aussi le fait qu’il contienne beaucoup de liens vers des articles qui l’ont inspiré. Ça a l’air d’être une bonne lecture, et pour l’instant je n’ai lu que "no outer margin"
En revanche, je reste un peu sceptique sur l’approche qui consiste à définir les styles de base « de bas en haut ». Je ne sais pas vraiment quoi faire d’autre, et ça mérite peut-être d’être essayé, mais les styles de base sont fondamentalement délicats
J’ai vraiment beaucoup aimé cet article
Moi aussi, j’ai appris CSS progressivement en bricolant plein de petits sites, et je pense que ça m’aurait aidé d’avoir dès le départ une approche aussi systémique. J’ai une certaine aversion pour les frameworks, mais à force de ne pas en utiliser, même si je sais implémenter ce que je veux, j’ai souvent l’impression de flotter dans le vide sans structure
J’aime bien que le message ne soit pas « Tailwind est mauvais, utilisez simplement CSS », mais plutôt « Tailwind est excellent, mais il n’est peut-être plus nécessaire aujourd’hui »
J’ai toujours eu du mal à structurer mon CSS à la main, et cet article m’a vraiment fait réfléchir d’une manière très différente
Cette technique de structuration m’a été assez utile pour organiser mon CSS : https://rstacruz.github.io/rscss/
Globalement, ça va bien avec ce que jvns explique dans l’article d’origine, en y ajoutant un peu plus de structure et d’organisation