CSS “!important” Özelliği Ne Zaman Kullanılmalı?

Bu dersimizde, CSS !important kavramını ele alacağız, neden böyle bir kavramın var olduğunu ve ne zaman kullanılması gerektiğini öğreneceğiz.

“!important” Kavramı

CSS kodlarımızı oluştururken, bazen aynı öğeye birden fazla stil kuralı uygularız. Bu gibi durumlarda hangi stilin geçerli olacağını anlamak kafa karıştırıcı olabilir; nitekim baskın stil diğerini iptal eder. Eğer bu karmaşanın içerisinde specificity kavramını gözden kaçırırsak, çözülmesi zor durumlarla karşılaşabiliriz. Böyle zamanlarda, belirli bir stilin kesinlikle uygulanmasını istiyorsak, kelime anlamı “önemli” demek olan !important kavramı imdadımıza yetişir.

Malumunuz, CSS’te stil tanımlamaları genelde yukarıdan aşağıya doğru olmaktadır. Yani, sayfanızın üstünde tanımlanmış bir stil kuralı varsa ve aynı öğe için sayfanın altında başka bir stil tanımlamışsanız, alttaki stil üstteki stil tanımlamasını geçersiz kılar. Ancak bu basit sıralamanın ötesinde, “specificity” adında daha karmaşık bir hiyerarşi sistemi de bulunur.

Specificity, CSS’te tanımladığınız stil kurallarının hangi öğelere uygulanacağına karar verirken kullanılan bir öncelik sistemidir. Bu sistem, ID seçiciler, sınıf seçiciler, tip seçiciler ve içsel stiller gibi farklı seçici türlerini dikkate alır. Örneğin, bir ID seçicisiyle tanımlanmış bir stil, bir sınıf seçicisiyle tanımlanmış bir stili her zaman geçersiz kılar.

Bu örnekte, normalde ID seçicisiyle tanımlanan stilin, sınıf seçicisiyle tanımlanan stili geçersiz kılması gerekir. Ancak !important kullanıldığı için, rengin kırmızı olarak uygulanacaktır.

Ancak işler karmaşıklaştığında, yani birden fazla stil kuralının aynı öğeye ve aynı specificity seviyesinde uygulandığında, yukarıdan aşağıya okuma kuralı devreye girer.

Tabiri caizse, zurnanın zırt dediği yer de burasıdır. Zira bazı durumlarda, belirli bir stilin mutlaka uygulanmasını garantilemek isteyebiliriz. İşte !important kavramı tam da bu işlerin kodudur.

Bir stil kuralına !important eklemek, bu kuralın tüm diğer stil kurallarını – ne kadar yüksek specificity’ye sahip olursa olsun – geçersiz kılmasını sağlar. Yani !important, CSS hiyerarşisinde en üstte yer alır ve tabiri caizse herkesi döver.

See the Pen CSS !important by 1kodum (@1kodum) on CodePen.

Bu örnekte, div öğesine üç farklı stil uyguladık. İlk bakışta hangi rengin div öğesinde görüneceğini tahmin etmek zor. Öğenin rengi mavi, yeşil ya da kırmızı olabilir. Ancak !important anahtar kelimesinin kullanıldığı anotherClass‘ın ikinci tanımı, rengin sarı olmasını garanti eder. Yani, !important, bu karmaşık stil sıralamasının içinde kesin bir sonucu garanti eder. Bu yüzden div öğesinin metni sarı renkte ve kalın bir fontla (bold) görünecektir.

Bu tür durumlarda !important kullanmak, kesin bir stil uygulamak için hızlı bir çözüm sunsa da, bu anahtar kelimeyi sıkça ve gereksiz yere kullanmak, kodun karmaşıklaşmasına neden olabilir. Ne kadar tehlikeli olabileceğini aşağıdaki kod üzerinden inceleyebilirsiniz:

Bu örnekte, bir p (paragraf) etiketi için iki farklı renk tanımlaması yaptık. İlk tanımlamada, p etiketine doğrudan mavi (blue) renk atadık ve bu renk atamasına !important anahtar kelimesini ekledik.

İkinci tanımlamamızda ise .main sınıfına sahip bir öğe içindeki p etiketlerine kırmızı (red) renk atadık. Bu, spesifiklik (specificity) açısından ilk tanımlamadan daha spesif bir kuraldır. Normal şartlarda, CSS’te daha spesifik olan kuralların daha genel kuralları geçersiz kılması gerekir. Bu yüzden birisi bu kodlara baksa ve !important anahtar kelimesini göz ardı ederse, .main sınıfına sahip bir öğede bulunan p etiketinin kırmızı olacağını düşünebilir.

Ancak, burada !important anahtar kelimesinin gücü devreye girmiştir. Yani, .main sınıfına sahip bir öğede bile olsa, tüm p etiketlerinin rengi mavi olacaktır. Oysa biz bunu istememiştik.

Hatta bu yüzden sayfada yapacağımız yeni güncellemeleri de reddedecektir. Yani bir kez !important özelliği kullanıldığında, üzerine yazmak çok zor olacaktır. Bu nedenle, neredeyse hiç kullanılmamalıdır.

Not olarak da şunu belirteyim; eğer !important özelliği belirli bir seçici için belirtilirse (örneğin, .main p { color: red !important; }), o zaman bu stil sadece belirtilen seçiciye uygun olan elementlere uygulanır. Yani, sadece .main sınıfına sahip elemanlar içindeki p etiketlerinin rengi kırmızı olur. Görüldüğü üzere, stilin geçerli olduğu evren neresiyse CSS !important özelliği oranın dikdatörü olur. Bu yüzden, !important özelliğini kullanırken etki alanını olabildiğince sınırlı tutmak gerekir.

“Peki öyleyse, ben CSS !importan özelliğini ne zaman kullanmalıyım?” Diyelim ki bir e-ticaret sitesi üzerinde çalışıyorsunuz. Black Friday indirimleri için site üzerinde bir banner ya da duyuru çubuğu eklemek istiyorsunuz. Bu duyuru çubuğu, sitenin üst kısmında yer alacak ve ziyaretçilere özel indirimler hakkında bilgi verecek.

Ancak, sitenizde kullanılan tema ya da stil kütüphanesi, bu duyuru çubuğunun stilini beklediğinizden farklı gösteriyor. Normalde bu tür bir özelleştirme için temayı ya da stil kütüphanesini düzenlemek ideal olurdu, ama zamanınız çok kısıtlı ve bu duyurunun hemen doğru bir şekilde görüntülenmesi gerekiyor.

Bu durumda, !important kullanarak bu duyuru çubuğunun stilini hızla özelleştirebilirsiniz. Bakınız:

Yukarıdaki örneğimizde, “Black Friday” için eklenen duyuru çubuğunun stilini hızla ve kolayca özelleştirmek için !important kullandık.

Ancak yine de belirtmek istiyorum ki, bu sadece geçici bir çözümdür. İndirim dönemi bittikten sonra kodu optimize edip !important bağımlılığından kurtarmamız gerekir.