CSS beautification کیسے کام کرتی ہے؟
بیوٹیفائر آپ کی stylesheet کو کردار بہ کردار پڑھتا ہے، ہر block کی nesting depth کو track کرتا ہے، اور اسے یکساں spacing کے ساتھ دوبارہ emit کرتا ہے۔ یہ کبھی نہیں بدلتا کہ styles کیا کرتے ہیں — صرف یہ کہ وہ فائل میں کیسے نظر آتے ہیں۔
- ٹوکنائز کرنا. لائبریری آپ کے 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 پر چلتا ہے، یہ ایک چلتا ہوا indent level رکھتا ہے۔ ہر کھلتا brace level کو گہرا کرتا ہے، چاہے وہ rule block، media query یا keyframes block کا ہو، اور ہر بند ہونے والا اسے واپس لاتا ہے۔ وہ depth طے کرتی ہے کہ آپ کو واپس ملنے والی ہر لائن کے سامنے کتنے indent units ہوں گے۔
- آپ کے options لاگو کرنا. آپ کا indent choice (2 spaces، 4 spaces، یا ایک tab) ایک level کی چوڑائی طے کرتا ہے۔ brace-style setting یہ فیصلہ کرتی ہے کہ opening brace اپنے سے پہلے selector سے چمٹی رہے یا اپنی لائن پر چلی جائے۔ باقی toggles قواعد کے درمیان blank line شامل کرتے ہیں اور grouped selectors کو الگ لائنوں پر تقسیم کرتے ہیں۔
- دوبارہ خارج کرنا. آخر میں formatter tokens کو indentation اور line breaks کے ساتھ واپس print کرتا ہے، ہر declaration کو اپنی لائن پر اور ہر colon کے بعد ایک space کے ساتھ رکھتا ہے۔ نتیجہ وہی stylesheet ہے، اس طرح ترتیب دی گئی کہ انسان cascade دیکھ سکے۔
CSS بیوٹیفائی کیوں کریں؟
- منی فائڈ stylesheets پڑھنا. Production CSS ایک لائن پر قواعد کے درمیان بغیر spacing کے ship ہوتا ہے۔ Beautifying line breaks اور indentation واپس لاتا ہے تاکہ آپ layout bug کے پیچھے selector تلاش کر سکیں اور دیکھ سکیں کہ وہ بالکل کون سے declarations سیٹ کرتا ہے، source map کے بغیر بھی۔
- بے ترتیب فائلیں ٹھیک کرنا. جس stylesheet کو کئی لوگوں نے touch کیا ہو وہ mixed indentation اور brace styles میں بدل جاتی ہے۔ بیوٹیفائر سے ایک بار گزارنے سے پوری فائل ایک layout میں normalize ہو جاتی ہے، جس سے اگلا diff cascade کی اصل تبدیلیاں دکھاتا ہے نہ کہ whitespace noise۔
- یہ ٹول آپ کے صفحے پر بوجھ نہیں ڈالتا. زیادہ تر آن لائن formatters صفحہ کھلتے ہی اپنی پوری لائبریری لوڈ کرتے ہیں۔ یہ ٹول js-beautify کو صرف اسی وقت lazy-load کرتا ہے جب آپ Beautify کلک کریں یا Live mode آن کریں، اس لیے صفحہ کھولنا چند kilobytes خرچ کرتا ہے نہ کہ چند سو، اور initial render تیز رہتا ہے۔
- کچھ بھی آپ کے براؤزر سے نہیں جاتا. بیوٹیفائر مکمل طور پر آپ کے device پر چلتا ہے۔ آپ کی CSS کبھی server پر upload نہیں ہوتی، جو اہم ہے جب آپ جو stylesheet inspect کر رہے ہیں وہ کسی client کی ہو، internal class names رکھتی ہو، یا confidentiality agreement کے تحت ہو۔
عام استعمالات
CSS beautifying اس وقت سامنے آتا ہے جب کسی کو ایسی stylesheet پڑھنی ہو جو پڑھنے کے لیے نہیں لکھی گئی تھی۔
- Production debugging: Network tab سے کھینچی ہوئی منی فائڈ stylesheet paste کریں تاکہ وہ rule ملے جو آپ کے متوقع layout کو override کر رہا ہے۔
- Code review prep: کسی contributor کی بے ترتیب-indented stylesheet pull request کھولنے سے پہلے reformat کریں تاکہ reviewers cascade کی تبدیلیاں دیکھیں، layout churn نہیں۔
- سیکھنا اور آڈٹ کرنا: کوئی framework یا component-library stylesheet expand کریں تاکہ یہ مطالعہ کریں کہ اس کے selectors، media queries اور custom properties کس طرح structured ہیں۔
ایک عملی مثال
ایک منی فائڈ one-liner لیں: a{color:red;margin:0}b{padding:0}۔ اسے اوپر indentation 2 spaces اور brace style Collapse پر paste کریں، پھر Beautify کلک کریں۔ آپ کو readable blocks ملتے ہیں: a { اپنی لائن پر، color: red; اور margin: 0; declarations ہر ایک ایک level گہرے indented، closing brace selector کے نیچے صف بند، اور b rule نیچے آتا ہے۔ brace style کو Expand میں بدلیں اور ہر opening brace اپنی لائن پر آ جاتی ہے۔ indentation کو Tabs میں بدلیں اور ہر level دو spaces سے tab character میں shift ہو جاتا ہے۔ styles یکساں ہیں؛ صرف layout بدلتا ہے۔
FAQ
کیا یہ میرے براؤزر میں چلتا ہے؟
جی ہاں۔ js-beautify لائبریری پہلی بار lazy-load ہوتی ہے جب آپ Beautify کلک کریں یا Live mode فعال کریں، پھر cached ہو جاتی ہے۔ آپ کا CSS صفحہ کبھی نہیں چھوڑتا — کوئی server round-trip نہیں اور کوئی upload نہیں۔
کیا beautifying اور un-minifying ایک ہی ہے؟
یہ readable formatting واپس لاتا ہے — indentation، line breaks، اور spacing — لیکن یہ وہ comments واپس نہیں لا سکتا جو minification نے ہٹائے یا کوئی ایسی structure جو فائل میں کبھی تھی ہی نہیں۔ یہ صرف موجود declarations اور selectors کو reformat کرتا ہے۔
کیا beautifying میرے styles کے render ہونے کا طریقہ بدل دیتا ہے؟
نہیں۔ Beautification صرف whitespace اور line breaks شامل اور ہٹاتا ہے؛ cascade بے دست و پا رہتی ہے اور صفحہ یکساں render ہوتا ہے۔ Property order، specificity اور values بالکل ویسے رہتے ہیں جیسے آپ نے لکھے تھے۔
brace-style options کا کیا مطلب ہے؟
Collapse opening brace کو selector کی اسی لائن پر رکھتا ہے (a {)، جو CSS کا عام convention ہے۔ Expand ہر opening brace کو اپنی لائن پر selector کے نیچے لے جاتا ہے۔ blank-line اور one-selector-per-line toggles قواعد کے درمیان spacing اور h1, h2, h3 جیسے grouped selectors کی layout کو کنٹرول کرتے ہیں۔
Browser-side CSS beautification آپ کو بغیر build step یا upload کے readable stylesheet دیتا ہے۔ کوئی منی فائڈ یا بے ترتیب فائل paste کریں، اپنی indentation اور brace style چنیں، پھر نتیجہ کاپی یا ڈاؤن لوڈ کریں۔ کچھ بھی آپ کے device سے نہیں جاتا، کوئی account نہیں، اور لائبریری صرف اسی وقت لوڈ ہوتی ہے جب آپ مانگیں — اس لیے یہ صفحہ کھولنے پر چند kilobytes خرچ ہوتے ہیں، megabyte نہیں۔