CSS Zero-Runtime avec extrait de vanille

CSS peut améliorer les performances et l’expérience utilisateur d’une application. Vanilla Extract est une alternative au CSS-in-JS qui permet d’écrire du CSS sans exécution à l’aide de TypeScript ou JavaScript.

L’expérience utilisateur est importante – et l’a toujours été, mais nous pouvons convenir que l’accent est davantage mis de nos jours – car elle se concentre sur la création d’une expérience positive et efficace pour l’utilisateur lorsqu’il interagit avec un site Web ou une application. Cela contribue à accroître la satisfaction et la fidélité des utilisateurs, et peut également contribuer à améliorer l’efficacité globale du site Web ou de l’application.

CSS joue un grand rôle dans l’expérience utilisateur car il est utilisé pour contrôler l’apparence visuelle du contenu. Nous pouvons déterminer quels éléments nous allons rendre, et comment et quand ils vont être rendus. L’utilisation efficace de CSS fait une différence non seulement pour les clients, mais aussi pour les développeurs.

Avoir un CSS bien écrit peut faire la différence pour les développeurs car cela peut aider à rendre leur code plus organisé, maintenable et efficace. Cela peut faire gagner du temps et réduire le risque d’erreurs, permettant aux développeurs de travailler plus efficacement.

CSS peut également améliorer les performances d’une application en réduisant la quantité de code qui doit être chargée et traitée. Cela améliorera la vitesse de chargement et la réactivité globale de l’application. C’est pourquoi CSS est si important pour les applications modernes et pourquoi il devrait y avoir une préoccupation quant à la façon dont nous écrivons actuellement notre code CSS.

Le problème avec CSS-in-JS

CSS-en-JS a été largement adopté par la communauté React il y a quelques années. Nous pouvons dire que le majorité des développeurs React utilisent des bibliothèques CSS-in-JS.

Alors, quel est le problème avec CSS-in-JS ? Nous pouvons en nommer quelques-uns :

• Augmente la taille du paquet
  En incluant les styles CSS dans le code JavaScript plutôt que dans un fichier CSS séparé, la taille du bundle augmente. Même si ce n’est pas grand-chose, cela peut faire une différence dans l’expérience utilisateur et la vitesse de chargement.

• Augmente les frais généraux d’exécution
  Chaque fois que vous rendez un seul composant de style, un Context.Consumer sera créé. Ce Context.Consumer sera utilisé pour gérer les règles générales de style de votre application. Maintenant, imaginez que vous ayez 500 ou 1000 composants de style différents dans votre application. C’est beaucoup de temps d’exécution supplémentaire.

• Manque de portabilité
  Comme Brad Frost l’a déclaré dans son «Quel est le problème avec css-in-js ?” :

Même si CSS-in-JS est une solution plus puissante et élégante, elle ne fonctionne que pour les environnements pilotés par JS. Que se passe-t-il donc si une organisation a des projets React en jeu, mais aussi des projets Drupal, WordPress ou [anything else] projets qu’ils doivent unifier sous le même système de conception ? Doivent-ils re-plateformer toute leur architecture technique juste pour obtenir des styles de boutons mis à jour ?

Même si les bibliothèques CSS-in-JS sont très bonnes, nous devons toujours considérer leur coûts de performance avant de les utiliser.

Zéro exécution

Lorsqu’une application Web est exécutée sans nécessiter de téléchargements supplémentaires, on parle de temps d’exécution nul. Les utilisateurs peuvent accéder aux applications Web modernes et les utiliser rapidement et facilement sans avoir à attendre que des ressources supplémentaires soient chargées ou installées, ce qui est essentiel pour les applications Web modernes. Qu’est-ce que cela a à voir avec le CSS ? Tout.

L’exécution Zero CSS est une technique permettant d’appliquer des styles à un site Web ou à une application sans avoir besoin d’un traitement d’exécution supplémentaire du navigateur. L’utilisation de zéro runtime CSS peut aider à améliorer les performances d’un site Web ou d’une application en réduisant la quantité de traitement d’exécution nécessaire pour appliquer les styles. Cela peut entraîner des temps de chargement plus rapides et une expérience utilisateur plus agréable.

Extrait de vanille et CSS Zero-Runtime

Extrait de vanille est un package permettant d’écrire des CSS à exécution nulle à l’aide de TypeScript ou de JavaScript. Il possède des fonctionnalités étonnantes telles que les noms de classe à portée locale, les variables CSS, le framework agnostic, le système de thème de haut niveau et bien d’autres. Voyons les fonctionnalités les plus importantes de Vanilla Extract et pourquoi cela peut être une bonne alternative pour écrire du code CSS.

Entièrement sécurisé avec TypeScript

Pour commencer, la meilleure caractéristique de Vanilla Extract est que la bibliothèque est entièrement écrite en TypeScript. L’éditeur de code se complétera automatiquement en fonction de la forme de votre objet de thème lorsque vous commencerez à écrire vos styles.

import { style } from '@vanilla-extract/css';

const styles = style({
  backgroundColor: 'green',
  color: 'white',
  fontSize: '1.2rem'
  fontWeight: 'bold', 
});

Thématisation

Nous pouvons facilement définir des thèmes en utilisant des contrats de jetons profondément imbriqués. Cela nous aide à nous assurer que nous utilisons des valeurs cohérentes dans tous nos styles. De cette façon, nous n’ajouterons jamais une variable qui n’existe pas dans notre code CSS.

import { style } from '@vanilla-extract/css';

const [theme, vars] = createTheme({
  color: {
    blue: '#3366FF',
    green: '#78E83C',
    red: '#FC5623',
    yellow: '#FCDD44',
  },
});

variables

Nous pouvons définir des variables et les utiliser dans nos styles sans aucune abstraction.

