CSS !important

!important क्या करता है

किसी declaration में !important जोड़ना इसे उस element पर उस property के लिए किसी भी दूसरी declaration को override करा देता है, normal specificity calculation चाहे जो भी हो। यह specificity को खुद नहीं बदलता -- यह एक अलग, higher-priority tier बनाता है जो specificity को पूरी तरह मात दे देता है।

उदाहरण: What !important Does

<style>
p {
  color: blue;
}
.text {
  color: red !important;
}
</style>
<p class="text">Wins over any normal-priority rule regardless of specificity</p>

यह Specificity के साथ कैसे Interact करता है

जब दो declarations दोनों !important इस्तेमाल करती हैं, तो normal specificity rules सिर्फ उन दोनों के बीच फिर से लागू होते हैं -- !important सिर्फ किसी rule को एक higher tier में उठाता है, यह उस tier के अंदर specificity comparisons को खत्म नहीं करता।

अलग specificity वाले दो !important rules फिर भी हमेशा की तरह specificity से resolve होते हैं।

उदाहरण: How It Interacts With Specificity

<style>
.text {
  color: red !important;
}
#unique {
  color: green !important;
}
</style>
<p id="unique" class="text">Both !important, so specificity decides between them: green</p>

इसका ज़्यादा इस्तेमाल एक समस्या क्यों है

एक बार जब किसी codebase में कई !important declarations एक-दूसरे से लड़ने लगती हैं, तो किसी एक को override करने का इकलौता तरीका ज़्यादा specificity वाला एक और !important जोड़ना है, जो एक arms race बनाता है जो styles को predict करना या maintain करना मुश्किल बना देता है। यह effectively cascade के intended, readable override system को तोड़ देता है।

उदाहरण: Why Overusing It Is a Problem

<style>
.a { color: red !important; }
.b { color: blue !important; }
</style>
<p class="a b">Both classes use !important; the later rule (blue) wins.</p>

Legitimate Use Cases

!important कुछ सीमित situations में defensible है: third-party या inline styles को override करना जिन्हें आप otherwise edit नहीं कर सकते, utility classes जो explicitly हमेशा जीतने के लिए design की गई हैं (जैसे एक .hidden { display: none !important; } helper), या user-stylesheet accessibility overrides।

मुख्य बात इसे जानबूझकर और कम मात्रा में इस्तेमाल करना है, पहले resort के तौर पर नहीं।

उदाहरण: Legitimate Use Cases

<style>
.hidden {
  display: none !important;
}
</style>
<p>Visible paragraph.</p>
<p class="hidden">This paragraph is hidden.</p>

इसकी ज़रूरत से बचने के Alternatives

ज़्यादातर !important इस्तेमाल को जानबूझकर ज़्यादा specific selectors लिखकर, stylesheet load order reorganize करके, या specificity से brute force में लड़ने के बजाय precedence को explicitly control करने के लिए CSS layers (@layer) इस्तेमाल करके टाला जा सकता है।

बेहतर selector structure के लिए reach करना cascade को predictable बनाए रखता है।

उदाहरण: Alternatives to Avoid Needing It

<style>
@layer base, utilities;

@layer utilities {
  .hidden { display: none; }
}
</style>
<p>Visible paragraph.</p>
<p class="hidden">Hidden by the utilities layer.</p>