CSS’de Zorunda Kalmadıkça !important Kullanmayın!

Bu yazıda üzerine birkaç test yaptığım ve internette araştırdığımda da yabancı kaynaklarda benzeri bir sonuca ulaştığım, CSS'de özellikler için !important kullanımının kötü sonuçlar oluşturabilecek bir kullanım olduğu konusuna değinmek istiyorum.

!importan Nedir, Nasıl Kullanılır?

Bildiğiniz gibi CSS'de bir element için birden fazla aynı özellik tanımlandıysa, bu özelliklerin satır olarak altta olanı veya başka bir deyiş ile, son tanımlananı CSS tarafından uygulanır. Bunu küçük bir örnek ile gösterelim.

.kutu { backgroud:#ccc; }
.kutu { backgroud:#000; }

Bu tip bir durumda .kutu divi, #000 arka planına sahip olacaktır.

.kutu { backgroud:#ccc !important; }
.kutu { backgroud:#000; }

Bu tip bir durumda, divimizin arka planı #ccc rengini alacaktır.

!important özelliği, bir proje üstünde, birden fazla CSS dosyası olduğu durumlarda ve bu CSS dosyalarının konumlarını ve hangisinin işleneceğini kestiremediğimiz durumlarda "ajans seviyesinde" büyük kolaylık sağlıyor. Fakat verimlilik konusunda sorunları var. Her ne kadar kullanışlı bir özellik olsa da, aslında !important özelliği kullanıldığında sayfada meydana gelen şey, JS seviyesinde, important kullanılan element için inline bir CSS yazıyor olma durumuna denk bir işlemci gücü gerekiyor.

Bu birkaç element için büyük bir sorun oluşturmayacak olsa bile, bazı durumlarda hem performans, hem de sizden sonra proje üzerinde çalışacak geliştirici için sorunlar yaratıyor.

Diyelim ki sayfanızda 30 tane <p> elementi var ve p elementleri için renk özelliğini CSS'de daha üstte bir scope içinde değiştirmek istiyorsunuz. Bunun gibi bir durumda kullandığınızda sayfadaki her <p> elementi için bu durum gerçekleşecektir.

Ne Zaman Kullanalım?

Important özelliği ile Erişiminiz olduğu özellikleri overwrite etmek mantıklı değil fakat farklı sitelerden gelen ve sayfada JS ile ögeler oluşturan bir eklenti kullanıyorsanız (Disqus vs gibi direkt olarak DOM'a element gömen türden) ve bu DOM üzerinde CSS düzenlemeleri yapmak istiyorsanız !important özelliğini kullanmak mantıklı olabilir.

Yazı Kaynağı için tıklayın.

Yorumları Göster veya Yeni Yorum Yaz