Éviter les constantes répétées en CSS

Question

Existe-t-il des techniques utiles pour réduire la répétition des constantes dans un fichier CSS ?

(Par exemple, un tas de sélecteurs différents qui devraient tous appliquer la même couleur ou la même taille de police) ?

Answer 1

Récemment, des variables ont été ajoutées aux spécifications CSS officielles.

Les variables vous permettent de faire quelque chose comme ceci :

body, html {
    margin: 0;
    height: 100%;
}

.theme-default {
    --page-background-color: #cec;
    --page-color: #333;
    --button-border-width: 1px;
    --button-border-color: #333;
    --button-background-color: #f55;
    --button-color: #fff;
    --gutter-width: 1em;
    float: left;
    height: 100%;
    width: 100%;
    background-color: var(--page-background-color);
    color: var(--page-color);
}

button {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
}

.pad-box {
    padding: var(--gutter-width);
}

<div class="theme-default">
    <div class="pad-box">
        <p>
            This is a test
        </p>
        <button>
           Themed button
        </button>
    </div>
</div>

Malheureusement, la prise en charge des navigateurs est encore très médiocre. Selon CanIUse, les seuls navigateurs prenant en charge cette fonctionnalité aujourd'hui (9 mars 2016), sont Firefox 43+, Chrome 49+, Safari 9.1+ et iOS Safari 9.3+ :

---

Alternatives :

Jusqu'à ce que les variables CSS soient largement prises en charge, vous pouvez envisager d'utiliser un langage de préprocesseur CSS tel que Moins ou Toupet.

Les préprocesseurs CSS ne vous permettraient pas seulement d'utiliser des variables, mais vous permettraient également de faire tout ce que vous pouvez faire avec un langage de programmation.

Par exemple, dans Sass, vous pourriez créer une fonction comme celle-ci :

@function exponent($base, $exponent) {
    $value: $base;
    @if $exponent > 1 {
        @for $i from 2 through $exponent {
            $value: $value * $base;
        }
    }
    @if $exponent < 1 {
        @for $i from 0 through -$exponent {
            $value: $value / $base;
        }
    }
    @return $value; 
}

Answer 2

Les éléments peuvent appartenir à plusieurs classes, vous pouvez donc faire quelque chose comme ceci :

.DefaultBackColor
{
    background-color: #123456;
}
.SomeOtherStyle
{
    //other stuff here
}
.DefaultForeColor
{
    color:#654321;
}

Et puis dans la partie contenu quelque part :

<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>

Les faiblesses ici sont que cela devient assez verbeux dans le corps et qu'il est peu probable que vous puissiez vous contenter de lister une couleur une seule fois.Mais vous ne pourrez peut-être le faire que deux ou trois fois et vous pourrez regrouper ces couleurs, peut-être dans leur propre feuille.Désormais, lorsque vous souhaitez modifier la palette de couleurs, ils sont tous ensemble et le changement est assez simple.

Mais oui, mon plus gros reproche concernant CSS est l’incapacité de définir vos propres constantes.

Answer 3

Vous devez séparer chaque identifiant ou classe par une virgule, par exemple :

h1,h2 {
  color: #fff;
}

Answer 4

Vous pouvez utiliser des variables globales pour éviter les duplications.

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

Ici, vous pouvez initialiser une variable globale dans :racine sélecteur de pseudo-classe. :racine est le niveau supérieur du DOM.

:root{
    --main--color: #ccc; 
}

p{
  background-color: var(--main-color);
}

h1{
  background-color: var(--main-color);
}

NOTE:Il s'agit d'une technologie expérimentale car la spécification de cette technologie ne s'est pas stabilisée, vérifiez le tableau de compatibilité pour les préfixes appropriés à utiliser dans divers navigateurs.Notez également que la syntaxe et le comportement d'une technologie expérimentale sont susceptibles de changer dans les futures versions des navigateurs à mesure que les spécifications changent. Plus d'infos ici

Cependant, vous pouvez toujours utiliser les feuilles de style syntaxiquement impressionnantes, c'est-à-dire

Dans le cas de Sass, vous devez utiliser $variable_name en haut pour initialiser la variable globale.

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

Answer 5

Vous pouvez utiliser des frameworks CSS dynamiques comme moins.

Answer 6

Personnellement, j'utilise simplement un sélecteur séparé par des virgules, mais il existe une solution pour écrire du CSS par programme.C'est peut-être un peu exagéré pour vos besoins plus simples, mais jetez un œil à CleverCSS (Python)

Answer 7

Essayez les variables globales pour éviter le codage en double

h1 {
  color: red;
}
p {
  font-weight: bold;
}

Ou vous pouvez créer différentes classes

.deflt-color {
  color: green;
}
.dflt-nrml-font {
  font-size: 12px;
}
.dflt-header-font {
  font-size: 18px;
}

Answer 8

Autant que je sache, sans générer par programme le fichier CSS, il n'y a aucun moyen, par exemple, de définir votre nuance de bleu préférée (#E0EAF1) en un seul et même endroit.

Vous pouvez assez facilement écrire un programme informatique pour générer le fichier.Exécutez une simple opération de recherche et de remplacement, puis enregistrez-la sous forme de fichier .css.

Allez à partir de cette source.css…

h1,h2 {
  color: %%YOURFAVORITECOLOR%%;
}

div.something {
  border-color: %%YOURFAVORITECOLOR%%;
}

à cette cible.css…

h1,h2 {
  color: #E0EAF1;
}

div.something {
  border-color: #E0EAF1;
}

avec un code comme celui-ci… (VB.NET)

Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)

Answer 9

Vous pouvez utiliser l'héritage multiple dans vos éléments HTML (par ex. <div class="one two">) mais je ne connais pas de moyen d'avoir des constantes dans les fichiers CSS eux-mêmes.

Ce lien (le premier trouvé lors de la recherche de votre question sur Google) semble avoir un aperçu assez approfondi du problème :

http://icant.co.uk/articles/cssconstants/

Answer 10

Variables CSS, s'il est un jour implémenté dans tous les principaux navigateurs, pourrait un jour résoudre ce problème.

D'ici là, vous devrez soit copier et coller, soit utiliser un préprocesseur de quelque type que ce soit, comme d'autres l'ont suggéré (généralement en utilisant des scripts côté serveur).

Answer 11

    :root {
      --primary-color: red;
    }

    p {
      color: var(--primary-color);
    } 

<p> some red text </p>

Vous pouvez changer la couleur par JS

var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim(); 


document.documentElement.style.setProperty('--primary-color', 'blue');