CSS selector की priority बढ़ाने का एक अनपेक्षित तरीका

समस्या

• CSS से styling करते समय अक्सर CSS conflict हो जाता है, जिससे मनचाहा न होने वाला style लागू हो सकता है।
• ऐसे conflict आम तौर पर UI library, third-party widget, या किसी दूसरी team द्वारा manage किए जाने वाले CSS code की वजह से होते हैं, और ऐसे में अक्सर CSS को मनचाहे तरीके से modify करना संभव नहीं होता।
• खासकर जब conflict UI library या third-party से आए CSS के साथ हो, तो HTML में अतिरिक्त class या ID जोड़ना भी मुश्किल हो सकता है।
• इसके अलावा, अगर conflict का कारण बनने वाला CSS code बहुत specific तरीके से लिखा गया हो, तो अपनी CSS की priority बढ़ाने के लिए उसे और ज्यादा specific लिखना भी संभव नहीं हो सकता।
• ऐसे में बहुत से developer आसानी से !important का इस्तेमाल करते हैं, लेकिन यह recommended तरीका नहीं है।

समाधान

• selector को दोहराकर इस्तेमाल किया जा सकता है।
• उदाहरण के लिए, .checkbox__icon.checkbox__icon की priority एकल .checkbox__icon से अधिक होती है।
• यह तरीका CSS hack जैसा लग सकता है, लेकिन CSS Selectors Level 4 specification में साफ़ लिखा है: "Repeated occurrences of the same simple selector are allowed and do increase specificity.(एक ही simple selector की बार-बार उपस्थिति की अनुमति है और यह specificity बढ़ाती है।)"

[kroisse]

अब जबकि CSS Cascade Layers(@layer) को सभी प्रमुख browsers में support मिल गया है, तो अब इस तरह के hack पर निर्भर रहने की ज़रूरत नहीं होनी चाहिए।

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://caniuse.com/css-cascade-layers

[gwpark]

ओह, तो इसी वजह से styled-components में && इस्तेमाल करके styles को override किया जाता है?

[dogtree]

छात्र लेख हटाएँ

[kyc1682]

यह तो black magic जैसा लग रहा है haha

[xenoside]

अब शायद हमें ऐसा कोड देखने को मिलेगा।
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon

[nemorize]

ओह, यह मुझे नहीं पता था...
स्थिति के हिसाब से ऐसा preprocessor बनाकर इस्तेमाल किया जा सकता है जो selector को कई बार दोहराए।

[spilist2]

ओह, यह तरीका मुझे पता नहीं था।