Почему 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 усложняет ситуацию?
• LESS не делает ничего особенного - просто делает очевидные улучшения и переводит на CSS?
• Что именно CSS хочет мотивировать у пользователей, из-за чего он продвигает такой избыточный стиль кодирования?

Я твердо верю, что CSS должен быть тем, чем является LESS. Определенно, я упускаю из виду очевидное преимущество того, почему так происходит в CSS. Я думал, что это унаследованная проблема, но я был удивлен, когда не увидел попыток решить эту проблему с помощью CSS3.

Пожалуйста, помогите мне понять, как я должен подходить к CSS?

CSS не пытается специально усложнить задачу, он был разработан с гораздо более простой целью, переменные и иерархии едва ли являются его единственными недостатками. LESS и Sass существуют специально для устранения этих недостатков, и до тех пор, пока любая из этих возможностей не будет изначально поддерживаться, вам следует придерживаться их.

Тем не менее, рабочая группа CSS W3C работает над черновиками для переменных CSS и иерархий CSS:

• Модуль CSS Переменные Уровень 1
• Модуль Иерархии CSS Уровень 3

Нет абсолютно никакого способа определить, когда черновой вариант будет готов к внедрению или как скоро основные браузеры примут его. Все, что я могу сказать, это то, что черновик CSS-переменных ближе к принятию, вы уже можете протестировать CSS-переменные диска в Chrome, Safari и Firefox, но имейте в виду, что поддержка во всех трех браузерах считается экспериментальной и может изменяться. Прочитайте Использование переменных CSS в MDN для более подробной информации.