CSS !Önemli: Nedir ve Ne Zaman Kullanılır

CSS'nin en kullanışlı ve tartışmalı unsurlarından biri !important özelliğidir. Her tasarımcı bir noktada CSS kodunda etiketle karşılaşacaktır. Bu gerçekleştiğinde ortaya çıkan asıl soru ve ikilem “doğru kullanıldı mı?” CSS !important çok güçlü bir araç olduğundan, geliştiricilerin ve tasarımcıların onu kullanırken en iyi uygulamalardan haberdar olmaları gerekir. CSS !important her türlü spagetti koduna yol açabilir ve bu hiç kimse için iyi değildir.

CSS Nedir Önemli?

CSS'deki !important özelliği, eklendiği kuralın diğer kurallardan önce geldiğini belirtir. Kullanıldığı öğe ve seçici için en yüksek önceliktir ve bu nedenle geliştiricilerin ve tasarımcıların sitenin ayrı bölümleri için stil üzerinde özel kontrol sahibi olmalarını sağlar. Çoğu durumda bu, style.css veya custom.css içinde bulunan sitenin varsayılan stilini geçersiz kılmak anlamına gelir.

Her !important örneği, yalnızca göründüğü belirli satır için geçerlidir . Böylece özelliği, bir snippet'in tüm bölümlerinde olmasa da bazılarında kullanabilirsiniz. !important için CSS kodu şöyle görünür:

.example-class {
	color:#fff!important;
}

!important ile hatırlanması gereken birincil şey iki yönlüdür:

1. önemli kelimesi her zaman bir ünlem işareti (!) ile gelmeli
2. noktalı virgül her zaman !important bildiriminden sonra satırın sonunda olmalıdır

!important , isterseniz sayfa sayfa veya modül bazında (Divi gibi sayfa oluşturucular söz konusu olduğunda) bile kullanılabilir. hangi sayfa ve hangi sırayla?

Her tasarımcı bir noktada CSS önemli etiketiyle karşılaşacak ve bir karar vermek zorunda kalacak. Bu, sitenin varsayılan stilini geçersiz kılmaya değer mi?

Bazen cevap kocaman bir evettir. Diğer zamanlarda, zor ve hızlı bir hayır. Şimdi veya gelecekte muhtemelen hiçbir şeyi bozmayacağını bilmek için önemli olan CSS ile ilgili bazı en iyi uygulamalara bakalım.

CSS Ne Zaman Kullanılır Önemli

!important'ın birincil (ve en yaygın olarak kabul edilen) kullanımı, birincil seçiciyle etkileşime giren bir sınıfın farklı şekilde stillenmesini istediğiniz zamandır. Belki de bloglarınızdaki başlık başlığının ve meta bilgilerin sitenizin geri kalanından farklı bir yazı tipi ve renk olmasını istiyorsunuz. Bu öğeler için varsayılan stil, CSS dosyalarınızdaki h1 ve p seçicilerinden devralınır. .css dosyalarınızda veya WordPress tema özelleştiricisinde site varsayılanları için ayarladığınız her şey görüntülenecektir.

p {
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #111;
	font-family:'Roboto';
}

h1 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #000;
	font-family:'Lato';
}

İstediğiniz öğeleri (blog yazısı başlığı ve meta bilgisi) sınıflarla değiştirebilirsiniz. giriş-başlık ve .post-meta. H1 ve p üst öğesinden bazı stilleri hala devralmalarını istediğiniz için, bunları özel olarak çağırmak için h1.entry-title ve p.post-meta kullanacaksınız.

h1.entry-title, p.post-meta {
	color: white!important;
	font-family:'Poppins'!important;
}

Bu snippet'lerin aynı stil sayfasında olması, Mesaj Başlıkları ve Mesaj Meta'nın görüntülendiği durumlar dışında tüm durumlarda üst kodun etkin olmasına neden olur. CSS önemli özelliği, varsayılanı geçersiz kılar ve onun üzerinde tam kontrol sahibi olmanızı sağlar.

Bu tür bireysel kişiselleştirme, !important öğesinin birincil kullanımıdır. Ama tek değil.

Sınıfları, Kimlikleri ve Öğeleri Korumak için CSS Önemli Kullanın

Ayrıca !important'ı sayfanızın çeşitli öğelerini geleceğe dönük olarak kullanmak için de kullanabilirsiniz, bu da sitede daha fazla geliştirmenin beklenmedik şekillerde ince ayar yapmasına neden olabilir. Örneğin, abone kutuları veya e-posta tercihleri ​​veya YouTube yerleştirmeleri için belirli bir stil geliştirebilirsiniz. Bunların her biri, farklı yerlerde stil sayfalarınızdan farklı stiller alabilir. !important etiketini kullanmak, formlarınızın veya düğmelerinizin stilini değiştirmek için bilinçli bir el gerektirebilir.

