Onlardan nefret ediyorum, CSS'nin basamaklı doğasına meydan okuyor ve onları dikkatli kullanmıyorsanız daha fazla ekleme döngüsüne giriyorsunuz !important.

Ama performans için kötü olduklarını bilmek istiyorum.

EDIT
(hızlı) yanıtlardan performans üzerinde (önemli) bir etkisi olmayacağı sonucuna varabilirim. Ancak, başkalarını caydırmak için ekstra bir argüman olsa bile bilmek güzel;).

EDIT 2
BoltClock, 2 !importantbeyan varsa, spesifikasyonların en spesifik olanı seçeceğini söyledi.

Performans üzerinde hiçbir etkisi olmamalıdır. Görme de Firefox'un CSS ayrıştırıcı/source/layout/style/nsCSSDataBlock.cpp#572 ve bunu işleme, ilgili rutin olduğunu düşünüyorum üzerine yazarak CSS kurallarının.

sadece "önemli" için basit bir kontrol gibi görünüyor.

  if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...

Ayrıca, adresindeki yorumlar source/layout/style/nsCSSDataBlock.h#219

    /**
     * Transfer the state for |aPropID| (which may be a shorthand)
     * from |aFromBlock| to this block.  The property being transferred
     * is !important if |aIsImportant| is true, and should replace an
     * existing !important property regardless of its own importance
     * if |aOverrideImportant| is true.
     * 
     * ...
     */

1. Firefox, elle yazılmış bir yukarıdan aşağıya ayrıştırıcı kullanır. Her iki durumda da her CSS dosyası bir StyleSheet nesnesine ayrıştırılır, her nesne CSS kuralları içerir.

2. Firefox daha sonra son değerleri içeren stil bağlam ağaçları oluşturur (tüm kuralları doğru sırayla uyguladıktan sonra)

Gönderen: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

Şimdi, yukarıda açıklanan Nesne Modeli gibi durumlarda, ayrıştırıcı !important, bir sonraki maliyetten çok fazla olmadan kolayca etkilenen kuralları işaretleyebilir . Performans düşüşü değil karşı iyi bir argüman !important.

Bununla birlikte, sürdürülebilirlik bir isabet alır (diğer cevaplar gibi), bu da onlara karşı tek argüman olabilir.

!importantTarayıcının kurallarla ne kadar hızlı eşleştiği açısından doğası gereği kötü olduğunu düşünmüyorum (seçicinin bir parçasını oluşturmaz, beyanın sadece bir bölümünü oluşturur)

Ancak, daha önce de belirtildiği gibi, kodunuzun sürdürülebilirliğini azaltacak ve bu nedenle gelecekteki değişiklikler nedeniyle gereksiz yere boyutunun büyümesine neden olacaktır. Kullanımı !importantayrıca geliştirici performansını da düşürebilir.

Eğer varlık olsaydı gerçekten seçici, ayrıca diyebiliriz !importantbu gerçekten çok değil, CSS dosyasına 11 ekstra bayt ekler, ancak adil bir kaç varsa sanırım !importanto kadar katkı sağlayabileceğini sizin stil s.

Sadece düşüncelerim, maalesef !importantperformansı nasıl etkileyebileceğine dair bir ölçüt bulamadım .

!importantonun yeri var. Bu konuda bana güven. Beni defalarca kurtardı ve genellikle daha uzun ve daha zarif bir yöntem bulunmadan önce kısa vadeli bir çözüm olarak daha kullanışlıdır.

Ancak, çoğu şey gibi, istismar edildi, ancak 'performans' hakkında endişelenmenize gerek yok. Bahse girerim küçük bir 1x1 GIF, bir web sayfasında önemli bir performanstan çok daha fazla performansa sahiptir.

Sayfalarınızı optimize etmek istiyorsanız, gidilecek çok daha fazla yol var ! );)

Burada perde arkasında olan şey, CSS'niz işlenirken, tarayıcının okuduğu, bir !importantözellikle karşılaştığı ve tarayıcının tanımladığı stilleri uygulamak için geri gitmesidir !important. Bu ekstra işlem küçük bir ek adım gibi görünebilir, ancak birçok istekte bulunuyorsanız, performansta bir isabet alacaksınız. (Kaynak)

CSS'nizde! Önemli kullanmak genellikle geliştirici narsisistik ve bencil veya tembel anlamına gelir. Gelecek devlere saygı duyun ...

Bir geliştiriciyi kullanırken düşünme !important:

1. Sallanan CSS'im çalışmıyor ... grrrr.
2. Ben şimdi ne yapmalıyım??
3. Ve sonra !importantevet .... şimdi iyi çalışıyor.

