web-dev-qa-db-fra.com

 Comment implémenter différents jeux de couleurs dans vos thèmes

Cette question s'adresse aux développeurs de thèmes.

Je sais comment utiliser les paramètres de l'API pour collecter des données d'entrée, mais je me demandais quel était le meilleur moyen d'inclure les styles.

Supposons que vous disposiez de 4 à 5 versions du dessin, chacune avec ses propres règles et images CSS. Options:

  1. Vous collez tous les CSS dans style.css et déclenchez le changement de couleur via une classe de corps. Dans ce cas, le navigateur charge les règles CSS et les images non utilisées (par exemple, l'option sélectionnée: "rouge" et vous avez également des règles pour "bleu", "vert").

  2. Créez des feuilles de style distinctes pour chaque variante et mettez en file d'attente le style sélectionné dans la page. Cela pourrait rendre le thème difficile à gérer, car si vous modifiez un fichier CSS, vous devez également réviser tous les autres.

  3. Créez des feuilles de style distinctes pour chaque variante, mais uniquement avec les styles de couleur supplémentaires. Vous mettez donc en file d'attente un gros fichier "common.css" et le code CSS pour le jeu de couleurs sélectionné (qui est petit). Ici, vous faites une requête HTTP supplémentaire: P

  4. ?

cssstylesheetstyles
3
Alex

Je mettrais tous les CSS communs dans le style.css du thème et créerais des feuilles de style distinctes pour les options de couleur.

Je voudrais également mettre des options de couleur dans leur propre dossier avec les images pour ce style. De cette façon, vous pouvez conserver les mêmes noms de fichiers entre les options de couleur pour faciliter la maintenance du code.

Si vous souhaitez séparer common.css de style.css, vous pouvez utiliser @import common.css de la feuille de l'option de couleur au lieu de la mettre en file d'attente séparément.

3
Evan Mattson

Vous pouvez utiliser MOINS pour ça! Définissez une feuille de style globale et une pour chaque couleur. Définissez des variables pour les codes de couleur dans les feuilles de couleur et utilisez-les dans la feuille globale, puis importez la feuille de style globale dans chacune des feuilles de style de couleur.

Exemple:

global.less

body{
    background: @bgColor;
}

sans rouge

@bgColor: red;

@import "global.less";

Cela vous donne une feuille de style autonome par couleur, vous pouvez donc choisir l'option 2 mais ne conserver qu'une seule feuille de style! Tous les avantages de toutes les options combinées, sans aucun des inconvénients :)

0
kalarzo