ทำไม CSS ไม่สนับสนุนตัวแปรและลำดับชั้นโดยกำเนิด

ฉันยังใหม่กับการพัฒนา UI แต่ฉันรู้สึกไม่สบายใจกับวิธีการทำงานของ 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 นั้นมีอยู่โดยเฉพาะเพื่อจัดการข้อบกพร่องเหล่านี้และจนกว่าความสามารถทั้งสองจะได้รับการสนับสนุนโดยกำเนิดคุณควรติดกับสิ่งเหล่านั้น

ที่กล่าวว่าCSS Working Groupของ W3C กำลังทำงานกับแบบร่างสำหรับทั้งตัวแปร CSS และลำดับชั้นของ CSS:

• CSS ตัวแปรโมดูลระดับ 1
• CSS Hierarchies Module ระดับ 3

ไม่มีวิธีใดที่จะบอกได้ว่าร่างฉบับใดพร้อมที่จะนำไปใช้งานหรือเมื่อเร็ว ๆ นี้เบราว์เซอร์หลัก ๆ จะใช้งาน ทั้งหมดที่ฉันสามารถพูดได้คือร่าง CSS Variables นั้นใกล้เคียงกับการนำไปใช้แล้วคุณสามารถทดสอบตัวแปร CSS ของไดรฟ์ใน Chrome, Safari และ Firefox ได้ แต่โปรดทราบว่าการสนับสนุนในเบราว์เซอร์ทั้งสามนั้นถือเป็นการทดลองและอาจมีการเปลี่ยนแปลง อ่านการใช้ตัวแปร CSSบน MDN สำหรับรายละเอียดเพิ่มเติม