Est-il possible de faire référence à des valeurs comme « variables » dans CSS?

Question

Je suis en train d'écrire le code HTML et CSS pour une webapp interne correctement. Autant que possible techniquement, je veux que le balisage HTML pour définir le contenu de la page et être complètement indépendant de ce que la mise en page devra être.

De toute évidence, il est impossible de le faire parfaitement. Je meurs un peu à l'intérieur chaque fois que je dois ajouter un div supplémentaire imbriqué dans le seul but de faire le travail de mise en page.

Le dernier problème que j'ai essayé d'aborder est de savoir comment réduire la quantité de texte dupliqué dans mon fichier Css. La chose principale est des couleurs. Tout au long de mon application j'utilise des couleurs pour représenter « propre », « erreurs », « avertissements » et « gracié » et à ce jour à peu près tous les endroits qui utilise les couleurs doit les avoir explicitement définis. Parfois, ils sont utilisés pour les couleurs de texte, parfois les couleurs de fond, parfois les couleurs de la frontière.

Est-il possible d'attribuer une valeur telle que la couleur à un nom, puis faire référence à ce nom dans les propriétés CSS?

Je suis au courant de la façon dont l'héritage fonctionne en CSS et je sais qu'une méthode de réalisation de cet objectif serait d'utiliser les noms de classes multiples sur beaucoup de mes éléments et je pouvais avoir backgroundClean être un style que toutes sortes de utiliser des objets. Mais cela nécessite de faire connaître au HTML de plus de données qui ne concerne que la mise en page stylistique de la page et non les données, comme je le disais je le ferais comme pour éviter.

Question bonus: Quelle est la meilleure pratique pour faire ce genre de choses Suis-je stupide d'essayer de faire HTML + CSS agissent comme un MVC quand il est prêt à le faire? Je sais que le CSS est de direction a toujours été dirigé, mais peut-être c'est pas encore là.

Answer 1

Pourquoi oui, il y a nouvellement introduit variables css pour le faire!

Unfortunetly ... il est pas fait son chemin dans les navigateurs encore, vous ne pouvez pas les utiliser, encore.

Pour obtenir le même comportement, vous aurez besoin d'utiliser une sorte de langage côté serveur à la sortie de la couleur dynamique dans vos fichiers CSS. (Vous pouvez également utiliser une tonne de javascript, mais ce serait affreux)

Donc, en PHP, vous pouvez faire ceci:

styles.php---------------------
<?php
$warningColor = "#f00";
?>

.warning {
     color: <?=$warningColor?>;
}
.error {
     color: <?=$warningColor?>;
}

index.html----------------------

<link rel="stylesheet" src="styles.php" />

Answer 2

avec aucun support du navigateur non. Bien que si vous prétraiter votre CSS avec quelque chose comme SASS vous faites cela et beaucoup plus. SASS améliore CSS est à peu près tous les sens. Il est plus facile et beaucoup plus amusant d'écrire des feuilles de style. Je ne pourrai jamais revenir à l'écriture de CSS à la vanille.

Answer 3

Je ne suis pas sûr que je comprends tout à fait votre problème, mais vous voudrez peut-être envisager d'attribuer simplement une classe particulière pour une couleur. Par exemple, si tous les textes / etc / divs pour un que vous pourriez faire « avertissement » sont rouge vif, dans votre css:

.warning { color: #f00; }

Et puis à chaque fois que vous avez une div, même si elle a déjà des cours supplémentaires, vous ajoutez simplement celui-ci, l'espace séparant les classes:

<div class="message warning">Invalid username.</div>

Une chose à noter est que ce n'est pas considéré comme une bonne pratique d'utiliser des noms de couleurs pour les classes, par exemple, vous ne devez pas définir une classe nommée « bleu ». Vous devriez essayer d'utiliser le nom de ce que la couleur représente, au cas où vous souhaitez modifier à l'avenir.

Modifier. Vous avez dit cela à la question, mais pour autant que je sais que ça va être la meilleure façon de le faire, donc je voulais actuellement possible de développer un peu

Answer 4

Je "ai juste découvert ce (mentionné sur le Podcast StackExchange): http://lesscss.org/

Il est le javascript qui vous permet de mettre des variables (et d'autres capacités) dans votre CSS.

Answer 5

Je pense que la meilleure façon pour vous d'y arriver serait du côté du serveur. Demandez à votre CSS être traitée par le serveur afin que vous puissiez sortie tout ce que vous le souhaitez.

Par exemple, si vous utilisez C #, vous référencer les variables à l'aide du bloc de script

width: <%= Width %>

Answer 6

Il est impossible de le faire avec HTML et CSS simple.

Vous pouvez aller pour générer le CSS à la volée lorsque demandé d'atteindre la même effet; Cependant, vous devrez contrôler la mise en cache de ces CSS très soigneusement pour trouver le point d'équilibre entre le contrôle total de la production et de réduire au minimum l'utilisation de la bande passante pour l'utilisateur.

Vous pouvez également mettre en œuvre avec jQuery ou tout autre framework JavaScript, mais qui met plus de travail sur le navigateur et si elle est utilisée sans restriction peut rendre votre page ne répond pas à l'utilisateur.

Answer 7

Une autre solution possible consiste à inclure plusieurs définitions pour chaque style ...

.error{ text-decoration: underline; font-weight: bolder}

.cancelled{ text-decoration: line-through; font-style: italic;}

.warning{font-weight: bold}

.comment{font-size: smaller; font-style: italic}
.
.
.

.error, .cancelled { color: red };

.warning, .comment {color: green};

La chose clé ici est que vous avez décidé que l'erreur et devrait être la annulé même couleur que l'autre et la mise en garde et les commentaires doivent être de la même couleur que l'autre. Les couleurs réelles à utiliser sont définies séparément aux autres attributs de style et permettre à une seule valeur à modifier, si une mise à jour de couleur nécessaire.

L'avertissement que je donnerais à cela, est que vos définitions de style sont divisés en deux endroits, donc quelqu'un peut mettre à jour la principale d'utiliser une couleur différente, puis passer beaucoup de temps se gratter la tête avant de se rendre compte pourquoi il n'a aucun effet -. par exemple parce que la deuxième définition l'outrepasse

L'approche côté serveur mentionné par @Bob et Tom Ritter, est également utile d'envisager mais, comme l'approche que je suggère, est sensible aux problèmes de mise en cache.

Answer 8

Oui - il est appelé jQuery. Utilisez JavaScript et une bonne bibliothèque JavaScript (jQuery est excellent) et de manipuler ce que vous avez besoin de cette façon.

Answer 9

Si vous ne voulez pas ou n'ont pas accès aux scripts côté serveur, une solution de contournement serait d'utiliser Javascript sur le client. Juste quelque chose avec document.write () ferait l'affaire. Le seul problème est les sauts de ligne ...

<script type="text/javascript">
<!--
var sColor = "#f0000";
var myCSS = ".red {" +
             "    color: " + sColor+
              "}" +
             ".error { " +
                  color: " + sColor +
             "}";

document.write(myCSS);
-->
</script>

Pas trop Checklist pour écrire ou lire (à mon humble avis) et assez simple à maintenir ... Personnellement, je préférerais un langage côté serveur. De cette façon, vous êtes en contrôle de ce qui se passe complètement. Ou au moins un peu plus. ; -)