Tại sao CSS không hỗ trợ các biến và phân cấp?

Tôi chưa quen với việc phát triển UI, nhưng tôi cảm thấy rất khó chịu với cách CSS hoạt động.

Trường hợp sử dụng của tôi là tôi muốn áp dụng một số kiểu cụ thể bên trong một kiểu cụ thể divtrên một trang.

Cố gắng CSS:

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

LESS cố gắng:

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

Phiên bản CSS có thể gây ra lỗi, vì nó buộc bạn phải lặp lại #f30& div.class2mỗi khi bạn cố gắng đạt được thứ bậc và sử dụng lại biến.

Những câu hỏi của tôi:

• Tại sao CSS đó làm cho mọi thứ khó khăn?
• LESS không có gì đặc biệt - chỉ cần thực hiện các cải tiến rõ ràng và chuyển sang CSS?
• CSS muốn tạo động lực gì cho người dùng vì nó thúc đẩy phong cách mã hóa dư thừa như vậy?

Tôi tin tưởng mạnh mẽ CSS nên là LESS. Chắc chắn tôi đang xem xét một số lợi thế rõ ràng về lý do tại sao mọi thứ được thực hiện theo cách đó trong CSS. Tôi nghĩ rằng đó là một vấn đề di sản, nhưng tôi đã ngạc nhiên khi thấy không có nỗ lực nào để giải quyết vấn đề này với CSS3.

Xin hãy giúp tôi hiểu tôi nên tiếp cận CSS như thế nào?

CSS không cố làm cho mọi thứ trở nên khó khăn hơn về mục đích, nó được thiết kế với mục tiêu đơn giản hơn rất nhiều, các biến và phân cấp hầu như không phải là khuyết điểm duy nhất của nó. LESS và Sass tồn tại đặc biệt để giải quyết những thiếu sót này và cho đến khi khả năng được hỗ trợ nguyên bản, bạn nên gắn bó với chúng.

Điều đó nói rằng, Nhóm làm việc CSS của W3C đang làm việc trên các bản nháp cho cả các biến CSS và phân cấp CSS:

• Mô-đun biến CSS cấp 1
• Mô-đun phân cấp CSS Cấp 3

Hoàn toàn không có cách nào để biết khi nào một bản dự thảo sẽ sẵn sàng để thực hiện, hoặc bao lâu các trình duyệt chính sẽ áp dụng chúng. Tất cả những gì tôi có thể nói là bản nháp Biến CSS gần được chấp nhận hơn, bạn đã có thể kiểm tra các biến CSS trong Chrome, Safari và Firefox, nhưng hãy nhớ rằng hỗ trợ trong cả ba trình duyệt được coi là thử nghiệm và có thể thay đổi. Đọc Sử dụng các biến CSS trên MDN để biết thêm chi tiết.