CSS फ़ॉर्मैटिंग क्या है?

CSS फ़ॉर्मैटिंग Cascading Style Sheets में सुसंगत इंडेंटेशन, लाइन ब्रेक और रिक्त स्थान जोड़ने की प्रक्रिया है ताकि कोड पढ़ने में आसान हो। ब्राउज़र CSS में रिक्त स्थान को पूरी तरह से अनदेखा करते हैं। एक minified एक-लाइनर और एक सुव्यवस्थित इंडेंटेड स्टाइलशीट समान रेंडरिंग उत्पन्न करते हैं। फ़र्क बस पठनीयता का है: फ़ॉर्मैटेड CSS आपको सेलेक्टर स्कैन करने, छूटे हुए सेमीकोलन पहचानने और एक नज़र में cascade को समझने देता है।

एक CSS formatter (जिसे कभी-कभी CSS beautifier या pretty-printer भी कहा जाता है) minified या असंगत रूप से स्टाइल किए गए CSS को एकसमान इंडेंटेशन, प्रति पंक्ति एक declaration और सुसंगत ब्रेस प्लेसमेंट के साथ पुनः लिखता है। यह मिनिफ़िकेशन की विपरीत प्रक्रिया है, जिसे beautification या pretty-printing भी कहते हैं। जबकि मिनिफ़िकेशन प्रोडक्शन के लिए फ़ाइल आकार कम करने हेतु रिक्त स्थान हटाता है, फ़ॉर्मैटिंग विकास, कोड समीक्षा और कोडबेस रखरखाव के लिए संरचना पुनः स्थापित करती है।

CSS specification (W3C CSS Syntax Module Level 3) स्टाइलशीट के लिए व्याकरण परिभाषित करता है, लेकिन रिक्त स्थान परंपराओं के बारे में कुछ नहीं कहता। फ़ॉर्मैटिंग नियम एक टीम का निर्णय होते हैं: टैब बनाम स्पेस, 2-स्पेस बनाम 4-स्पेस इंडेंट, ब्रेस स्टाइल, नियम सेट के बीच खाली पंक्तियाँ। एक formatter जो भी परंपरा आप चुनते हैं उसे प्रत्येक फ़ाइल में सुसंगत रूप से लागू करता है। अधिकांश टीमें अपनी पसंद को .prettierrc या .editorconfig फ़ाइल में दर्ज करती हैं।

इस CSS Formatter का उपयोग क्यों करें?

कोई भी CSS चिपकाएँ और मिलीसेकंड में उचित रूप से इंडेंटेड आउटपुट प्राप्त करें। इंस्टॉल करने के लिए कोई एडिटर प्लगइन नहीं, लिखने के लिए कोई कॉन्फ़िगरेशन फ़ाइल नहीं, बनाने के लिए कोई अकाउंट नहीं।

⚡

तत्काल फ़ॉर्मैटिंग

टाइप या चिपकाते समय आउटपुट अपडेट होता है। बिल्ड स्टेप की प्रतीक्षा किए या CLI कमांड चलाए बिना आपको तुरंत फ़ॉर्मैटेड CSS मिलती है।

🔒

Privacy-First

सभी फ़ॉर्मैटिंग JavaScript का उपयोग करके आपके ब्राउज़र में स्थानीय रूप से होती है। आपकी CSS कभी भी आपके डिवाइस से बाहर नहीं जाती और किसी सर्वर को नहीं भेजी जाती।

🎨

कॉन्फ़िगर करने योग्य इंडेंटेशन

अपने प्रोजेक्ट की कोड शैली से मेल खाने के लिए 2-स्पेस, 4-स्पेस या टैब इंडेंटेशन में से चुनें। आउटपुट सीधे आपके कोडबेस में चिपकाने के लिए तैयार है।

📋

लॉगिन की आवश्यकता नहीं

पृष्ठ खोलें, अपनी CSS चिपकाएँ, परिणाम कॉपी करें। कोई साइन-अप नहीं, कोई दर सीमा नहीं, कोई फ़ीचर गेट नहीं। प्रत्येक विज़िट पर पूरा टूल उपलब्ध है।

CSS Formatter के Use Cases

फ्रंटएंड विकास

जब आप किसी वेंडर लाइब्रेरी या CDN से minified CSS प्राप्त करते हैं, तो सेलेक्टर पढ़ने और यह समझने के लिए कि यह आपकी स्वयं की स्टाइलशीट में क्या ओवरराइड करता है, उसे फ़ॉर्मैट करें।

बैकएंड इंजीनियरिंग

सर्वर-रेंडर्ड पृष्ठ अक्सर महत्वपूर्ण CSS को एकल पंक्ति के रूप में इनलाइन करते हैं। उस CSS को फ़ॉर्मैट करने से यह जाँचना आसान हो जाता है कि प्रारंभिक HTML पेलोड में कौन-सी स्टाइल शामिल हैं।

DevOps और CI पाइपलाइन

पुल रिक्वेस्ट में सुसंगत CSS फ़ॉर्मैटिंग लागू करें और formatter के आउटपुट की तुलना committed files से करें। असंगत रिक्त स्थान शोरगुल वाले diff बनाते हैं जो वास्तविक परिवर्तनों को छुपा देते हैं।

