Dlaczego CSS natywnie nie obsługuje zmiennych i hierarchii?

11

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?

Yugal Jindle
źródło

Odpowiedzi:

15

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:

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.

Yannis
źródło
1
Świetna odpowiedź, myślałem, że brakuje mi czegoś naprawdę oczywistego. :)
Yugal Jindle
1
@YugalJindle Sprawdź dev.w3.org/csswg, aby dowiedzieć się wszystkiego, nad czym pracuje Grupa Robocza CSS - kilka ciekawych rzeczy.
yannis