CSS neden değişkenleri ve hiyerarşiyi yerel olarak desteklemiyor?


11

Kullanıcı arayüzü geliştirmede yeniyim, ancak CSS'nin çalışma şeklinden çok rahatsızım.

Kullanım durumum div, bir sayfadaki belirli bir stilin içine belirli stiller uygulamak istediğimdir .

CSS girişimi:

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

DAHA AZ deneme:

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

O tekrarlamak için zorlar çünkü CSS versiyonu, böcek tetikleyebilir #f30& div.class2Hiyerarşiyi ve değişken yeniden kullanımını sağlamak için deneyin her zaman.

Sorularım:

  • Bu CSS neden işleri zorlaştırıyor?
  • LESS özel bir şey yapmaz - sadece belirgin iyileştirmeler yapar ve CSS'ye çevirir mi?
  • CSS, bu kadar gereksiz bir kodlama stilini teşvik ettiği için kullanıcılarda motive etmek ister mi?

CSS'nin daha az olması gerektiğine inanıyorum. Kesinlikle bazı şeylerin neden CSS'de bu şekilde yapıldığına dair bazı belirgin avantajlara bakıyorum. Bunun eski bir sorun olduğunu düşündüm, ancak CSS3 ile bunu çözmek için hiçbir girişimde bulunmadığım zaman şaşırdım.

Lütfen CSS'ye nasıl yaklaşmam gerektiğini anlamama yardımcı olun.

Yanıtlar:


15

CSS, işleri daha zor hale getirmeye çalışmaz, çok daha basit bir amaç göz önünde bulundurularak tasarlanmıştır, değişkenler ve hiyerarşiler onun tek eksikliğidir. DAHA AZ ve Sass bu eksiklikleri gidermek için özel olarak mevcuttur ve her iki yetenek de yerel olarak desteklenene kadar bunlara bağlı kalmalısınız.

Bununla birlikte, W3C'nin CSS Çalışma Grubu hem CSS değişkenleri hem de CSS hiyerarşileri için taslaklar üzerinde çalışıyor:

Her iki taslağın ne zaman uygulamaya hazır olacağını veya büyük tarayıcıların ne kadar sürede benimseyeceğini anlamanın hiçbir yolu yoktur. Söyleyebileceğim tek şey, CSS Değişkenleri taslağının benimsenmeye daha yakın olduğu, Chrome, Safari ve Firefox'ta sürücü CSS değişkenlerini zaten test edebilirsiniz, ancak üç tarayıcıdaki desteğin deneysel ve değişime tabi olduğunu unutmayın. Daha fazla bilgi için MDN'de CSS değişkenlerini kullanma bölümünü okuyun .


1
Harika cevap, gerçekten bariz bir şeyi kaçırdığımı düşündüm. :)
Yugal Jindle

1
@YugalJindle CSS Çalışma Grubunun üzerinde çalıştığı her şey için dev.w3.org/csswg adresine göz atın .
yannis
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.