Vermeiden Sie wiederholte Konstanten in CSS

Question

Gibt es nützliche Techniken, um die Wiederholung von Konstanten in einer CSS-Datei zu reduzieren?

(Zum Beispiel eine Reihe verschiedener Selektoren, die alle dieselbe Farbe oder dieselbe Schriftgröße anwenden sollen)?

Answer 1

Kürzlich, Variablen wurden hinzugefügt zu den offiziellen CSS-Spezifikationen.

Mit Variablen können Sie Folgendes tun:

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>

Leider ist die Browserunterstützung immer noch sehr dürftig. Laut CanIUse, Die einzigen Browser, die diese Funktion heute (9. März 2016) unterstützen, sind Firefox 43+, Chrome 49+, Safari 9.1+ und iOS Safari 9.3+:

---

Alternativen:

Bis CSS-Variablen allgemein unterstützt werden, könnten Sie die Verwendung einer CSS-Präprozessorsprache wie z. B. in Betracht ziehen Weniger oder Sass.

Mit CSS-Präprozessoren können Sie nicht nur Variablen verwenden, sondern im Grunde alles tun, was mit einer Programmiersprache möglich ist.

In Sass könnten Sie beispielsweise eine Funktion wie diese erstellen:

@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

Elemente können zu mehr als einer Klasse gehören, Sie können also etwa Folgendes tun:

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

Und dann irgendwo im Inhaltsteil:

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

Die Schwächen hier liegen darin, dass es im Hauptteil ziemlich wortreich wird und es unwahrscheinlich ist, dass Sie es schaffen, eine Farbe nur einmal aufzulisten.Möglicherweise können Sie dies jedoch nur zwei- oder dreimal tun und diese Farben gruppieren, vielleicht auf einem eigenen Blatt.Wenn Sie nun das Farbschema ändern möchten, sind sie alle zusammen und die Änderung ist ziemlich einfach.

Aber ja, mein größter Kritikpunkt bei CSS ist die Unfähigkeit, eigene Konstanten zu definieren.

Answer 3

Sie sollten jede ID oder Klasse durch Kommas trennen, zum Beispiel:

h1,h2 {
  color: #fff;
}

Answer 4

Sie können globale Variablen verwenden, um Duplikate zu vermeiden.

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

Hier können Sie eine globale Variable initialisieren :Wurzel Pseudoklassenselektor. :Wurzel ist die oberste Ebene des DOM.

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

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

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

NOTIZ:Dies ist eine experimentelle Technologie, da die Spezifikation dieser Technologie nicht stabilisiert ist. Überprüfen Sie die Kompatibilitätstabelle, damit die richtigen Präfixe in verschiedenen Browsern verwendet werden können.Beachten Sie außerdem, dass sich die Syntax und das Verhalten einer experimentellen Technologie in zukünftigen Browserversionen ändern können, wenn sich die Spezifikation ändert. Weitere Infos hier

Sie können jedoch jederzeit die Syntactically Awesome Style Sheets verwenden, d. h.

Im Fall von Sass müssen Sie oben $variable_name verwenden, um die globale Variable zu initialisieren.

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

Answer 5

Sie können dynamische CSS-Frameworks wie verwenden weniger.

Answer 6

Persönlich verwende ich nur einen durch Kommas getrennten Selektor, aber es gibt eine Lösung für das programmgesteuerte Schreiben von CSS.Vielleicht ist das für Ihre einfacheren Bedürfnisse etwas übertrieben, aber werfen Sie einen Blick darauf CleverCSS (Python)

Answer 7

Versuchen Sie es mit globalen Variablen, um doppelte Codierung zu vermeiden

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

Oder Sie können verschiedene Klassen erstellen

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

Answer 8

Soweit ich weiß, gibt es ohne die programmgesteuerte Generierung der CSS-Datei beispielsweise keine Möglichkeit, Ihren Lieblingsblauton (#E0EAF1) an einer einzigen Stelle zu definieren.

Sie könnten ganz einfach ein Computerprogramm schreiben, um die Datei zu generieren.Führen Sie einen einfachen Such- und Ersetzungsvorgang aus und speichern Sie ihn dann als CSS-Datei.

Gehen Sie von dieser Quelle aus.css…

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

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

zu diesem Ziel.css…

h1,h2 {
  color: #E0EAF1;
}

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

mit Code wie diesem… (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

Sie können in Ihren HTML-Elementen Mehrfachvererbung verwenden (z. B. <div class="one two">), aber mir ist keine Möglichkeit bekannt, Konstanten in den CSS-Dateien selbst zu haben.

Dieser Link (der erste, der beim Googeln Ihrer Frage gefunden wurde) scheint einen ziemlich detaillierten Einblick in das Problem zu bieten:

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

Answer 10

CSS-Variablen, wenn es jemals in allen gängigen Browsern implementiert wird, könnte dieses Problem eines Tages gelöst werden.

Bis dahin müssen Sie entweder kopieren und einfügen oder einen Präprozessor jeglicher Art verwenden, wie andere vorgeschlagen haben (normalerweise mithilfe serverseitiger Skripterstellung).

Answer 11

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

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

<p> some red text </p>

Sie können die Farbe per JS ändern

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


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