Evitare costanti ripetute nei CSS

Question

Esistono tecniche utili per ridurre la ripetizione delle costanti in un file CSS?

(Ad esempio, un gruppo di selettori diversi che dovrebbero applicare tutti lo stesso colore o la stessa dimensione del carattere)?

Answer 1

Recentemente, sono state aggiunte delle variabili alle specifiche ufficiali CSS.

Le variabili ti permettono di fare qualcosa del genere:

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>

Sfortunatamente, il supporto del browser è ancora molto scarso. Secondo CanIUse, gli unici browser che supportano questa funzionalità oggi (9 marzo 2016), sono Firefox 43+, Chrome 49+, Safari 9.1+ e iOS Safari 9.3+:

---

Alternative:

Fino a quando le variabili CSS non saranno ampiamente supportate, potresti prendere in considerazione l'utilizzo di un linguaggio pre-processore CSS come Meno O Sass.

I preprocessori CSS non ti permetterebbero solo di usare variabili, ma praticamente ti permetterebbero di fare tutto ciò che puoi fare con un linguaggio di programmazione.

Ad esempio, in Sass, potresti creare una funzione come questa:

@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

Gli elementi possono appartenere a più di una classe, quindi puoi fare qualcosa del genere:

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

E poi nella parte del contenuto da qualche parte:

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

I punti deboli qui sono che diventa piuttosto prolisso nel corpo ed è improbabile che tu riesca a elencare un colore solo una volta.Ma potresti riuscire a farlo solo due o tre volte e puoi raggruppare insieme quei colori, magari in un foglio separato.Ora, quando vuoi cambiare la combinazione di colori, sono tutti insieme e il cambiamento è piuttosto semplice.

Ma sì, la mia più grande lamentela con i CSS è l'incapacità di definire le proprie costanti.

Answer 3

Dovresti separare con virgole ogni ID o classe, ad esempio:

h1,h2 {
  color: #fff;
}

Answer 4

È possibile utilizzare variabili globali per evitare duplicazioni.

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

Qui puoi inizializzare una variabile globale in :radice selettore di pseudoclasse. :radice è il livello più alto del DOM.

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

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

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

NOTA:Questa è una tecnologia sperimentale perché la specifica di questa tecnologia non si è stabilizzata, controlla la tabella di compatibilità per i prefissi adeguati da utilizzare in vari browser.Tieni inoltre presente che la sintassi e il comportamento di una tecnologia sperimentale sono soggetti a modifiche nelle versioni future dei browser man mano che cambiano le specifiche. Maggiori informazioni qui

Tuttavia, puoi sempre utilizzare i fogli di stile sintatticamente fantastici, ad es.

Nel caso Sass, devi usare $variable_name in alto per inizializzare la variabile globale.

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

Answer 5

Puoi utilizzare framework CSS dinamici come meno.

Answer 6

Personalmente, utilizzo solo il selettore separato da virgole, ma esiste qualche soluzione per scrivere CSS a livello di codice.Forse questo è un po' eccessivo per le tue esigenze più semplici, ma dai un'occhiata CleverCSS (Pitone)

Answer 7

Prova le variabili globali per evitare codifiche duplicate

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

Oppure puoi creare classi diverse

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

Answer 8

Per quanto ne so, senza generare a livello di codice il file CSS, non c'è modo, ad esempio, di definire la tua tonalità di blu preferita (#E0EAF1) in un solo punto.

Potresti facilmente scrivere un programma per computer per generare il file.Esegui una semplice operazione di ricerca e sostituzione e quindi salva come file .css.

Vai da questo source.css…

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

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

a questo target.css…

h1,h2 {
  color: #E0EAF1;
}

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

con codice come questo... (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

Puoi utilizzare l'ereditarietà multipla nei tuoi elementi html (ad es. <div class="one two">) ma non sono a conoscenza di un modo per avere costanti nei file CSS stessi.

Questo collegamento (il primo trovato cercando su Google la tua domanda) sembra dare uno sguardo abbastanza approfondito al problema:

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

Answer 10

Variabili CSS, se mai verrà implementato in tutti i principali browser, un giorno potrebbe risolvere questo problema.

Fino ad allora, dovrai copiare e incollare oppure utilizzare un preprocessore di qualsiasi tipo, come altri hanno suggerito (in genere utilizzando lo scripting server-sider).

Answer 11

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

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

<p> some red text </p>

Puoi cambiare colore con JS

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


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