Warum unterstützt CSS Variablen und Hierarchien nicht nativ?

Ich bin neu in der UI-Entwicklung, aber ich fühle mich sehr unwohl mit der Funktionsweise von CSS.

Mein Anwendungsfall ist, dass ich bestimmte Stile innerhalb einer bestimmten divSeite anwenden wollte .

CSS-Versuch:

div.class1 {
    font: normal 12px arial, helvetica, sans-serif;
    font-color: #f30;
}
div.class1 div.class2 {
    border: 1px solid #f30;
}

WENIGER Versuch:

@red: #f30;
@font-family: arial, helvetica, sans-serif;
div.class1 {
    font: normal 12px @font-family;
    font-color: @red;
    div.class2 {
        border: 1px solid @red;
    }

Die CSS-Version kann Fehler verursachen, da Sie gezwungen sind, diese zu wiederholen #f30und div.class2jedes Mal, wenn Sie versuchen, Hierarchie und variable Wiederverwendung zu erreichen.

Meine Fragen:

• Warum macht CSS die Sache schwierig?
• WENIGER macht nichts Besonderes - macht nur offensichtliche Verbesserungen und übersetzt in CSS?
• Was möchte CSS bei Benutzern motivieren, wodurch es einen solch redundanten Codierungsstil fördert?

Ich bin der festen Überzeugung, dass CSS das sein sollte, was WENIGER ist. Auf jeden Fall übersehen ich einen offensichtlichen Vorteil, warum die Dinge in CSS so gemacht werden. Ich dachte, es sei ein altes Problem, aber ich war überrascht, als ich keine Versuche sah, dies mit CSS3 zu lösen.

Bitte helfen Sie mir zu verstehen, wie ich mich CSS nähern soll.

CSS versucht nicht, die Dinge absichtlich schwieriger zu machen, es wurde mit einem viel einfacheren Ziel entwickelt. Variablen und Hierarchien sind kaum die einzigen Mängel. WENIGER und Sass existieren speziell, um diese Mängel zu beheben, und bis eine der beiden Funktionen nativ unterstützt wird, sollten Sie sich an sie halten.

Die CSS-Arbeitsgruppe von W3C arbeitet jedoch an Entwürfen für CSS-Variablen und CSS-Hierarchien:

• CSS-Variablenmodul Ebene 1
• Modul für CSS-Hierarchien Ebene 3

Es ist absolut nicht abzusehen, wann ein Entwurf für die Implementierung bereit sein wird oder wie schnell große Browser ihn übernehmen werden. Ich kann nur sagen, dass der Entwurf für CSS-Variablen kurz vor der Annahme steht. Sie können bereits CSS-Variablen in Chrome, Safari und Firefox testen. Beachten Sie jedoch, dass die Unterstützung in allen drei Browsern als experimentell angesehen wird und Änderungen unterworfen ist. Weitere Informationen finden Sie unter Verwenden von CSS-Variablen in MDN.