Ancak !importantsadece CSS'yi iyi yönetmediğimiz için kullanmak iyi bir yaklaşım değil. Performans sorunlarından daha kötü olan birçok tasarım sorunu yaratır, ancak aynı zamanda diğer özellikleri geçersiz kıldığımız !importantve CSS'imiz işe yaramaz kodla karıştığından fazladan fazla kod satırı kullanmaya zorlar . Bunun yerine yapmamız gereken ilk olarak CSS'yi çok iyi yönetmek ve özelliklerin birbirini geçersiz kılmasına izin vermemek.

Biz yapabilirsiniz kullanın !important. Ancak idareli ve sadece başka bir çıkış yolu olmadığında kullanın.

Kullanmama konusunda size katılıyorum çünkü performanstan bağımsız olarak kötü uygulama. Sadece bu gerekçelerle, !importantmümkün olan her yerde kullanmaktan kaçınırdım.

Ancak performans konusunda: Hayır, farkedilmemelidir. Bazı etkiye sahip olabilir, ama bunu fark asla o kadar küçük olmalıdır, ne de gerektiği size bu konuda endişe.

Eğer farkedilebilecek kadar önemliyse, kodunuzda büyük olasılıkla daha büyük sorunlarınız olabilir !important. Kullandığınız temel dillerin normal bir sözdizimi öğesinin basit kullanımı hiçbir zaman bir performans sorunu olmayacaktır.

Sorunuza karşılıklı bir soru ile cevap vereyim; düşünmediğiniz bir açı: Hangi tarayıcıyı kastediyorsunuz?

Her tarayıcının kendi optimizasyonlarıyla kendi oluşturma motoru olduğu açıktır. Şimdi soru şu: her tarayıcıdaki performans etkileri nelerdir? Belki !importantbir tarayıcıda kötü, ancak başka bir tarayıcıda gerçekten iyi performans gösteriyor? Ve belki de sonraki versiyonlarda, bu tam tersi olacak mı?

Sanırım burada benim açımdan, web geliştiricileri olarak kullandığımız dillerin tekil sözdizimi yapılarının performans üzerindeki etkileri hakkında düşünmemeliyiz (ya da düşünmeye ihtiyacımız yok). Bu sözdizimi yapılarını kullanmalıyız çünkü performansları nedeniyle yapmak istemediğimiz şeyi başarmanın doğru yolu bunlar.

Performans soruları, sıkışma noktalarının sisteminizde nerede olduğunu analiz etmek için profilerlerin kullanımı ile birlikte sorulmalıdır. Önce sizi gerçekten yavaşlatan şeyleri düzeltin. Bireysel CSS yapılarının seviyesine inmeden önce düzeltmeniz için çok daha büyük sorunların olacağı neredeyse kesindir.

Performansı belirgin şekilde etkilemez. Bununla birlikte, kodunuzun sürdürülebilirliğini azaltır ve bu nedenle uzun vadede performansı düşürür.

Daha !importantönce birkaç kez kullanmak zorunda kaldım , kişisel olarak bunu kullanırken hiçbir belirgin performans isabeti fark etmedim.

Not olarak , kullanmak isteyebileceğiniz bir nedenden dolayı bu yığın sorusunun yanıtına bakın !important.

Ayrıca herkesin bahsetmediği bir şeyden bahsedeceğim. !importantbir javascript işlevi yazmadan satır içi css'yi geçersiz kılmanın tek yoludur (bu, yalnızca biraz da olsa performansınızı etkileyecektir). Aslında olabilir Yani tasarruf bazı performans zaman satır içi css geçersiz gerekirse.

hmm ...! önemli veya !! önemli?

Şimdi adım adım ilerleyelim:

1. Ayrıştırıcı, kullansanız da kullanmasanız da, her mülk için! Önemli olup olmadığını kontrol etmelidir. Buradaki performans farkı 0'dır.
2. Bir özelliğin üzerine yazarken, ayrıştırıcının üzerine yazılan özelliğin! Önemli olup olmadığını kontrol etmesi gerekir - dolayısıyla performans farkı tekrar 0'dır.
3. Üzerine yazılan özellik !! önemli ise, özelliğin üzerine yazılması gerekir - kullanmamak için -1 performans isabeti!
4. Üzerine yazılan mülk! Önemliyse, mülkün üzerine yazmayı atlar - kullanmak için +1 performans artışı! Önemli
5. Yeni özellik! Önemliyse, üzerine yazılan özelliğe bakılmaksızın ayrıştırmanın üzerine yazması gerekir! Önemli veya !! önemli - performans farkı 0 tekrar

Bu yüzden sanırım! Önemli, ayrıştırıcının aksi halde atlamayacağı birçok özelliği atlamasına yardımcı olabileceğinden daha iyi bir performansa sahiptir.