Öğeyi bir sınıf veya kimlikle adlandırın ve ardından her satıra !important koyun.

.youtube-embed {
	font-family:'Exo'!important;
	font-weight: 700!important;
	line-height:1.4rem!important;
	margin-top:25px!important;
	margin-left:auto!important;
	margin-right:auto!important
	color:#449928!important;
	padding:11px!important;
	background:#998899;
}

İşte! Stil sayfalarınızdaki düzenli değişikliklerden geleceğe hazır.

Satır İçi Stilleri Kullanma

Bu, birçok insan için ortaya çıkabilecek veya çıkmayabilecek kullanım durumlarından biridir. Eskiden çok yaygındı, ancak yazılarımızı ve sayfalarımızı elle kodlamaktan uzaklaştıkça daha az hale geldi. Ancak, bir Gutenberg bloğunun HTML'sine veya WordPress klasik düzenleyicisinin metin görünümüne girerseniz, satır içi CSS stiliyle kesinlikle !important kullanabilirsiniz.

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

Bu birkaç nedenden dolayı önemlidir. Birincisi, sayfanızdaki herhangi bir kod satırını özellikle style=”x:y!important;” kullanarak kontrol edebilmenizdir. ikincisi, o sayfaya uygulanmış olan herhangi bir CSS'yi geçersiz kılabilmenizdir. Bu değer !important olsa bile. Örneğin:

<style> 
	p { 
	    color:#313373!important;
	    font-size:2rem; 
	} 

    </style> 

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now, even though there's another !important tag
		applied to the paragraph selector on this page!</p>
</div>

Aynı seçicide !important kullanan <style></style> kullanan gömülü HTML stili olsa bile, belirli paragrafı hedefleyen satır içi CSS, oluşturan olacaktır.

Önemli Etiketleri İstiflemeye Dikkat Edin

Son birkaç örneği ele alalım ve bir uyarıda bulunalım. Bu tür kullanımlar küçük dozlarda iyidir. Bunları tek seferlik durumlarda kullanabilirsiniz ve muhtemelen hiç kimse bununla ilgili bir sorun yaşamayacaktır. Çünkü, bir kereye mahsus olarak, tek bir öğeye stil vermek için özel olarak !important kullandınız. Bunun için amaçlanan budur .

Bununla birlikte, stil sayfalarınızı sık sık düzenlemekten kaçınmanın bir yolu olarak veya aynı sitedeki birden fazla sorun için hızlı bir düzeltme olarak !important'ı bir koltuk değneği olarak kullanmaya başlarsanız, bu spagetti kodunun başlangıcıdır. Özellikle de siz olmayan gelecekteki geliştiriciler için. !important öğesinin oluşturulduğu sırayı bulmakta zorlanabilirsiniz, ancak gelecekteki bir geliştirici bunu imkansız bulabilir.

Sonunda olan şey, site genelinde birden çok stil sayfası, sayfa ve modülle etkileşime giren o kadar çok yığılmış !important s'nin normal CSS'nin nadiren oluşturduğudur. Ve bazen, !important ile işaretlenmiş bir şey bile görüntülenmez. Ya da daha kötüsü, sitenin stilini yıkıp yeniden oluşturmak istemiyorsanız, daha sonra yapılan her değişikliğin işaretlenmesi gerekir ! sadece görünmesi için önemlidir .

Toplama

CSS önemli, dürüst olmak gerekirse, bir tasarımcının araç setindeki en güçlü araçlardan biridir. Astlarınızı veya meslektaşlarınızı etkileme endişesi olmadan sitenizdeki herhangi bir öğeyi kolayca ayarlayabilirsiniz. Ancak aşırı kullanırsanız, efektler birbirini geçersiz kılmaya çalışan sayfalar ve öğelerden oluşan bir kabusa dönüşebilir ve bir zamanlar önemli olan varsayılan hale gelir, ancak varsayılan olarak ayarlanamaz. Bu yüzden !important'ı idareli kullanmaya çalışın, böylece öne çıkacak veya geleceğe hazır olacak bir şeye ihtiyacınız olduğunda, bunu doğru şekilde yapmış olursunuz.

Projelerinizde CSS !important kullanmak hakkında ne düşünüyorsunuz?

Makale özellikli görsel wan wei / Shutterstock.com