QA और बग जाँच

किसी दृश्य बग को डीबग करते समय, DevTools से प्राप्त computed CSS को फ़ॉर्मैट करें ताकि यह शीघ्रता से पहचाना जा सके कि कौन-से गुण लागू हैं और विशिष्टता के किस क्रम में।

डेटा माइग्रेशन

कंटेंट मैनेजमेंट सिस्टम और ईमेल बिल्डर CSS को डेटाबेस फ़ील्ड में संग्रहीत करते हैं, अक्सर रिक्त स्थान रहित। निकाली गई CSS को फ़ॉर्मैट करने से पुनः आयात करने से पहले उसे सत्यापित करने में सहायता मिलती है।

CSS सीखना

CSS सीखने वाले विद्यार्थी ट्यूटोरियल या Stack Overflow उत्तरों से उदाहरण चिपका सकते हैं और उन्हें सुसंगत रूप से फ़ॉर्मैटेड देख सकते हैं, जिससे नेस्टिंग और cascade को समझना आसान हो जाता है।

CSS प्रॉपर्टी क्रम संदर्भ

अधिकांश CSS formatter प्रॉपर्टी को पुनः क्रमबद्ध नहीं करते। लेकिन कई स्टाइल गाइड संबंधित प्रॉपर्टी को एक साथ समूहित करने की अनुशंसा करते हैं। नीचे दी गई तालिका Stylelint के order प्लगइन और CSScomb जैसे टूल द्वारा उपयोग की जाने वाली एक सामान्य समूहीकरण परंपरा दर्शाती है:

समूह	उदाहरण प्रॉपर्टी	उद्देश्य
Position & Layout	position, display, float, clear	Defines the element's rendering mode
Box Model	width, height, margin, padding	Controls dimensions and spacing
Typography	font-size, line-height, color	Text styling properties
Visual	background, border, box-shadow	Decorative properties
Animation	transition, animation, transform	Motion and transform effects
Misc	cursor, overflow, z-index	Behavioral and stacking properties

यह समूहीकरण एक परंपरा है, CSS की आवश्यकता नहीं। ब्राउज़र किसी नियम ब्लॉक में प्रॉपर्टी की स्थिति की परवाह किए बिना, विशिष्टता और स्रोत क्रम के आधार पर declarations लागू करते हैं। एक formatter रिक्त स्थान और इंडेंटेशन पर ध्यान केंद्रित करता है; प्रॉपर्टी पुनः क्रमबद्धता एक अलग लिंटिंग चिंता है जिसे Stylelint जैसे टूल संभालते हैं।

CSS फ़ॉर्मैटिंग बनाम CSS मिनिफ़िकेशन

फ़ॉर्मैटिंग और मिनिफ़िकेशन विपरीत प्रक्रियाएँ हैं, जो विकास के विभिन्न चरणों में लागू होती हैं:

CSS Formatter (यह टूल)

CSS को पठनीय बनाने के लिए इंडेंटेशन, लाइन ब्रेक और रिक्त स्थान जोड़ता है। विकास और कोड समीक्षा के दौरान उपयोग किया जाता है। फ़ाइल आकार बढ़ाता है लेकिन ब्राउज़र रेंडरिंग पर कोई प्रभाव नहीं पड़ता। आउटपुट मनुष्यों के लिए है।

CSS Minifier

फ़ाइल आकार कम करने के लिए सभी अनावश्यक रिक्त स्थान, टिप्पणियाँ और अतिरेकी syntax हटाता है। प्रोडक्शन बिल्ड के लिए उपयोग किया जाता है। आउटपुट ब्राउज़र और CDN के लिए है, पढ़ने के लिए नहीं।

कोड उदाहरण

विभिन्न भाषाओं और वातावरणों में CSS को प्रोग्रामेटिक रूप से फ़ॉर्मैट करने का तरीका:

JavaScript (Prettier API)

import * as prettier from 'prettier'

const ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

const formatted = await prettier.format(ugly, {
  parser: 'css',
  tabWidth: 2,
  singleQuote: true,
})
// → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}\n"

Python (cssbeautifier)

import cssbeautifier

ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

opts = cssbeautifier.default_options()
opts.indent_size = 2

formatted = cssbeautifier.beautify(ugly, opts)
# → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}"

CLI (Prettier)

# Format a single file in place
npx prettier --write styles.css

# Format all CSS files in a directory
npx prettier --write "src/**/*.css"

# Check formatting without modifying files
npx prettier --check "src/**/*.css"

# Pipe minified CSS through stdin
echo "body{margin:0;padding:0}" | npx prettier --parser css

PHP (sabberworm/php-css-parser)

<?php
// composer require sabberworm/php-css-parser
require 'vendor/autoload.php';

use Sabberworm\CSS\Parser;
use Sabberworm\CSS\OutputFormat;

$input = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}';