ve aşağıdaki @ryan'dan bahsedildiği gibi, satır içi css'i geçersiz kılmanın ve javascript kullanmaktan kaçınmanın tek yolu ...

hmm ... ortaya çıkıyor! önemli önemlidir

ve ayrıca,

• önemli olan bir geliştirici için çok zaman kazandırır
• bazen tüm css'i yeniden tasarlamaktan kurtarır
• bazen html veya üst css dosyası kontrolünüzde değildir, bu yüzden hayatınızı orada kurtarır
• önemli öğelerin yanlışlıkla diğer öğelerin üzerine yazılmasını engeller !!
• ve bazen tarayıcılar seçicilerde çok spesifik olmadan doğru özellikleri seçmezler, bu yüzden! Bu yüzden yazmak için daha fazla bayt kullansanız bile, önemli, başka yerlerde size bayt kurtarabilir. ve hepimiz biliyoruz, css seçicileri dağınık olabilir.

Önemli olan, geliştiricilerin mutlu olmasını sağlayabilir ve bunun çok önemli olduğunu düşünüyorum : D

Ben tahmin edemez !importanttasarımları gereği neyse, getirilmesini engellemektedir. Bununla birlikte, CSS'nizle doluysa !important, bu, seçicilerin üzerinde kalifiye olduğunuzu ve çok spesifik olduğunuzu ve özgüllük eklemek için ebeveynleriniz veya niteleyicilerinizin bittiğini gösterir. Sonuç olarak, CSS şişirilmiş olmak (ki olacak olacak performansı olumsuz) ve sürdürmek zor.

Verimli CSS yazmak istiyorsanız, sadece ihtiyacınız olduğu kadar spesifik olmak ve modüler CSS yazmak istiyorsunuz . Kimlik (karma) ile kullanmak, zincirleme seçicileri veya eleme seçicileri kullanmaktan kaçınmanız önerilir.

#CSS'de ön ekli kimlikler , 255 sınıfın bir kimliği geçersiz kılmayacağı noktaya ( kısaca : @Faust ) özgüdür . Kimliklerin de daha derin bir sorunu var, benzersiz olmaları gerekiyor, bu da onları yinelenen stiller için tekrar kullanamayacağınız, böylece tekrarlayan stillerle doğrusal css yazdığınız anlamına geliyor. Bunu yapmanın yankısı, ölçeğe bağlı olarak projeden projeye değişecektir, ancak sürdürülebilirlik son derece ve bazı durumlarda performansta da olumsuz etkilenecektir.

!importantZincirleme, nitelendirme veya kimlikler olmadan (yani #) özgüllüğü nasıl ekleyebilirsiniz?

HTML

<div class="eg1-foo">
    <p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
    <p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
    <p class="eg3-foo">foobar</p>
</div>

CSS

.eg1-foo {
    color: blue;
}
.eg1-bar {
    color: red;
}
[id='eg2-foo'] {
    color: blue;
}
[id='eg2-bar'] {
    color: red;
}
.eg3-foo {
    color: blue;
}
.eg3-foo.eg3-foo {
    color: red;
}

JSFiddle

Tamam, bu nasıl çalışıyor?

İlk ve ikinci örnekler aynı şekilde çalışır, birincisi tam anlamıyla bir sınıftır ve ikincisi nitelik seçicidir. Sınıflar ve Öznitelik seçicileri aynı özgünlüğe sahiptir. .eg1/2-barrengini miras almaz .eg1/2-fooçünkü kendi kuralı vardır.

Üçüncü örnek, nitelikli veya zincirleme seçicilere benziyor, ancak ikisi de değil. Zincirleme, seçicilere ebeveynlerin, ataların vb. bu özgüllük katar. Nitelik benzerdir, ancak seçicinin uygulandığı öğeyi tanımlarsınız. eleme: ul.classve zincirleme:ul .class

Bu tekniğe ne diyeceğinizden emin değilim, ancak davranış kasıtlı ve W3C tarafından belgelendi

Aynı basit seçicinin tekrarlanan oluşumlarına izin verilir ve özgüllüğü arttırır.

İki kural arasındaki özgüllük aynı olduğunda ne olur?

As @BoltClock işaret birden varsa,! O zaman önemli bildirimleri Spec emirlerini en spesifik bir öncelik olmalıdır.

Aşağıdaki örnekte, her ikisi de .foove .baraynı özgüllüğe sahiptir, bu nedenle davranış CSS'nin basamaklı doğasına geri döner, bu şekilde CSS'de bildirilen son kural, örneğin önceliği olduğunu iddia eder .foo.

HTML

<div>
    <p class="foo bar">foobar</p>
</div>

CSS

.bar {
    color: blue !important;
}
.foo {
    color: red !important;
}

JSFiddle