2015-02-17 16 views
9

Bugünlerde Sass veya LESS gibi herhangi bir CSS önişlemcisi kullanmayan nadiren çok az proje var. Yaygın olarak kabul gören ve avantajları oldukça açık olsa da (daha fazla yapılandırılmış kod gibi, include performans düşüşü ve diğerleri gibi). huge dezavantajları varsa dolaşıyordum. Hemen düşünebildiğim biri, repaints/reflow'lar sırasında kötü performans gösterebilecek çok büyük iç içe geçmiş seçmenler. not'un önişlemciyi kullanmasının başka nedenleri var mı?CSS önişlemcilerinin (örn. Sass, LESS) kullanımının avantajları/dezavantajları nelerdir (örneğin, Sass, LESS)

+0

Tek dezavantaj, dikkat etmediğiniz takdirde BIG CSS dosyalarına neden olabilecek çok küçük, yalın SCSS kodu yazabilmenizdir. Ama bu, tüm büyük faydalar için ödenecek küçük bir bedel. CSS HTTP yanıtında sıkıştırılabilir ve proxy'ler ve tarayıcılar tarafından önbelleğe alınabilir, bu yüzden bir sorun değildir. – GolezTrol

+0

Seçici yerleştirme riski (derinlere), CSS'nizin yalnızca belirli bir HTML yapısı için çalışacağıdır. HTML'nizdeki değişiklikler stillerinizi kırıyor. Yuvalı LESS/SASS'ın dürüst olmayan CSS'ye derlendiğine dikkat edin. Daha iyi organize etmek için BEM gibi metodolojileri kullanabilirsiniz Daha az/SASS/CSS –

+0

Buradaki tüm dezavantajları burada yazdım: http://adamsilver.io/articles/the-disadvantages-of-css-preprocessors/ –

cevap

11

Önişlemcilerle bulabileceğiniz bir şey, yuvalama nedeniyle büyük miktarda css ile sonuçlanmasıdır. Küçük bir projede, kontrol altında tutulacak css miktarını korumak için disiplini gerektiren çok sayıda geliştiriciyle büyük bir projede kontrol altında tutmak kolaydır.

+0

Bunun için bir rica. Son zamanlarda neredeyse hiç SCSS'den 187 karakterli bir multiselector oluşturan bir seçici yaptı. Basit görünür ve SCSS'de takip edilmesi kolaydır, ancak normal CSS kadar neredeyse kararsızdır. SCSS, organizasyon için mükemmeldir, ancak CSS çıktınızı mutlaka izlemelisiniz. – Scott

+1

@Jaxo Sürdürülebilirlik bir sorun değil (SCSS dosyasını koruyacaksınız), ancak gereksiz büyüklükte. Sadece # # sidebar-automatic.automatic-locked 'muhtemelen yeterli olurdu. Ama bu cevap için benden +1. Doğru kullanmak için pratik ve disiplin gerektirir. Yuvalamayı yalnızca ihtiyacınız olduğunda, yani, düz CSS dosyalarınızı yerleştirmek isteyebileceğiniz durumlarda kullanın. – GolezTrol

+0

Daha büyük olanı bulmak için stil sayfamdan geçiyordum ve sanırım onu ​​buldum: 'giriş [liste] :: - webkit-giriş-yer tutucu: sonra, [liste] :: seçimini seçin. - webkit-giriş-yer tutucu: sonra, [liste] :: - webkit-giriş-yer tutucu: sonra, textarea [liste] :: - webkit-giriş-yer tutucu: sonra '... Ne yazık ki, bu çok daha fazla temizlenemez söyledi. – Scott