Perché CSS non supporta nativamente variabili e gerarchia?

Sono nuovo nello sviluppo dell'interfaccia utente, ma mi sento molto a disagio con il funzionamento dei CSS.

Il mio caso d'uso è che volevo applicare alcuni stili specifici all'interno di un particolare divsu una pagina.

Tentativo CSS:

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

MENO tentativo:

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

La versione CSS può indurre bug, poiché ti costringe a ripetere #f30e div.class2ogni volta che cerchi di raggiungere la gerarchia e il riutilizzo delle variabili.

Le mie domande:

• Perché quel CSS rende le cose difficili?
• MENO non fa nulla di speciale: apporta solo evidenti miglioramenti e si traduce in CSS?
• Cosa vuole che i CSS vogliano motivare gli utenti a causa dei quali promuove uno stile di codifica così ridondante?

Credo fermamente che CSS dovrebbe essere ciò che è MENO. Sicuramente sto trascurando un ovvio vantaggio del perché le cose vengono fatte in questo modo nei CSS. Ho pensato che fosse un problema precedente, ma sono rimasto sorpreso quando non ho visto tentativi di risolverlo con CSS3.

Aiutatemi a capire come devo avvicinarmi ai CSS?

Il CSS non sta cercando di rendere le cose più difficili di proposito, è stato progettato con un obiettivo molto più semplice in mente, variabili e gerarchie non sono certo le sue uniche carenze. MENO e Sass esistono specificamente per ovviare a queste carenze e fino a quando entrambe le funzionalità non sono supportate in modo nativo, è necessario attenersi a esse.

Detto questo, il gruppo di lavoro CSS del W3C sta lavorando alle bozze sia per le variabili CSS che per le gerarchie CSS:

• Variabili CSS Modulo Livello 1
• Gerarchie CSS Modulo Livello 3

Non c'è assolutamente modo di dire quando una delle bozze sarà pronta per l'implementazione o in che modo i principali browser le adotteranno. Tutto quello che posso dire è che la bozza delle variabili CSS è più vicina all'adozione, puoi già testare le variabili CSS dei drive in Chrome, Safari e Firefox, ma tieni presente che il supporto in tutti e tre i browser è considerato sperimentale e soggetto a modifiche. Leggi Utilizzo delle variabili CSS su MDN per maggiori dettagli.