मुफ़्त CSS फ़ॉर्मेटर और ब्यूटीफ़ायर
CSS को फ़ॉर्मेट, सुंदर और मिनीफ़ाई करें। इंडेंटेशन कस्टमाइज़ करें, प्रति पंक्ति एक प्रॉपर्टी और वर्णमाला क्रम को सक्षम करें, और पहले/बाद के आकारों की तुलना करें। फ़ॉर्मेट किए गए CSS को फ़ाइल के रूप में डाउनलोड करें।
CSS स्वरूपण वास्तव में क्या करता है
एक CSS फ़ॉर्मैटर (जिसे «beautifier» या «pretty-printer» भी कहते हैं) किसी भी रूप में CSS लेता है (मिनिफ़ाइड प्रोडक्शन आउटपुट, ब्राउज़र इंस्पेक्टर से चिपकाए गए एकल-पंक्ति अंश, असंगत इंडेंटेशन वाली हाथ से लिखी गई स्टाइलशीट) और उसे पारंपरिक इंडेंटेशन, लाइन ब्रेक और सेलेक्टर तथा घोषणा के सुसंगत स्वरूपण के साथ पुनः उत्सर्जित करता है। ब्राउज़र का CSS पार्सर पार्स के समय व्हाइटस्पेस को नज़रअंदाज़ करता है, इसलिए रेंडर किया गया पृष्ठ इस बात की परवाह किए बिना समान दिखता है कि स्रोत कैसे रखा गया है। बात विशुद्ध रूप से मानवीय पठनीयता की है: इंडेंटेड पदानुक्रम @media के नेस्टिंग को दृश्यमान बनाता है, प्रति पंक्ति एक प्रॉपर्टी आपकी आँखों को किसी नियम की घोषणाओं को तेज़ी से स्कैन करने देती है, और एक कोडबेस में सुसंगत स्वरूपण diff समीक्षा को तेज़ करता है। चार वास्तविक वर्कफ़्लो: (1) DevTools के Inspector से चिपकाए गए मिनिफ़ाइड प्रोडक्शन CSS को डिबग करना ताकि यह पता चले कि कोई नियम क्यों मिल नहीं रहा; (2) ब्राउज़र के «Computed» पैनल से निकाले गए CSS को स्रोत से तुलना करने के लिए पुनः फ़ॉर्मैट करना; (3) ऐसे योगदानकर्ता से merge के बाद टीम के स्वरूपण भेदों को सामान्य करना जो अलग संमेलनों का उपयोग करता है; (4) कोड समीक्षा के लिए CSS तैयार करना जब स्रोत संक्षिप्त एक-पंक्ति में बिगड़ चुका हो।
प्रमुख CSS फ़ॉर्मैटर
js-beautify (Einar Lielmanis, 2007 से) JavaScript-पारिस्थितिकी का दीर्घकालिक फ़ॉर्मैटर है, इसका CSS आधा हिस्सा वही है जो beautifier.io के सार्वजनिक चेहरे को चलाता है और ऐतिहासिक रूप से दर्ज़नों «format CSS online» साइटों को सहारा देता रहा है। Prettier (James Long, जनवरी 2017; CSS समर्थन v1.4 में 3 जून 2017 को जोड़ा गया) वह राय-धारक फ़ॉर्मैटर है जो आधुनिक frontend पारिस्थितिकी पर हावी हो गया। Prettier का डिज़ाइन दर्शन है «लगभग कोई कॉन्फ़िगरेशन नहीं», एक इंडेंट शैली (डिफ़ॉल्ट रूप से 2 स्पेस), एक लाइन-चौड़ाई लक्ष्य, अनुमानित रैपिंग। जब Prettier एक्सटेंशन इंस्टॉल हो तो VS Code में यह CSS के लिए डिफ़ॉल्ट फ़ॉर्मैटर है। Stylelint (David Clark + Maxime Thirouin, 2015) फ़ॉर्मैटर से अधिक linter है पर --fix ध्वज के माध्यम से format-on-save का समर्थन करता है और एक टीम में CSS संमेलनों को लागू करने का वास्तविक विकल्प है, इसके 100+ built-in नियम «कोई डुप्लिकेट सेलेक्टर नहीं» से लेकर «rgb() पर hex को प्राथमिकता दें» तथा «केवल एकल उद्धरण» तक सब कुछ कवर करते हैं। clean-css (Jakub Pawlowicz, 2011) मुख्यतः मिनिफ़ाई करता है पर इसका एक «beautify» मोड है जो ऑपरेशन को उलट देता है। चारों अंततः PostCSS (Andrey Sitnik, 7 सितंबर 2013 को शुरू) के माध्यम से CSS को पार्स करते हैं, सार्वभौमिक CSS पार्सर जो आधुनिक CSS पारिस्थितिकी (Autoprefixer, cssnano, Tailwind का प्रसंस्करण) के अधिकांश को संचालित करता है। 2026 की आधुनिक परियोजनाओं के लिए, save पर Prettier डिफ़ॉल्ट है; यह ब्राउज़र-में चलने वाला उपकरण किसी भी परियोजना संदर्भ के बाहर एक-बार के मामलों के लिए है।
इंडेंटेशन और सेलेक्टर संमेलन
2026 में CSS संमेलन 2-स्पेस इंडेंटेशन की ओर मज़बूती से झुकते हैं, Prettier, Tailwind का स्रोत, Bootstrap का Code Guide, Google CSS Style Guide और अधिकांश npm-प्रकाशित CSS पैकेजों में डिफ़ॉल्ट। पुराना 4-स्पेस संमेलन कुछ लीगेसी कोडबेस में बना हुआ है। विशेष रूप से CSS में टैब दुर्लभ हैं (JS/TS में अधिक सामान्य)। सेलेक्टर के लिए: अल्पविराम-अलग किए गए सेलेक्टर सूचियाँ संमेलन के अनुसार प्रति पंक्ति एक के रूप में लिखी जाती हैं (.btn,<br>.btn-primary,<br>.btn-secondary {), जिससे पंक्ति को पुनः-प्रवाहित किए बिना सेलेक्टर जोड़ना या हटाना आसान हो जाता है। संयोजकों (>, +, ~) के पास आम तौर पर हर तरफ़ एक स्पेस होता है। स्यूडो-क्लास श्रृंखलाएँ (:hover:focus) कसी रहती हैं। सार्वभौमिक सेलेक्टर (*) और वंशज संयोजक (अंतर्निहित स्पेस) फ़ॉर्मैटर-तटस्थ हैं।
घोषणा का स्वरूपण
प्रति पंक्ति एक घोषणा आधुनिक डिफ़ॉल्ट है, color: red; अपनी पंक्ति पर, padding: 10px; अगली पर। «कॉम्पैक्ट» विकल्प (एक पंक्ति पर कई घोषणाएँ) आज प्रोडक्शन CSS में दुर्लभ है; अधिकांश टीमें पठनीयता और साफ़ diffs के लिए एक-प्रति-पंक्ति पर चली गई हैं। कोलन के बाद एकल स्पेस: color: red;, न कि color:red;। अंतिम घोषणा पर ट्रेलिंग सेमीकोलन: CSS spec में तकनीकी रूप से वैकल्पिक, पर हर आधुनिक फ़ॉर्मैटर इसे diff-मित्रता के लिए शामिल करता है, एक नई प्रॉपर्टी जोड़ने के लिए पिछली पंक्ति को संशोधित करने की आवश्यकता नहीं होती। नियमों के बीच ख़ाली पंक्ति: वैकल्पिक और टीम-निर्भर। Prettier एक विशिष्ट शैली थोपने के बजाय इनपुट से ख़ाली पंक्तियों को संरक्षित करता है। प्रॉपर्टी उद्धरण: स्पेस वाले फ़ॉन्ट नामों को उद्धरण की आवश्यकता होती है (font-family: "Helvetica Neue", sans-serif;); URL संमेलन के अनुसार उद्धरण में लिखे जाते हैं (url("image.png")) हालाँकि बिना उद्धरण भी मान्य है। मान सामान्यीकरण: कीवर्ड को छोटे अक्षरों में (RED → red), संक्षिप्त hex (#FFFFFF → #fff), शून्य-इकाई हटाना (0px → 0), इनमें से अधिकांश एक मिनिफ़ायर के अंतर्गत आते हैं, फ़ॉर्मैटर के नहीं, पर कुछ फ़ॉर्मैटर बिना-हानि वाले लागू करते हैं।
विशेष CSS मामले
@media क्वेरीज़ अपने नियमों को एक अतिरिक्त इंडेंट स्तर के साथ नेस्ट करती हैं, जिससे सशर्त संरचना दृश्य रूप से स्पष्ट हो जाती है। @keyframes ब्लॉक प्रतिशत नियम (0% { ... }, 100% { ... }) रखते हैं जो उसी तरह नेस्ट होते हैं। @font-face घोषणाओं में कई src/format जोड़े होते हैं जो प्रति पंक्ति एक होने से लाभान्वित होते हैं। CSS कस्टम प्रॉपर्टी (--brand-color: #3b82f6;) किसी अन्य घोषणा की तरह ही फ़ॉर्मैट होती हैं, पर प्रॉपर्टी नाम केस संरक्षित करता है (कस्टम प्रॉपर्टी नाम केस-संवेदी हैं, मानक प्रॉपर्टी के विपरीत)। calc() व्यंजकों को ऑपरेटरों के आसपास व्हाइटस्पेस की आवश्यकता होती है, calc(100% - 20px) सही है, calc(100%-20px) अमान्य CSS है। फ़ॉर्मैटर calc() के अंदर आवश्यक व्हाइटस्पेस को संरक्षित करते हुए आसपास के संदर्भ को सामान्य करते हैं। CSS Nesting (CSS Nesting Module Level 1, baseline 2023+) (एक अपेक्षाकृत नई सुविधा जो नेस्टेड नियमों को अपने माता-पिता के अंतर्गत इंडेंट करने देती है) ने बदला है कि फ़ॉर्मैटर नेस्टेड सिंटैक्स को कैसे संभालते हैं; आधुनिक Prettier और Stylelint दोनों मूल सिंटैक्स को समझते हैं।
प्रॉपर्टी क्रमबद्ध करना, आश्चर्यजनक रूप से विवादित संमेलन
कुछ टीमें हर नियम के अंदर प्रॉपर्टी क्रम लागू करती हैं। तीन संमेलन प्रतिस्पर्धा करते हैं। वर्णानुक्रम (इस उपकरण का «प्रॉपर्टी सॉर्ट करें» टॉगल): सबसे सरल, यांत्रिक रूप से लागू करना आसान, «क्या प्रॉपर्टी X यहाँ पहले से घोषित है?» को एक त्वरित स्कैन बनाता है। Google CSS Style Guide विक्रेता उपसर्गों के लिए रियायतों के साथ वर्णानुक्रम की सिफ़ारिश करता है। अवधारणा के अनुसार (पोज़िशनिंग → बॉक्स मॉडल → टाइपोग्राफ़ी → विज़ुअल → एनिमेशन): संबंधित प्रॉपर्टीज़ को एक साथ समूहित करता है। SMACSS वास्तुकला पुस्तक ने इस दृष्टिकोण को लोकप्रिय बनाया। प्रकार के अनुसार (पहले display, फिर बॉक्स मॉडल, फिर टेक्स्ट, फिर विविध): «अवधारणा के अनुसार» का एक प्रकार जिसमें अधिक कठोर समूहीकरण होता है। Stylelint का order/properties-order नियम कॉन्फ़िगरेशन के माध्यम से इनमें से किसी का भी समर्थन करता है। तीनों में से कोई भी रेंडरिंग में सुधार नहीं करता; चयन विशुद्ध रूप से इस पर निर्भर करता है कि नियम स्कैन करते समय आपको कौन सा मानसिक मॉडल आसान लगता है। यह उपकरण वर्णानुक्रमिक छँटाई को एक opt-in टॉगल के रूप में पेश करता है; अन्य संमेलनों के लिए आपको एक वास्तविक प्रोजेक्ट में Stylelint कॉन्फ़िग फ़ाइल की आवश्यकता होगी।
आधुनिक CSS पाइपलाइन
बिल्ड पाइपलाइन वाले प्रोजेक्ट के लिए, 2026 का डिफ़ॉल्ट यह है कि Prettier आपके संपादक में save पर चलता है और Stylelint हर commit पर Husky + lint-staged के माध्यम से। VS Code एक्सटेंशन इंस्टॉल होने पर CSS, SCSS, LESS फ़ाइलों के लिए Prettier को डिफ़ॉल्ट फ़ॉर्मैटर के रूप में शिप करता है। Husky के माध्यम से Pre-commit hooks commit की अनुमति देने से पहले staged फ़ाइलों पर Stylelint और Prettier चलाते हैं। CI जाँचें pull requests पर stylelint --check और prettier --check चलाती हैं। डेवलपमेंट में स्वरूपण के बाद, प्रोडक्शन CSS cssnano (PostCSS-आधारित, आधुनिक मिनिफ़िकेशन मानक) से होकर गुज़रता है जो शिपिंग के लिए संकुचित bytes बनाने हेतु उन सब चीज़ों को उलट देता है जो फ़ॉर्मैटर ने की थीं। यह सब कहीं और से चिपकाए गए एक-बार के अंशों के लिए मायने नहीं रखता, ठीक इसी के लिए यह ब्राउज़र-में चलने वाला उपकरण है। दीर्घकालिक प्रोजेक्ट कार्य के लिए, स्थानीय रूप से Prettier + Stylelint सेट करें; ब्राउज़र-में चलने वाला उपकरण बाक़ी सब के लिए घर्षण-मुक्त विकल्प है।
सामान्य उपयोग के मामले
- कोड समीक्षा। किसी सहकर्मी के साथ साझा करने से पहले मिनिफ़ाइड या कॉम्पैक्ट CSS को पठनीय बनाएँ।
- डिबगिंग। सही ढंग से स्वरूपित CSS तुरंत यह दिखाई देता है कि कौन से सेलेक्टर मेल खा रहे हैं और कौन सी घोषणाएँ ओवरराइड हो रही हैं।
- रीफ़ैक्टरिंग। ऐसी स्टाइलशीट की संरचना समझना जो आपने नहीं लिखी सुसंगत स्वरूपण के साथ कहीं अधिक आसान है।
- ब्राउज़र इंस्पेक्टर सफ़ाई। DevTools में «Copy rule» बटन कॉम्पैक्ट, पढ़ने में कठिन CSS उत्पन्न करता है; इसे अपनी स्टाइलशीट में चिपकाने से पहले फ़ॉर्मैट करें।
- प्रोडक्शन मिनिफ़िकेशन। «मिनिफ़ाई मोड» टॉगल स्वरूपण को उलट देता है, प्रोडक्शन में CSS को तैनात करने के लिए उपयोगी, जहाँ हर byte मायने रखता है।
- टीम मानकीकरण। PR सबमिट करने से पहले टीम के स्वरूपण संमेलनों से मेल खाएँ।
गोपनीयता: यहाँ केवल-ब्राउज़र क्यों मायने रखता है
CSS में शायद ही कभी स्पष्ट रहस्य होते हैं, पर मालिकाना स्टाइलशीट किसी साइट की आंतरिक वर्ग वर्गीकरण, डिज़ाइन सिस्टम टोकन, सेलेक्टर नामों में एन्कोड किए गए A/B-टेस्ट परिकल्पनाएँ और बिना-वितरित विशेषताओं के बारे में जानकारी प्रकट करती है। सर्वर-साइड फ़ॉर्मैटर आपके CSS को एक तृतीय-पक्ष सेवा पर अपलोड करते हैं जहाँ वह लॉग में बैठता है। यह उपकरण पूरी तरह से आपके ब्राउज़र में JavaScript के माध्यम से चलता है, Format पर क्लिक करते समय DevTools के Network टैब में सत्यापित करें, या लोड होने के बाद पृष्ठ को ऑफ़लाइन (एयरप्लेन मोड) ले जाएँ और फ़ॉर्मैटर अब भी काम करता है। मालिकाना स्टाइलशीट, डिज़ाइन-सिस्टम source-of-truth फ़ाइलों, A/B-टेस्ट वेरिएंट्स या किसी भी CSS के लिए सुरक्षित जिसे आप किसी अजनबी की हार्ड ड्राइव पर कॉपी नहीं देखना चाहते।
अक्सर पूछे जाने वाले प्रश्न
CSS beautification क्या है?
Beautification (जिसे «फ़ॉर्मैटिंग» या «pretty-printing» भी कहा जाता है) CSS स्रोत को अधिक पठनीय बनाने के लिए पुनः फ़ॉर्मैट करती है, उचित इंडेंटेशन, नियमों के बीच लाइन ब्रेक, प्रति पंक्ति एक प्रॉपर्टी की घोषणाएँ, कोलन के आसपास सुसंगत अंतर जोड़ते हुए। ब्राउज़र-रेंडर किया गया आउटपुट समान होता है क्योंकि CSS पार्सर पार्स के समय व्हाइटस्पेस को नज़रअंदाज़ करता है। लक्ष्य कोड समीक्षा, डिबगिंग और संपादन के लिए मानवीय पठनीयता है, पृष्ठ कैसा दिखता है उसमें कोई परिवर्तन नहीं।
मुझे मिनिफ़ाइड CSS कब इस्तेमाल करना चाहिए?
मिनिफ़ाइड CSS सभी अनावश्यक व्हाइटस्पेस को हटा देता है और प्रोडक्शन परिनियोजन के लिए सही विकल्प है, यह CDN edge पर Brotli संपीड़न से पहले फ़ाइल आकार को 20-40 % तक कम करता है, और महत्वपूर्ण रेंडरिंग पथ से बचा हुआ हर byte Core Web Vitals (विशेष रूप से LCP) के लिए मायने रखता है। सुंदरीकृत CSS विकास, कोड समीक्षा और डिबगिंग के लिए है। आधुनिक बिल्ड पाइपलाइन (Vite, webpack, Parcel, Astro, Next.js) cssnano या Lightning CSS के माध्यम से प्रोडक्शन बिल्ड पर स्वचालित रूप से मिनिफ़ाई करते हैं, इसलिए प्रोजेक्ट कार्य के लिए आप आम तौर पर सुंदरीकृत CSS लिखते हैं और आपका bundler मिनिफ़ाइड संस्करण उत्सर्जित करता है।
«प्रॉपर्टीज़ को वर्णानुक्रम में सॉर्ट करें» क्या करता है?
यह हर नियम के अंदर घोषणाओं को वर्णानुक्रम में लगाता है, border color से पहले display से पहले margin। कुछ टीमें वर्णानुक्रम क्रम को लागू करती हैं क्योंकि यह «क्या X यहाँ पहले से घोषित है?» को एक त्वरित स्कैन बनाता है और कोड समीक्षा में डुप्लिकेट-प्रॉपर्टी तर्कों से बचाता है। Google CSS Style Guide वर्णानुक्रम (विक्रेता उपसर्गों के लिए रियायतों के साथ) की सिफ़ारिश करता है। अन्य टीमें «अवधारणा के अनुसार» क्रम पसंद करती हैं (पोज़िशनिंग → बॉक्स मॉडल → टाइपोग्राफ़ी → विज़ुअल → एनिमेशन, SMACSS द्वारा लोकप्रिय)। कोई भी क्रम रेंडरिंग को प्रभावित नहीं करता, विशुद्ध रूप से कॉस्मेटिक / टीम-संमेलन विकल्प।
«प्रति पंक्ति एक प्रॉपर्टी» क्या करता है?
यह हर घोषणा को अपनी पंक्ति पर रखता है, color: red; एक पंक्ति पर, padding: 10px; अगली पर, उन्हें एक ही पंक्ति में पैक करने के बजाय। अनिवार्य रूप से सभी प्रोडक्शन CSS में आधुनिक डिफ़ॉल्ट, क्योंकि यह diffs को साफ़-सुथरा बनाता है (एक प्रॉपर्टी जोड़ना = एक पंक्ति जोड़ना, एक को संशोधित करना नहीं) और हर घोषणा को व्यक्तिगत रूप से पढ़ने में आसान बनाता है। विपरीत (प्रति पंक्ति कई घोषणाएँ) 2026 के प्रोडक्शन कोड में बहुत कॉम्पैक्ट एकल-नियम अंशों को छोड़कर दुर्लभ है।
यदि मेरा प्रोजेक्ट पहले से Prettier या Stylelint का उपयोग करता है तो क्या मुझे इसका इस्तेमाल करना चाहिए?
शायद नहीं, आपके संपादक का Prettier एकीकरण save पर यह कर रहा है, PostCSS के माध्यम से पूर्ण CSS AST जागरूकता के साथ, और Stylelint हर commit पर टीम संमेलन लागू करता है। यह उपकरण उन मामलों के लिए है जिन्हें आपकी बिल्ड पाइपलाइन कवर नहीं करती: ब्राउज़र इंस्पेक्टर से चिपकाया गया CSS, ईमेल या Stack Overflow से अंश, किसी भी प्रोजेक्ट संदर्भ के बाहर एक-बार का स्वरूपण। दीर्घकालिक प्रोजेक्ट कार्य के लिए, स्थानीय रूप से Prettier + Stylelint सेट करें; घर्षण-मुक्त एक-बार के कार्य के लिए, यह उपकरण सही रूप है।
क्या मेरी CSS फ़ाइलें अपलोड की जाती हैं?
नहीं। स्वरूपण पूरी तरह से आपके ब्राउज़र में JavaScript के माध्यम से चलता है। आप जो CSS चिपकाते हैं वह कभी नेटवर्क पार नहीं करता, Format पर क्लिक करते समय DevTools के Network टैब में सत्यापित करें, या लोड होने के बाद पृष्ठ को ऑफ़लाइन (एयरप्लेन मोड) ले जाएँ और उपकरण अब भी काम करता है। मालिकाना स्टाइलशीट, डिज़ाइन-सिस्टम source-of-truth फ़ाइलों, A/B-टेस्ट वेरिएंट्स या किसी भी CSS के लिए सुरक्षित जिसे आप किसी अजनबी की हार्ड ड्राइव पर कॉपी नहीं देखना चाहते।