MallaDocs
AccueilDémarrage rapideOuvrir Malla

Classes et jetons

Des classes réutilisables, des classes combinées, des jetons de design et des polices pour garder tout un site cohérent.

Guide utilisateur

Les jetons de design et les classes transforment une page de styles ponctuels en design system. Les jetons contiennent les valeurs, les classes contiennent les règles, et les styles locaux gèrent les exceptions.

La cascade, de la priorité la plus basse à la plus haute
ResetUne petite réinitialisation de base.
JetonsDes variables CSS sur :root.
ClassesLes règles partagées, puis les classes combinées.
Styles locauxUne règle par élément. Elle l’emporte.

Jetons de design

Ouvrez l’onglet Tokens de l’inspecteur pour modifier les couleurs, les polices et les espacements du site. Chaque jeton devient une variable CSS, et les champs de style affichent des pastilles de jetons que vous pouvez choisir à la place de valeurs brutes.

css
:root {
  --color-brand: #fe5900;
  --font-heading: Inter;
  --space-md: 16px;
}
  • Renommez un jeton et chaque référence dans les pages, les composants, les classes et les autres jetons est réécrite. C’est une seule étape d’annulation.
  • Supprimez un jeton utilisé et Malla vous indique à combien d’endroits il sert, puis remplace chaque référence par la valeur du jeton : rien ne perd son style.

Polices

Les jetons de police choisissent une police Google et les graisses dont vous avez besoin. Les sites publiés ne chargent que ces graisses, avec font-display: swap.

Classes

Une classe est un ensemble de styles nommé et réutilisable, avec ses propres points de rupture et états. La class bar au-dessus des sections de l’inspecteur liste les classes de la sélection. Tapez pour ajouter une classe existante ou en créer une nouvelle.

  1. Créez une classe

    Sélectionnez un élément, tapez un nom comme card dans la barre de classes et appuyez sur Entrée.

  2. Stylisez la classe

    Vérifiez que la cible de style est la classe, et non les styles locaux, puis modifiez. Chaque élément qui a card se met à jour.

  3. Réutilisez-la

    Ajoutez card à d’autres éléments. N’utilisez les styles locaux que pour de vrais cas uniques.

Classes combinées

Ajoutez une deuxième classe à un élément qui en a déjà une et vous obtenez une classe combinée : une variation qui s’appuie sur sa classe parente. Elle est compilée en un sélecteur plus spécifique, ce qui lui permet de remplacer la classe de base de façon fiable sans toucher aux autres utilisations.

css
.btn { padding: 12px 20px; background: var(--color-brand); }
.btn:hover { opacity: .9; }
.btn.btn-ghost { background: transparent; }   /* combo class */

Bonnes pratiques

  • Mettez les couleurs, les polices et les espacements dans des jetons ; faites référence aux jetons depuis les classes.
  • Nommez les classes d’après leur rôle (card, heading-xl), pas leur apparence (orange-box).
  • Utilisez les classes combinées pour les variantes (btn + btn-ghost) et les composants pour les structures répétées.
  • Les classes inutilisées sont automatiquement exclues du CSS publié.