क्या वेबसाइट में अप्रयुक्त सीएसएस खोजने का कोई तरीका है?

Question

क्या वेबसाइट में अप्रयुक्त सीएसएस खोजने का कोई तरीका है?

मैं अभी एक विरासत में एक परियोजना को साफ करने की कोशिश कर रहा हूं।

Answer 1

Dust-me Selectors एक फ़ायरफ़ॉक्स प्लगइन है जो अप्रयुक्त चयनकर्ताओं को पाता है।

Answer 2

मैं सिर्फ इस में भाग गया और अपने प्रश्न याद किया: http://github.com/geuis/helium-css

Answer 3

वहाँ इतना सीएसएस के लिए सबसे अच्छा अभ्यास विधियों के बारे में कहा जा सकता है है। मैं मुख्य बिंदुओं पर टिकने की कोशिश करूंगा।

एक सीएसएस रीसेट का उपयोग करें।

वास्तव में सामान्य सीएसएस कथन जैसे h1 {} और #container em {} को निकालने का प्रयास करें। h1.section-title औरका उपयोग करके आप बहुत बेहतर हैं, क्योंकि अगर आप h1 या em का उपयोग अपने दस्तावेज़ में कहीं अलग तरीके से करना चुनते हैं, तो आपको किसी भी मौजूदा कोड को ओवरराइड करने की चिंता करने की आवश्यकता नहीं है।

यदि आपके पास नहीं है तो अपने सीएसएस चयनकर्ताओं में बहुत विशिष्ट न हों। यदि आप एक विशिष्ट खंड में होने पर तत्व को प्रदर्शित करने जा रहे हैं तो आपको वास्तव में विशिष्टता की उच्च डिग्री की आवश्यकता होती है। अन्यथा, अपने block कक्षा पुन: प्रयोज्य के लिए अपना कोड बनाने के लिए, #container .content .block ... को कई मामलों में .block ... तक घटाया जा सकता है।

अपने सीएसएस में समानताओं की तलाश करें और देखें कि क्या आप पुन: प्रयोज्य कक्षाएं बना सकते हैं। यदि आपके पास class="favorites" और class="popular" समान ब्लॉक हैं, तो इसे class="block block-favorites" और class="block block-popular" में बदलें, और समानताएं .block में डाल दें।

अपने सीएसएस में क्षेत्रों को बनाने की आदत में एक ऑटो-चौड़ाई (अंतर्निहित किया जा सकता है) ताकि वे आपके कंटेनर की चौड़ाई तक बढ़ सकें। यह किसी भी कोड को बदलने के बिना आपकी वेबसाइट के एक संकीर्ण हिस्से से अनुभागों को अपनी वेबसाइट के विस्तृत हिस्से तक ले जाने के लिए अविश्वसनीय रूप से आसान बनाता है।

अपने कोड को टिप्पणी करते हुए और इसे अनुभागों में तोड़ने से आमतौर पर कोड को और अधिक पठनीय बनाने में मदद मिलती है।

आपको आश्चर्य होगा कि जब आप अधिक शक्तिशाली सीएसएस चयनकर्ताओं को लागू करते हैं तो आपका कोड कितना क्लीनर दिखता है। उनमें से अधिकांश क्रॉस-ब्राउज़र संगत (इंटरनेट   एक्सप्लोरर 7 और बाद में) हैं।
कुछ बहुमूल्य संसाधनों: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors

उत्तर ले जाया से:
Best Practices for Cleaning up Existing CSS/unused styles

Answer 4

क्रोम 59 में निर्मित किया गया है सीएसएस और जावास्क्रिप्ट के लिए कवरेज प्रदर्शन 2017-04 के बाद से: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

आप देव उपकरण खोलकर इसे सक्षम कर सकते हैं, फिर मुझे आदेश दें विंडोज़ और लिनक्स पर एनयू (Cmd+Shift+P या मैक पर Ctrl+Shift+P), और फिर "शो कवरेज" टाइप करें।