import { style, createVar } from '@vanilla-extract/css';

const accentVar = createVar();

export const green = style({
  vars: {
    [accentVar]: 'green'
  }
});

export const red = style({
  vars: {
    [accentVar]: 'red'
  }
});

Il y a beaucoup d’autres avantages à mentionner. Une bonne caractéristique de Vanilla Extract est sa syntaxe facile à utiliser. Nous pouvons commencer rapidement et n’avons pas besoin d’écrire beaucoup de code puisque nous utilisons TypeScript, qui est essentiellement JavaScript. Il convient également de mentionner que la bibliothèque est indépendante du framework, ce qui nous permet de réutiliser notre code où nous le voulons.

Puisque nous avons lu un peu sur l’extrait de vanille, il est temps de jeter un œil à quelques exemples. Nous utiliserons Vanilla Extract pour écrire notre code CSS et créer un projet de tâches React.

Tout d’abord, nous allons créer notre composant App. À l’intérieur de ce composant, nous allons avoir une entrée et un bouton. Nous les utiliserons pour rassembler les tâches que nous voulons ajouter, et le bouton les ajoutera.

Après cela, nous aurons une liste de tâches qui nous sera rendue avec un bouton pour supprimer la tâche. Assez simple, l’intention ici est de montrer les fonctionnalités puissantes de l’extrait de vanille. L’ensemble de notre composant App devrait ressembler à ceci :

import * as React from "react";

const App = () => {
  const [value, setValue] = React.useState<string>("");
  const [items, setItems] = React.useState<Array<string>>([]);

  const onAddItem = (item: string) => {
    setItems([...items, item]);
    setValue("");
  };

  const onRemoveItem = (index: number) => {
    setItems([...items.slice(0, index), ...items.slice(index + 1)]);
  };

  return (
    <div className="App">
      <div>
        <input
          value={value}
          type="text"
          onChange={(e) => setValue(e.target.value)}
        />
        <button onClick={() => onAddItem(value)}>Add</button>
      </div>

      <div>
        {items.map((item, index) => (
          <div key={index}>
            <h3>{item}</h3>
            <button onClick={() => onRemoveItem(index)}>x</button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;

Maintenant, nous allons créer un nouveau fichier appelé theme.css.ts. Dans ce fichier, nous allons créer notre thème. Définissons un nouveau thème et ajoutons des couleurs, des polices, etc. :

import { createTheme } from "@vanilla-extract/css";

export const [theme, vars] = createTheme({
  color: {
    light_gray: "#edf2f4",
    gray: "#8d99ae",
    red: "#ef233c",
    navy: "#2b2d42"
  },
  fonts: {
    heading: "Georgia, Times, Times New Roman, serif",
    body: "system-ui"
  },
  space: {
    small: "4px",
    medium: "8px"
  }
});

L’utilisation de createTheme de Vanilla Extract lui fera renvoyer un nom de classe et un contrat de nom (qui est une structure de données typée de variables CSS).

Maintenant, nous allons créer un nouveau fichier appelé styles.css.ts et ajouter des styles à nos composants. La première chose que nous allons styliser est notre texte. Le style sera appliqué à une nouvelle variable appelée todoText. Nous utilisons l’objet vars que nous avons importé de notre thème pour accéder aux données du thème que nous venons de créer, puis nous pouvons obtenir la valeur que nous voulons de notre thème.

export const todoText = style({
  color: vars.color.gray,
  fontFamily: vars.fonts.body,
  fontSize: 16
});

Nous allons également créer une nouvelle variable nommée todoButton pour le bouton.

export const todoButton = style({
  backgroundColor: vars.color.red,
  color: vars.color.light_gray,
  fontFamily: vars.fonts.body,
  fontSize: 16
});

L’ensemble de notre fichier devrait ressembler à ceci :

import { style } from "@vanilla-extract/css";
import { vars } from "./theme.css";

export const todoText = style({
  color: vars.color.gray,
  fontFamily: vars.fonts.body,
  fontSize: 16
});

export const todoButton = style({
  backgroundColor: vars.color.red,
  color: vars.color.light_gray,
  fontFamily: vars.fonts.body,
  fontSize: 16
});

Nous sommes maintenant prêts à utiliser nos styles. Tout ce que nous avons à faire est d’importer notre thème et nos styles dans notre composant, puis de les transmettre à nos éléments.

import { theme } from "./theme.css";
import * as styles from "./styles.css";

Nous pouvons maintenant utiliser nos styles pour accéder à n’importe quelle valeur de style que nous avons attribuée à nos composants. Nous appliquerons les styles todoText et todoButton à notre texte et à notre bouton, il devrait donc ressembler à ceci :

<div key={index}>
  <h3 className={styles.todoText}>{item}</h3>
  <button onClick={() => onRemoveItem(index)}>x</button>
</div>

Il s’agit d’une démonstration simple mais efficace de la puissance de l’extrait de vanille. Une chose à noter est que l’extrait de vanille ne peut pas être utilisé avec une application de création de réaction simple, mais il peut être utilisé avec Craco. Si vous voulez l’utiliser avec l’ARC et cherchez de l’aide, ce blog vous montrera comment.

Conclusion

Lorsque vous configurez Vanilla Extract et que vous commencez à l’utiliser, vous remarquerez une augmentation de votre productivité. Il dispose d’une excellente API de style de type sécurisé et ne nécessite aucune exécution.

Le temps d’exécution zéro est une technique intrigante qui peut aider à améliorer les performances d’un site Web. Cependant, il ne s’agit pas d’une solution unique et peut ne pas convenir à tous les projets. Il est essentiel de peser les compromis et de déterminer si le CSS à temps d’exécution zéro convient à vos besoins spécifiques.