CSS मिनिफ़ाई और ब्यूटिफ़ाई करें

CSS को तोड़े बिना मिनिफ़ाई करना

स्टाइलशीट मिनिफ़ाई करने का मतलब है वह सब हटाना जिसे ब्राउज़र अनदेखा करता है: कमेंट, इंडेंटेशन, लाइन ब्रेक और विराम चिह्नों के आसपास के स्पेस। छोटी फ़ाइलें तेज़ी से डाउनलोड और पार्स होती हैं, और बड़ी स्टाइलशीट में कंप्रेशन से पहले की बचत अक्सर उसके साइज़ का चौथाई से आधा हिस्सा होती है। नियम और उनका क्रम ठीक वैसे ही रहते हैं जैसे लिखे थे।

मुश्किल यह जानना है कि ब्राउज़र कौन-सा व्हाइटस्पेस अनदेखा करता है। nav a जैसे दो सेलेक्टर के बीच का स्पेस एक कॉम्बिनेटर है जिसका मतलब “कोई भी वंशज” है, इसलिए nav a और nava अलग चीज़ें हैं। calc(1rem + 2px) के अंदर + के आसपास के स्पेस ज़रूरी हैं, और calc(1rem+2px) अमान्य है। कोट्स के अंदर और url() के अंदर का टेक्स्ट डेटा है, सिंटैक्स नहीं। रेगुलर एक्सप्रेशन से बना मिनिफ़ायर अक्सर इनमें से किसी एक को गलत कर देता है; यह टूल स्टाइलशीट को टोकन के क्रम की तरह पढ़ता है और व्हाइटस्पेस सिर्फ़ वहीं हटाता है जहाँ व्याकरण उसे वैकल्पिक बनाता है।

ब्यूटिफ़ाई करना उलटी दिशा है: हर लाइन पर एक डिक्लेरेशन, ब्रेस के अंदर इंडेंट के साथ, ताकि CDN से मिली मिनिफ़ाई की हुई फ़ाइल ऐसी बन जाए जिसे आप पढ़ सकें और जिसकी तुलना कर सकें।

सुझाव

• सिर्फ़ स्टाइलशीट नहीं, पूरा पेज व्यवस्थित करना है? HTML फ़ॉर्मैट और व्यवस्थित करें इस्तेमाल करें।
• स्टाइलशीट के लिए रंग चुन रहे हैं? रंग कन्वर्टर और कंट्रास्ट जाँच hex को RGB, HSL और अन्य में बदलता है।
• मिनिफ़ाई ने असल में क्या बदला, यह दोनों रूपों की टेक्स्ट की तुलना करें में तुलना करके जाँचें।