CSS फ़ॉर्मेटर

CSS मुट्ठी भर ढूँढो-और-बदलो नियमों से दोबारा फ़ॉर्मेट करने के लिए काफ़ी सरल लगता है — हर सेमीकोलन के बाद लाइन ब्रेक जोड़ना, ब्रेस के अंदर इंडेंट करना — जब तक नेस्टिंग, मीडिया क्वेरी, और कस्टम प्रॉपर्टी व कंटेनर क्वेरी जैसे आधुनिक फ़ीचर असल में फ़ाइल में न हों। रेगुलर-एक्सप्रेशन-आधारित तरीक़े में नेस्टिंग गहराई की कोई असली अवधारणा नहीं होती, तो यह कई नेस्टेड सेलेक्टर वाली किसी मीडिया क्वेरी को सही तरीक़े से इंडेंट नहीं कर सकता, और किसी डिक्लेरेशन को ख़त्म करने वाले सेमीकोलन को किसी स्ट्रिंग वैल्यू या मनमाना टेक्स्ट रखने वाली कस्टम प्रॉपर्टी के अंदर आए सेमीकोलन से अलग करने का कोई तरीक़ा नहीं है। स्टाइलशीट को पहले एक असली संरचना में पार्स करना — यह समझना कि कौन सा रूल किसके अंदर नेस्टेड है, हर ब्लॉक कहाँ शुरू और ख़त्म होता है — यही चीज़ फ़ॉर्मेटिंग को असली CSS में सही बनाती है, सिर्फ़ खिलौने जैसे उदाहरणों में नहीं।

इस टूल की मिनिफ़िकेशन सिर्फ़ व्हाइटस्पेस और कमेंट हटाने तक सीमित है — किसी स्टाइलशीट के वे हिस्से जो सिर्फ़ इसे पढ़ने वाले इंसान के लिए मौजूद हैं और ब्राउज़र के रेंडरिंग इंजन के लिए कोई मतलब नहीं रखते। यह जान-बूझकर डुप्लीकेट सेलेक्टर को नहीं मिलाता, डिक्लेरेशन को दोबारा क्रमबद्ध नहीं करता, या `#ffffff` को `#fff` में छोटा करने जैसे रंग वैल्यू को नहीं छोटा करता, भले ही कोई ज़्यादा आक्रामक मिनिफ़ायर तीनों काम करके छोटी फ़ाइल बना सके। ये ट्रांसफ़ॉर्मेशन ऐसे तरीक़ों से व्यवहार बदल सकते हैं जिन्हें नज़रअंदाज़ करना आसान है: एक ही सेलेक्टर वाले लेकिन कैस्केड में अलग-अलग बिंदुओं पर लिखे दो रूल को मिलाने से यह बदल सकता है कि टकराव होने पर कौन सी डिक्लेरेशन जीतती है, और डिक्लेरेशन को दोबारा क्रमबद्ध करने में वही जोखिम है। सिर्फ़ व्हाइटस्पेस हटाने में यह जोखिम नहीं है — यह नहीं बदल सकता कि ब्राउज़र क्या रेंडर करता है, सिर्फ़ इसे बताने में कितने बाइट लगते हैं यह बदलता है।

वेब सर्वर लगभग सार्वभौमिक रूप से टेक्स्ट रिसोर्स को नेटवर्क पर भेजने से पहले gzip या brotli से कंप्रेस करते हैं, और दोनों कंप्रेशन एल्गोरिदम ठीक उसी तरह की रिडंडेंसी का फ़ायदा उठाने में बहुत अच्छे हैं जो व्हाइटस्पेस और एक जैसी इंडेंटेशन दर्शाते हैं — स्पेस के दोहराए गए सीक्वेंस पहले से ही बेहद अच्छी तरह कंप्रेस होते हैं। इसका मतलब है कि फ़ॉर्मेट की गई और मिनिफ़ाई की गई स्टाइलशीट के बीच का फ़र्क़, gzip से गुज़रने के बाद, बिना-कंप्रेस्ड साइज़ के फ़र्क़ से काफ़ी कम है। मिनिफ़ाई करना फिर भी मदद करता है, ख़ासकर कमेंट को सीधे हटाकर बजाय सिर्फ़ उन्हें कंप्रेस करने के, लेकिन यह जानना अच्छा है कि आधुनिक टूल के वादे किए नेटवर्क ट्रांसफ़र फ़ायदे का ज़्यादातर हिस्सा कंप्रेशन से आता है, और CSS मिनिफ़िकेशन उसके ऊपर एक छोटी अतिरिक्त लेयर जोड़ता है।

किसी Sass या Less फ़ाइल को फ़ॉर्मेट करने का मतलब है सोर्स कोड पर बिल्कुल जैसा लिखा गया है वैसे ही एक जैसी इंडेंटेशन और स्पेसिंग लागू करना — नेस्टिंग, वेरिएबल, मिक्सिन और कंट्रोल डायरेक्टिव अपनी मूल प्रीप्रोसेसर सिंटैक्स में बरक़रार रहते हैं। यह कंपाइल करने से पूरी तरह अलग ऑपरेशन है, जो वेरिएबल को उनकी असली वैल्यू में हल करता है, नेस्टेड सेलेक्टर को स्वतंत्र सादे CSS रूल में चपटा करता है, और किसी भी मिक्सिन को चलाकर उसका विस्तारित आउटपुट देता है। कोई भी जो SCSS इनपुट से कंपाइल किया गया CSS उम्मीद कर रहा हो वह उसी नेस्टेड, वेरिएबल से भरे सोर्स कोड को हल होने की बजाय फ़ॉर्मेट देखकर हैरान होगा — यह टूल प्रीप्रोसेसर भाषा के लिए एक फ़ॉर्मेटर है, उसके लिए कंपाइलर नहीं।