$document = (new Parser($input))->parse();
echo $document->render(OutputFormat::createPretty());
// → body {
//     margin: 0;
//     padding: 0;
//   }
//   h1 {
//     font-size: 2rem;
//     color: #333;
//   }

अक्सर पूछे जाने वाले प्रश्न

CSS formatter और CSS linter में क्या अंतर है?

एक CSS formatter केवल रिक्त स्थान बदलता है: इंडेंटेशन, लाइन ब्रेक, कोलन और ब्रेस के आसपास स्पेसिंग। यह आपकी वास्तविक CSS declarations को नहीं बदलता। एक CSS linter (जैसे Stylelint) आपके कोड का त्रुटियों, बुरी प्रथाओं और शैली उल्लंघनों के लिए विश्लेषण करता है, और रिक्त स्थान से परे समस्याओं को सुझाव दे सकता है या स्वतः ठीक कर सकता है। टीमें आमतौर पर दोनों का उपयोग करती हैं: सुसंगत स्पेसिंग के लिए formatter, गलतियाँ पकड़ने के लिए linter।

क्या CSS फ़ॉर्मैट करने से ब्राउज़र में रेंडरिंग बदलती है?

नहीं। ब्राउज़र W3C CSS Syntax Module के अनुसार CSS पार्स करते हैं, जो सभी रिक्त स्थान (स्पेस, टैब, नई पंक्तियाँ) को समतुल्य टोकन विभाजक के रूप में मानता है। declarations, सेलेक्टर या मानों के बीच रिक्त स्थान जोड़ने या हटाने का computed styles पर कोई प्रभाव नहीं पड़ता। एकमात्र अपवाद स्ट्रिंग मानों जैसे content: "hello world" के अंदर रिक्त स्थान है, जिसे formatter सुरक्षित रखता है।

CSS इंडेंटेशन के लिए कितने स्पेस उपयोग करने चाहिए?

दो सबसे सामान्य परंपराएँ 2 स्पेस और 4 स्पेस हैं। Google की स्टाइल गाइड और Prettier का डिफ़ॉल्ट दोनों 2 स्पेस का उपयोग करते हैं। WordPress CSS coding standards टैब का उपयोग करते हैं। प्रदर्शन में कोई अंतर नहीं है। जो आपकी टीम पहले से उपयोग करती है, या जो आपका मौजूदा JavaScript/HTML कोड उपयोग करता है, वही चुनें और सुसंगत रहें।

क्या मैं इस टूल से SCSS, LESS या अन्य CSS preprocessors फ़ॉर्मैट कर सकता हूँ?

यह टूल मानक CSS syntax फ़ॉर्मैट करता है। SCSS और LESS अधिकांश CSS syntax साझा करते हैं, इसलिए सरल preprocessor कोड अक्सर सही ढंग से फ़ॉर्मैट होता है। हालाँकि, @mixin, @include और नेस्टेड नियम सेट जैसी SCSS-विशिष्ट संरचनाएँ अपेक्षा के अनुसार नहीं संभाली जा सकतीं। SCSS के लिए, SCSS पार्सर के साथ Prettier या sass-formatter एक्सटेंशन का उपयोग करें।

क्या CSS फ़ॉर्मैटिंग और CSS beautification एक ही हैं?

हाँ। CSS formatter, CSS beautifier और CSS pretty-printer सभी एक ही प्रक्रिया को संदर्भित करते हैं: CSS कोड में सुसंगत रिक्त स्थान जोड़ना। अलग-अलग टूल अलग-अलग नाम उपयोग करते हैं, लेकिन आउटपुट एक ही है: इंडेंटेड, पठनीय CSS जिसमें प्रति पंक्ति एक declaration है।

मेरी फ़ॉर्मैटेड CSS में मूल से अलग संख्या में पंक्तियाँ क्यों हैं?

Minified CSS अक्सर एकल पंक्ति पर एकाधिक declarations पैक करती है या नियम सेट के बीच लाइन ब्रेक छोड़ देती है। Formatter प्रत्येक declaration के बाद लाइन ब्रेक और नियम सेट के बीच एक खाली पंक्ति जोड़ता है, जिससे पंक्ति संख्या बढ़ जाती है। वास्तविक CSS सामग्री (सेलेक्टर, प्रॉपर्टी, मान) अपरिवर्तित रहती है।

क्या मुझे version control में फ़ॉर्मैटेड या मिनिफ़ाइड CSS commit करनी चाहिए?

फ़ॉर्मैटेड CSS commit करें। Version control diff लाइन-आधारित होते हैं, इसलिए प्रति पंक्ति एक declaration वाली फ़ॉर्मैटेड CSS स्वच्छ, समीक्षा योग्य diff उत्पन्न करती है। मिनिफ़ाइड CSS एकल-पंक्ति diff बनाती है जिनकी समीक्षा करना असंभव है। मिनिफ़िकेशन को बिल्ड स्टेप के रूप में चलाएँ, स्रोत प्रारूप के रूप में नहीं। PostCSS, cssnano या आपके बंडलर का CSS प्लगइन जैसे टूल प्रोडक्शन मिनिफ़िकेशन स्वचालित रूप से संभालते हैं।

CSS Formatter