Définir et appliquer des thèmes d'interface utilisateur à l'aide de la bibliothèque MIMCSS CSS-in-JS

L'interface utilisateur modifie dynamiquement le style visuel d'un site Web, illustré par des fonctionnalités comme le mode sombre. Les utilisateurs changent de thèmes via des commandes d'interface utilisateur ou tirent parti des préférences de couleurs de niveau OS. Pour les développeurs, les outils de thème efficaces devraient simplifier la définition du thème et l'application d'exécution. Cet article explore MIMCSS, une bibliothèque CSS-in-JS, et son approche unique du thème en utilisant l'héritage des classes.

Divulgation complète: je suis l'auteur du MIMCSS. Bien que cela puisse sembler auto-promotionnel, je crois que la méthode de thème de MIMCSS est innovante et mérite l'attention.

Stratégies de théâtre

Liens de styles d'interface utilisateur Web Éléments HTML aux entités CSS (classes, IDS). La modification de la représentation visuelle implique:

1. Altération des sélecteurs CSS de l'élément HTML (noms de classe, IDS).
2. Modification des styles CSS pour un élément tout en conservant le sélecteur.

La définition du thème implique généralement moins d'entités de style que les éléments HTML les référençant, en particulier avec des widgets complexes. Par conséquent, la modification des styles de thème est généralement plus efficace que de modifier de nombreux attributs de classe d'éléments HTML.

CSS THEMING

Le CSS traditionnel utilise des feuilles de style alternatives:

<link href="default.css" rel="stylesheet" title="Style par défaut" type="text/css">
<link href="fancy.css" rel="alternate stylesheet" title="Fantaisie" type="text/css">
<link href="basic.css" rel="alternate stylesheet" title="Basique" type="text/css">

Une seule feuille de style est active; Les navigateurs offrent une interface utilisateur pour la sélection de thème. Les noms de règles identiques (noms de classe) sur les feuilles de style sont cruciaux:

 / * default.css * /
