Dlaczego CSS natywnie nie obsługuje zmiennych i hierarchii?

Jestem nowy w tworzeniu interfejsu użytkownika, ale czuję się bardzo nieswojo z tym, jak działa CSS.

Mój przypadek użycia polega na tym, że chciałem zastosować pewne określone style wewnątrz określonego divna stronie.

Próba CSS:

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

MNIEJ próby:

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

Wersja CSS może powodować błędy, ponieważ zmusza Cię do powtarzania #f30i za div.class2każdym razem, gdy próbujesz osiągnąć hierarchię i ponowne użycie zmiennych.

Moje pytania:

• Dlaczego to CSS utrudnia pracę?
• MNIEJ nic specjalnego - po prostu wprowadza oczywiste ulepszenia i przekłada się na CSS?
• Co CSS chce motywować użytkowników, dzięki czemu promuje tak zbędny styl kodowania?

Jestem przekonany, że CSS powinien być tym, czym jest MNIEJ. Zdecydowanie przeoczam jakąś oczywistą zaletę tego, dlaczego tak się dzieje w CSS. Myślałem, że to był problem ze starszymi wersjami, ale byłem zaskoczony, gdy nie widziałem żadnych prób rozwiązania tego problemu za pomocą CSS3.

Pomóż mi zrozumieć, jak powinienem podejść do CSS?

CSS nie próbuje utrudniać celowo, został zaprojektowany z myślą o znacznie prostszym celu, zmienne i hierarchie nie są jego jedynymi wadami. LESS i Sass istnieją specjalnie po to, by zaradzić tym niedociągnięciom i dopóki jedna z tych możliwości nie zostanie natywnie obsługiwana, powinieneś się ich trzymać.

To powiedziawszy, Grupa Robocza CSS W3C pracuje nad szkicami zarówno dla zmiennych CSS, jak i hierarchii CSS:

• Moduł Zmiennych CSS Poziom 1
• Moduł Hierarchii CSS Poziom 3

Nie ma absolutnie żadnego sposobu, aby określić, kiedy któryś szkic będzie gotowy do wdrożenia lub jak szybko główne przeglądarki go zastosują. Mogę tylko powiedzieć, że projekt Zmiennych CSS jest bliżej przyjęcia, możesz już przetestować zmienne CSS w Chrome, Safari i Firefox, ale pamiętaj, że wsparcie we wszystkich trzech przeglądarkach jest uważane za eksperymentalne i może ulec zmianie. Przeczytaj Używanie zmiennych CSS w MDN, aby uzyskać więcej informacji.