Vermeiden von wiederholten Konstanten in CSS

Lesezeit: 5 Minuten

Benutzer-Avatar
Matt Sheppard

Gibt es nützliche Techniken zum Reduzieren der Wiederholung von Konstanten in einer CSS-Datei?

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

  • w3.org/People/Bos/CSS-Variablen

    – Givenkoa

    2. November 2012 um 11:31 Uhr

  • Wenn Sie immer noch Stack Overflow verwenden, möchten Sie vielleicht die akzeptierte Antwort aktualisieren, jetzt hat CSS Variablen!

    – Mikemaccana

    29. Mai 2019 um 14:23 Uhr

Benutzer-Avatar
John Slegers

Vor kurzem, Variablen wurden hinzugefügt zu den offiziellen CSS-Spezifikationen.

Mit Variablen können Sie so etwas 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 schlecht. Laut CanIUsedie 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+ :

Geben Sie hier die Bildbeschreibung ein


Alternativen :

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

CSS-Präprozessoren würden Ihnen nicht nur erlauben, Variablen zu verwenden, sondern Ihnen so ziemlich alles ermöglichen, was Sie mit einer Programmiersprache tun können.

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; 
}

  • Es wird empfohlen, benutzerdefinierte CSS-Eigenschaften (auch bekannt als Variablen) zu definieren :root{} Selektor, um Parser, die nichts über Variablen wissen, nicht zu beschädigen.

    – Volker E.

    16. Mai 2016 um 23:59 Uhr

  • @VolkerE. Benutzerdefinierte Eigenschaften/Variablen werden wie jede andere Eigenschaft definiert. Sie müssen in einen Selektor eingefügt werden. Das könnte sein :root wenn sie global angewendet werden sollen, aber es könnte auch jeder andere Selektor sein. Browser, die keine benutzerdefinierten Eigenschaften / Variablen unterstützen (sollten), ignorieren diese Eigenschaften einfach, da die CSS-Spezifikationen festlegen, dass alle unbekannten Eigenschaften ignoriert werden sollten!

    – John Slegers

    17. Mai 2016 um 11:08 Uhr


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

.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 sind, dass es im Körper ziemlich wortreich wird und Sie es wahrscheinlich nicht schaffen werden, nur einmal eine Farbe aufzulisten. Aber Sie können es vielleicht nur zwei- oder dreimal tun, und Sie können diese Farben zusammen gruppieren, vielleicht in einem eigenen Blatt. Wenn Sie jetzt das Farbschema ändern möchten, sind sie alle zusammen und die Änderung ist ziemlich einfach.

Aber ja, meine größte Beschwerde bei CSS ist die Unfähigkeit, eigene Konstanten zu definieren.

  • >”Aber ja, meine größte Beschwerde bei CSS ist die Unfähigkeit, eigene Konstanten zu definieren.”. Ich vermisse auch keine Grundrechenarten und keine Wenn-Bedingungen. Ich würde gerne sagen können “Breite: 100% – 10px”

    – Hoffmann

    26. September 2012 um 17:12 Uhr


  • @Hoffmann [some time later] Boom, jetzt (bald) haben wir calc(). 🙂

    – Victor Zamanian

    22. April 2013 um 15:54 Uhr

  • @VictorZamanian Ich werde mich sehr freuen, wenn alle gängigen Browser dies unterstützen. Für die Neugierigen hier eine Dokumentation: developer.mozilla.org/en-US/docs/CSS/calc#Browser_compatibility

    – Hoffmann

    22. April 2013 um 21:05 Uhr

  • Ah, ohne etwas Verrücktheit könnte es niemals Teil der CSS-Spezifikation sein: “Hinweis: Die Operatoren + und – müssen immer von Leerzeichen umgeben sein. Der Operand von calc(50% -8px) wird beispielsweise als Prozentsatz geparst gefolgt von einer negativen Länge, ein ungültiger Ausdruck, während der Operand von calc(50% – 8px) ein Prozentsatz ist, gefolgt von einem Minuszeichen und einer Länge.”

    – Hoffmann

    22. April 2013 um 21:07 Uhr

  • @VictorZamanian Ja, sicher, C analysiert diese Art zur Kompilierzeit, sodass es keine Leistungseinbußen gibt. CSS muss im laufenden Betrieb analysiert werden, also denke ich, dass es von ihrer Seite beabsichtigt sein könnte. Wie auch immer, ich bin auch mit calc() zufrieden, aber ich frage mich, ob wir sagen können: “width: calc(100% – border-right – border-left)” zum Beispiel, von der Mozilla-Website scheinen wir das nicht zu können in der Lage sein.

    – Hoffmann

    23. April 2013 um 14:41 Uhr


Benutzer-Avatar
KevinUK

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

h1,h2 {
  color: #fff;
}

  • das ist einfach, aber nützlich

    – Mudasir

    9. April 2014 um 10:46 Uhr

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 in initialisieren :Wurzel Pseudo-Klassenselektor. :Wurzel ist die oberste Ebene des DOM.

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

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

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

HINWEIS: Dies ist eine experimentelle Technologie. Da sich die Spezifikation dieser Technologie noch nicht stabilisiert hat, überprüfen Sie die Kompatibilitätstabelle auf die richtigen Präfixe zur Verwendung in verschiedenen Browsern. Beachten Sie auch, dass die Syntax und das Verhalten einer experimentellen Technologie in zukünftigen Versionen von Browsern geändert werden können, wenn sich die Spezifikation ändert. Mehr Infos hier

Sie können jedoch immer die Syntactically Awesome Style Sheets verwenden, dh

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;
}

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

Benutzer-Avatar
fcurella

Persönlich verwende ich nur einen durch Kommas getrennten Selektor, aber es gibt eine Lösung zum programmgesteuerten Schreiben von CSS. Vielleicht ist dies ein wenig übertrieben für Ihre einfacheren Bedürfnisse, aber sehen Sie sich das an CleverCSS (Python)

Benutzer-Avatar
danke: D

Probieren Sie globale Variablen aus, 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;
}

1006020cookie-checkVermeiden von wiederholten Konstanten in CSS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy