CSS 'juste à temps'

La montée en puissance du CSS atomique et de sa compilation "instantanée": une nouvelle façon d'écrire CSS

ACSS.IO est considéré comme le premier projet à adopter le concept de "CSS atomique", et son cœur réside dans la compilation de CSS. Vous avez juste besoin d'écrire CSS comme ceci:

<code><div>
  texte
</div></code>

Il génère un CSS comme ceci:

 <code>.C\(\#333\) { color: #333; } .P\(20px\) { padding: 20px; }</code>

(ou code similaire).

La clé est qu'elle ne génère que le CSS dont vous avez réellement besoin, pas plus ou moins. La quantité finale générée de code CSS est beaucoup plus petite que celle de la feuille de style normale.

Ce processus de compilation est appelé CSS "juste à temps".

Le framework populaire de vent arrière soutient également cette approche. Pour moi, cela a bouleversé l'état d'esprit de Tailwind. Au lieu de fournir un grand nombre de classes de services publics CSS, puis de "nettoyer" des pièces inutilisées, il ne crée que le CSS nécessaire depuis le début.

Je pense que le concept de CSS "instantané" est en popularité. J'ai vu l'assembleur CSS récemment et cela le prend très au sérieux. Cela ne fonctionne pas comme utiliser des classes, mais comme ceci:

<code><div x-style="grid; gap:1rem; grid-rows:1; grid-cols:1; sm|grid-cols:3">
  Soumettre
</div></code>

Je suis un peu en conflit avec cette approche. D'une part, j'aime la façon dont il styles sans quitter le modèle, et surtout comme la très petite quantité de code CSS qu'elle génère, car CSS est une ressource de blocage. Mais d'un autre côté, je n'aime pas que ce soit une abstraction restrictive de CSS lui-même, vous laissant dans la mesure où les outils prennent en charge les fonctionnalités natives de CSS. Cela rend également HTML un peu compliqué - bien que je sois habitué à des choses comme les gestionnaires d'événements en ligne dans JSX.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!