.Element {couleur: #fff; }

/ * basic.css * /
.Element {couleur: # 333; }

La commutation de styles de styles ne nécessite aucun changement HTML; Le navigateur recalcule les styles basés sur l'ordre en cascade. Cependant, la prise en charge du navigateur pour des feuilles de styles alternatives est limitée.

CSS-in-JS THEMING

De nombreuses bibliothèques CSS-in-JS gèrent le thème différemment. Les bibliothèques intégrées à réagir (par exemple, composants stylisés) utilisent souvent l'API ThemeProvider et de contexte ou withTheme des composants d'ordre supérieur, déclenchant une rediffusion sur les changements de thème. Les bibliothèques agnostiques du cadre utilisent des méthodes propriétaires, si le thème est même soutenu. Beaucoup priorisent la portée CSS, créant des noms de classe uniques; Les changements de thème nécessitent des modifications HTML.

MIMCSS: une approche différente

MIMCSS combine les forces des feuilles de style alternatives et CSS-in-JS. Il reflète l'approche de feuille de style alternative avec plusieurs variations de style et les entités CSS nommées identiques. Il propose également une programmation orientée objet et une sécurité de type dactylographe, ainsi que les capacités dynamiques de CSS-in-JS.

Fondamentaux MIMCSS

MIMCSS utilise des classes TypeScript pour représenter des feuilles de style. Les règles sont définies comme des propriétés de classe:

 Importer * en tant que CSS à partir de "MIMCSS";

classe Mystyles étend CSS.STYLEDEFINITION {
  significatif = this. $ class ({Color: "orange", Fontstyle: "italic"});
  Critical = this. $ id ({couleur: "rouge", Fontweight: 700});
}

La syntaxe MIMCSS ressemble étroitement au CSS, bien que plus verbeux. Il prend en charge diverses règles CSS (classes, ID, balises, images clés, etc.). Après avoir défini une classe de définition de style, activez-la:

 Soit styles = css.activate (mystyles);

Cela génère des règles CSS dans le DOM. Styles de référence en HTML:

 rendre() {
  retour (
    <div>
      <p classname="{styles.significant.name}">Significatif</p>
      <p id="{styles.critical.name}">Critique</p>
    </div>
  ));
}

Désactiver les styles lorsque cela n'est plus nécessaire:

 CSS.Deativate (Styles);

MIMCSS génère des noms de classe et d'identification uniques (par exemple, MyStyles_significant dans le développement, n2 en production).

Héritage de définition de style

L'héritage simplifie le thème:

 La base de classe étend CSS.STYLEDEFINITION {pad = this. $ class ({padding: 4}); }
classe dérivée étend la base {pad = this. $ class ({padding: 8}); }
Soit dérivé = css.activate (dérivé);

derived.pad.name donne Base_pad , mais le style est { padding: 8px } . Le nom est hérité, mais le style est remplacé. Plusieurs classes dérivées réutilisent le même nom mais appliquent différents styles.

Mimcss theming

MIMCSS THEMING utilise une classe de déclaration de thème définissant les règles CSS et plusieurs classes d'implémentation héritant et dépassant ces règles. Cela reflète l'approche de feuille de style alternative.

Exemple: un thème définit la forme de la bordure:

 Class BorderTheme étend CSS.ThemeDefinition {Bordershape = this. $ class (); }

Classe SquareborderTheme étend la transexuelle {
  bordershape = this. $ class ({border: ["mince", "solide", "vert"], borderInliNestartWidth: "épais"});
}

classe RoundborDerTheme étend la transexuelle {
  bordershape = this. $ class ({border: ["medium", "solide", "bleu"], borderradius: 8});
}

Activer un thème:

 Laissez le thème: BorderTheme = CSS.Activate (SquareBorderTheme);

Un seul thème d'une classe de déclaration donnée peut être actif à la fois.

Référence aux thèmes MIMCSS

Les thèmes définissent souvent des éléments réutilisables (couleurs, tailles, polices). Les propriétés personnalisées CSS sont idéales:

 Class ColorTheme étend CSS.ThemeDefinition {
  bgColor = this. $ var ("couleur");
  frcolor = this. $ var ("couleur");
}

class LightTheme étend ColorTheme {
  bgcolor = this. $ var ("couleur", "blanc");
  frcolor = this. $ var ("couleur", "noir");
}

classe DarkTheme étend ColorTheme {
  bgcolor = this. $ var ("couleur", "noir");
  frcolor = this. $ var ("couleur", "blanc");
}

Propriétés du thème de référence dans les définitions de style:

 classe Mystyles étend CSS.STYLEDEFINITION {
  thème = this. $ use (colorTheme);
  contener = this. $ class ({couleur: this.theme.frcolor, backgroundColor: this.theme.bgcolor});
}

Cela génère des CS à l'aide de propriétés personnalisées ( var(--bgColor) ). Les composants sont découplés à partir d'implémentations de thème spécifiques, permettant une disposition de thème externe. MIMCSS permet également de remplacer la génération de nom interne pour les propriétés personnalisées pour correspondre aux systèmes existants comme la conception de matériaux.

Thèmes multiples sur une seule page

Une seule implémentation de thème par classe de déclaration peut être active simultanément. Cependant, pour afficher plusieurs thèmes côte à côte, utilisez la redéfinition personnalisée basée sur les règles CSS:

 classe Mystyles étend CSS.STYLEDEFINITION {
  thème = this. $ use (colorTheme);
  block = this. $ class ({backgroundColor: this.theme.bgcolor, couleur: this.theme.frcolor});
  top = this. $ class ({"": this.block, "-": [LightTheme]});
  bottom = this. $ class ({"": this.block, "-": [darktheme]});
}

Le L'opérateur combine les noms de classe -- redéfinit les propriétés personnalisées en fonction du thème spécifié.

Conclusion

Le thème basé sur l'héritage de MIMCSS offre une approche unique, combinant une fonctionnalité de feuille de style alternative avec la flexibilité de CSS-in-JS et la sécurité de type de type. Il simplifie la gestion du thème et permet une application d'exécution efficace sans modifier HTML. Explorez la documentation et l'aire de jeux MIMCSS pour plus de détails. Les commentaires sont les bienvenus!

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!