Чому CSS не підтримує змінні та ієрархію?

Я новачок у розробці інтерфейсу користувача, але мені дуже незручно з тим, як працює CSS.

Моє використання полягає в тому, що я хотів застосувати деякі певні стилі всередині певної divсторінки.

Спроба CSS:

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

Менше спроби:

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

Версія CSS може викликати помилки, оскільки вона змушує повторювати #f30& div.class2кожен раз, коли ви намагаєтеся досягти ієрархії та змінного повторного використання.

Мої запитання:

• Чому цей CSS ускладнює справи?
• Менше нічого не робить нічого особливого - просто робить очевидні вдосконалення та переводить на CSS?
• Що таке CSS хоче мотивувати у користувачів, завдяки чому він просуває такий надмірний стиль кодування?

Я твердо переконаний, що CSS повинен бути тим, що МЕНШЕ. Безумовно, я не помічаю явної переваги того, чому все робиться саме так у CSS. Я думав, що це проблема спадщини, але я здивувався, коли не побачив спроб вирішити це за допомогою CSS3.

Будь ласка, допоможіть мені зрозуміти, як я повинен підходити до CSS?

CSS не намагається ускладнити справи навмисно, він був розроблений з набагато простішою метою на увазі, змінні та ієрархії навряд чи є його єдиними недоліками. LESS та Sass існують спеціально для вирішення цих недоліків, і поки будь-яка можливість не підтримується в основному, вам слід дотримуватися їх.

Зважаючи на це, робоча група CS3 W3C працює над проектами як для змінних CSS, так і для ієрархій CSS:

• Модуль змінних CSS Рівень 1
• Модуль ієрархій CSS Рівень 3

Немає жодного способу сказати, коли або проект буде готовий до впровадження, або як швидко основні браузери приймуть їх. Все, що я можу сказати, - це те, що проект змінних CSS ближче до прийняття. Ви вже можете протестувати драйвери CSS-змінних у Chrome, Safari та Firefox, але майте на увазі, що підтримка в усіх трьох браузерах вважається експериментальною і може підлягати змінам. Докладніше читайте за допомогою змінних CSS на MDN.