CSS ब्यूटिफिकेशन कैसे काम करती है
ब्यूटिफायर आपकी stylesheet को character by character पढ़ता है, यह track करता है कि हर block कितना deeply nested है, और उसे consistent spacing के साथ फिर से emit करता है। यह कभी नहीं बदलता कि styles क्या करते हैं — केवल यह बदलता है कि वे file में कैसे दिखते हैं।
- टोकनाइज़ करें. लाइब्रेरी आपके input को tokens की stream में scan करती है: selectors, property names, values, at-rules, comments और braces, colons, semicolons। Strings और url() values एकल इकाइयों के रूप में पहचाने जाते हैं, इसलिए content property के अंदर एक brace को block delimiter समझने की गलती नहीं होती।
- Nesting track करें. जैसे-जैसे यह token stream पर चलता है, ब्यूटिफायर एक running indent level रखता है। हर opening brace level को deeper करता है — चाहे वह rule block हो, media query हो या keyframes block — और हर closing brace उसे वापस pop करता है। वह depth तय करती है कि आपको वापस मिलने वाली हर line के सामने कितने indent units होंगे।
- अपने options लागू करें. आपका indent choice (2 spaces, 4 spaces, या tab) एक level की चौड़ाई निर्धारित करता है। Brace-style setting तय करती है कि opening brace selector से जुड़ी रहे या अपनी अलग line पर आए। शेष toggles rule blocks के बीच blank line जोड़ते हैं और grouped selectors जैसे h1, h2, h3 को अलग-अलग lines पर split करते हैं।
- फिर से उत्सर्जित करें. अंत में formatter उन indentation और line breaks के साथ tokens को वापस print करता है जो उसने तय किए हैं, प्रति line एक declaration और हर colon के बाद एक स्पेस रखता है। परिणाम वही stylesheet है, इस प्रकार layout किया गया जिसे कोई इंसान cascade पढ़ और scan कर सके।
CSS ब्यूटिफाई क्यों करें
- Minified stylesheets पढ़ें. Production CSS एक line पर बिना spacing के ship होती है। ब्यूटिफाई करने से line breaks और indentation बहाल होती है ताकि आप layout bug के पीछे selector खोज सकें और देख सकें कि वह कौन-से declarations set करता है, source map के बिना भी।
- असंगत files को व्यवस्थित करें. जिस stylesheet को कई लोगों ने touch किया है वह mixed indentation और brace styles में drift हो जाती है। ब्यूटिफायर से एक pass पूरी file को एकल layout में normalize करता है, जिससे अगला diff whitespace noise के बजाय real cascade changes दिखाता है।
- यह टूल आपके page को tax नहीं करता. अधिकतर online formatters page खुलते ही अपनी पूरी library load करते हैं। यह टूल js-beautify को केवल तभी lazy-load करता है जब आप Beautify click करें या Live mode चालू करें, इसलिए page खोलने पर कुछ सौ की बजाय कुछ kilobytes खर्च होते हैं और initial render तेज़ रहता है।
- कुछ भी आपके browser से नहीं जाता. ब्यूटिफायर पूरी तरह आपके device पर चलता है। आपकी CSS कभी server पर upload नहीं होती, जो तब महत्वपूर्ण है जब आप जो stylesheet inspect कर रहे हैं वह किसी client की हो, internal class names हों, या confidentiality agreement के अंतर्गत हो।
सामान्य अनुप्रयोग
CSS ब्यूटिफाई करना तब उपयोगी होता है जब किसी को ऐसी stylesheet पढ़नी हो जो पढ़ने के लिए नहीं लिखी गई थी।
- Debugging production: Network tab से खींचे गए minified stylesheet को paste करें और वह rule खोजें जो आपके expected layout को override कर रहा है।
- Code review की तैयारी: pull request खोलने से पहले किसी contributor की असंगत-रूप से indented stylesheet को reformat करें ताकि reviewers whitespace churn के बजाय cascade changes देखें।
- Learning और auditing: किसी framework या component-library stylesheet को expand करें ताकि उसके selectors, media queries और custom properties की संरचना समझ सकें।
एक व्यावहारिक उदाहरण
एक minified one-liner लें: a{color:red;margin:0}b{padding:0}। इसे ऊपर 2 spaces indentation और Collapse brace style के साथ paste करें, फिर Beautify click करें। आपको पठनीय blocks मिलते हैं: a { अपनी line पर, color: red; और margin: 0; declarations एक level deeper indented, closing brace selector के नीचे aligned, और b rule नीचे। Brace style को Expand पर switch करें और हर opening brace अपनी line पर आ जाता है। Indentation को Tabs में बदलें और हर level two spaces से tab character में shift हो जाता है। Styles एक समान हैं; केवल layout बदलता है।
FAQ
क्या यह मेरे browser में चलता है?
हाँ। js-beautify library पहली बार Beautify click करने या Live mode enable करने पर lazy-load होती है, फिर cached हो जाती है। आपकी CSS page से कभी नहीं जाती — कोई server round-trip नहीं, कोई upload नहीं।
क्या ब्यूटिफाई करना un-minifying के समान है?
यह पठनीय formatting बहाल करता है — indentation, line breaks और spacing — लेकिन यह वे comments वापस नहीं ला सकता जो minification ने strip किए या वह structure जो file में कभी था ही नहीं। यह केवल मौजूद declarations और selectors को reformat करता है।
क्या ब्यूटिफाई करने से मेरी styles का rendering बदल जाएगा?
नहीं। ब्यूटिफिकेशन केवल whitespace और line breaks जोड़ता और हटाता है; cascade untouched रहता है और page identically render होता है। Property order, specificity और values सब वैसे ही रहते हैं जैसे आपने लिखे थे।
Brace-style options का क्या मतलब है?
Collapse opening brace को selector की same line पर रखता है (a {), जो सामान्य CSS convention है। Expand हर opening brace को selector के नीचे अपनी line पर drop करता है। Blank-line और one-selector-per-line toggles rule blocks के बीच spacing और h1, h2, h3 जैसे grouped selectors का layout control करते हैं।
Browser-side CSS ब्यूटिफिकेशन आपको readable stylesheet देता है बिना build step या upload के। एक minified या अव्यवस्थित file paste करें, अपना indentation और brace style चुनें, फिर result copy या download करें। कुछ भी आपके device से नहीं जाता, कोई account नहीं, और library तभी load होती है जब आप कहें — इसलिए यह page खोलने पर megabyte नहीं, कुछ kilobytes खर्च होते हैं।