Open accessoires (et propriétés personnalisées en tant que système)

Les propriétés personnalisées CSS offrent une approche simple des jetons de conception: des unités réutilisables comme les couleurs, les polices, l'espacement et le timing. S'appuyer principalement sur ces jetons favorise une conception propre et cohérente - un objectif clé dans le développement Web. Cette approche reflète l'attrait des cadres de classe utilitaire:

La popularité des cadres de classe utilitaire provient de leurs classes préconfigurées, conduisant à des conceptions esthétiquement agréables. La sélection limitée de valeurs assure un look cohérent et professionnel.

Considérez ces exemples: en utilisant des classes prédéfinies:

<h1> Tête</h1>

... est comparable à l'utilisation de propriétés personnalisées CSS:

 html {
  - Color-primaire: vert;
  --Tize-grand: 3rem;
  / * ... plus de jetons * /
}

H1 {
  Couleur: var (- couleur-primaire);
  taille de police: var (- taille-taille);
}

Les deux offrent des options de construction zéro. Des cadres comme les tachyons offrent des cours de services publics prêts à l'emploi, tandis que Windi utilise un compilateur juste à temps. De même, Pollen propose une bibliothèque prédéfinie de propriétés personnalisées, et les accessoires ouverts innovants utilisent un compilateur juste à temps pour inclure uniquement les propriétés d'occasion.

Présentation des accessoires ouverts:

Open d'accessoires est essentiellement une collection complète de propriétés personnalisées CSS, servant de base robuste pour le style. Il met l'accent sur une approche "Propriété personnalisée", reflétant la pratique établie des jetons de conception avec un ensemble d'options prédéfinies.

Les parallèles sont clairs:

Les valeurs par défaut attrayantes des accessoires ouvrir sont probablement son principal tirage.

Cependant, les accessoires ouverts n'éliminent pas le besoin d'éléments de nommage; Vous utilisez toujours des sélecteurs CSS standard (similaires aux classes nommées) aux éléments cible et style. La principale différence consiste à tirer parti des propriétés personnalisées prédéfinies au lieu de créer manuellement des valeurs.

La bibliothèque Core Open d'accessoires (source disponible) ne pèse que 4,4 Ko (basée sur les mesures Devtools). Cela exclut votre CSS personnalisé, représentant des frais généraux minimaux. Alors que les ProPpacks supplémentaires augmentent la taille, ils restent petits et la compilation juste en temps répond aux problèmes de taille. Vous pouvez expérimenter cela sur Stackblitz.

Open d'accessoires offre une solution convaincante. Sa dépendance à l'égard de la CSS standard assure une compatibilité et une flexibilité futures.

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!