CSS বিউটিফিকেশন কীভাবে কাজ করে
বিউটিফায়ার আপনার স্টাইলশিট অক্ষর অক্ষর করে পড়ে, প্রতিটি ব্লক কতটা গভীরে নেস্টেড তা ট্র্যাক করে, এবং সামঞ্জস্যপূর্ণ স্পেসিং দিয়ে পুনরায় নির্গত করে। স্টাইলগুলো কী করে তা কখনও পরিবর্তন হয় না — কেবল ফাইলে সেগুলো কেমন দেখায় তা বদলায়।
- টোকেনাইজ. লাইব্রেরি আপনার ইনপুটকে টোকেনের স্ট্রিমে স্ক্যান করে: সিলেক্টর, প্রপার্টির নাম, মান, at-rules, মন্তব্য এবং ব্রেস, কোলন, সেমিকোলন। স্ট্রিং ও url() মান একক ইউনিট হিসেবে চেনা যায়, তাই content প্রপার্টির ভেতরের ব্রেসকে কখনও ব্লক ডিলিমিটার ভুল করা হয় না।
- নেস্টিং ট্র্যাক করুন. টোকেন স্ট্রিমে চলার সময় বিউটিফায়ার একটি চলমান ইন্ডেন্ট লেভেল রাখে। প্রতিটি ওপেনিং ব্রেস লেভেল গভীর করে — রুল ব্লক, মিডিয়া কুয়েরি বা keyframes ব্লক যাই হোক — এবং প্রতিটি ক্লোজিং ব্রেস তা ফিরিয়ে দেয়। সেই গভীরতা নির্ধারণ করে আপনি ফেরত পাওয়া প্রতিটি লাইনের সামনে কতটি ইন্ডেন্ট ইউনিট থাকবে।
- আপনার অপশন প্রয়োগ করুন. আপনার ইন্ডেন্ট পছন্দ (২ স্পেস, ৪ স্পেস, বা ট্যাব) এক লেভেলের প্রস্থ নির্ধারণ করে। ব্রেস-স্টাইল সেটিং ঠিক করে ওপেনিং ব্রেস সিলেক্টরের সাথে থাকবে নাকি নিজের লাইনে নামবে। বাকি টগলগুলো রুল ব্লকের মাঝে ফাঁকা লাইন যোগ করে এবং h1, h2, h3-এর মতো গ্রুপড সিলেক্টর আলাদা লাইনে বিভক্ত করে।
- পুনর্নির্গমন. অবশেষে ফরম্যাটার নির্ধারিত ইন্ডেন্টেশন ও লাইন ব্রেক দিয়ে টোকেনগুলো ফিরিয়ে প্রিন্ট করে, প্রতি লাইনে একটি ডিক্লারেশন এবং প্রতিটি কোলনের পর একটি স্পেস রেখে। ফলাফল একই স্টাইলশিট, এমনভাবে সাজানো যা একজন মানুষ cascade পড়তে ও স্ক্যান করতে পারে।
CSS বিউটিফাই কেন করবেন
- মিনিফাইড স্টাইলশিট পড়ুন. প্রোডাকশন CSS নিয়মের মাঝে কোনো স্পেস ছাড়া এক লাইনে শিপ হয়। বিউটিফাই করলে লাইন ব্রেক ও ইন্ডেন্টেশন ফিরে আসে যাতে আপনি সোর্স ম্যাপ ছাড়াই লেআউট বাগের পেছনের সিলেক্টর খুঁজে পান।
- অসংগত ফাইল সুসংহত করুন. অনেকে টাচ করা স্টাইলশিট মিশ্র ইন্ডেন্টেশন ও ব্রেস স্টাইলে পরিণত হয়। বিউটিফায়ার থেকে একটি পাস পুরো ফাইলকে একক লেআউটে নরমালাইজ করে, যার ফলে পরের ডিফ হোয়াইটস্পেস নয়েজের পরিবর্তে আসল cascade পরিবর্তন দেখায়।
- এই টুল আপনার পেজকে ভার দেয় না. বেশিরভাগ অনলাইন ফরম্যাটার পেজ খুলতেই তাদের পুরো লাইব্রেরি লোড করে। এই টুল js-beautify কেবল তখনই লেজি-লোড করে যখন আপনি Beautify ক্লিক করেন বা লাইভ মোড চালু করেন, তাই পেজ খুলতে কয়েক শ কিলোবাইটের পরিবর্তে কয়েক কিলোবাইট লাগে এবং প্রাথমিক রেন্ডার দ্রুত থাকে।
- কিছুই আপনার ব্রাউজার ছাড়ে না. বিউটিফায়ার সম্পূর্ণ আপনার ডিভাইসে চলে। আপনার CSS কখনও সার্ভারে আপলোড হয় না, যা গুরুত্বপূর্ণ যখন আপনি যে স্টাইলশিটটি পরীক্ষা করছেন তা কোনো ক্লায়েন্টের, অভ্যন্তরীণ ক্লাসের নাম রয়েছে, বা গোপনীয়তা চুক্তির আওতাভুক্ত।
সাধারণ ব্যবহার
CSS বিউটিফাই করা তখন কাজে আসে যখন কাউকে এমন স্টাইলশিট পড়তে হয় যা পড়ার জন্য লেখা হয়নি।
- প্রোডাকশন ডিবাগিং: Network ট্যাব থেকে টেনে আনা মিনিফাইড স্টাইলশিট পেস্ট করুন এবং সেই নিয়ম খুঁজুন যা আপনার প্রত্যাশিত লেআউট ওভাররাইড করছে।
- কোড রিভিউ প্রস্তুতি: পুল রিকোয়েস্ট খোলার আগে কোনো অবদানকারীর অসংগতভাবে ইন্ডেন্টেড স্টাইলশিট রিফরম্যাট করুন যাতে রিভিউয়াররা হোয়াইটস্পেস পরিবর্তনের পরিবর্তে cascade পরিবর্তন দেখেন।
- শেখা ও নিরীক্ষা: ফ্রেমওয়ার্ক বা কম্পোনেন্ট-লাইব্রেরি স্টাইলশিট প্রসারিত করুন যাতে এর সিলেক্টর, মিডিয়া কুয়েরি ও কাস্টম প্রপার্টির গঠন বোঝা যায়।
একটি কাজের উদাহরণ
একটি মিনিফাইড এক-লাইনার নিন: a{color:red;margin:0}b{padding:0}। ২ স্পেস ইন্ডেন্টেশন ও Collapse ব্রেস স্টাইল দিয়ে উপরে পেস্ট করুন, তারপর Beautify ক্লিক করুন। পাঠযোগ্য ব্লক ফিরে পান: a { নিজের লাইনে, color: red; ও margin: 0; ডিক্লারেশন এক লেভেল গভীরে ইন্ডেন্টেড, ক্লোজিং ব্রেস সিলেক্টরের নিচে এলাইনড, এবং b নিয়ম নিচে। ব্রেস স্টাইল Expand-এ বদলান এবং প্রতিটি ওপেনিং ব্রেস নিজের লাইনে নামে। ইন্ডেন্টেশন Tabs-এ বদলান এবং প্রতিটি লেভেল দুই স্পেস থেকে ট্যাব ক্যারেক্টারে সরে যায়। স্টাইল হুবহু একই; কেবল লেআউট পরিবর্তিত হয়।
FAQ
এটি কি আমার ব্রাউজারে চলে?
হ্যাঁ। js-beautify লাইব্রেরি প্রথমবার Beautify ক্লিক করলে বা লাইভ মোড সক্রিয় করলে লেজি-লোড হয়, তারপর ক্যাশ হয়ে যায়। আপনার CSS পেজ ছেড়ে যায় না — কোনো সার্ভার রাউন্ড-ট্রিপ নেই, কোনো আপলোড নেই।
বিউটিফাই করা কি আন-মিনিফাইয়ের সমান?
এটি পাঠযোগ্য ফরম্যাটিং পুনরুদ্ধার করে — ইন্ডেন্টেশন, লাইন ব্রেক ও স্পেসিং — কিন্তু মিনিফিকেশন যে মন্তব্য স্ট্রিপ করেছে বা ফাইলে কখনও যা ছিল না তা ফিরিয়ে আনতে পারে না। এটি কেবল বিদ্যমান ডিক্লারেশন ও সিলেক্টর রিফরম্যাট করে।
বিউটিফাই করলে কি আমার স্টাইলের রেন্ডারিং বদলে যাবে?
না। বিউটিফিকেশন কেবল হোয়াইটস্পেস ও লাইন ব্রেক যোগ ও বাদ দেয়; cascade অস্পর্শিত থাকে এবং পেজ হুবহু একইভাবে রেন্ডার হয়। প্রপার্টির ক্রম, স্পেসিফিসিটি ও মান সব আপনার লেখার মতোই থাকে।
ব্রেস-স্টাইল অপশনগুলোর অর্থ কী?
Collapse ওপেনিং ব্রেসকে সিলেক্টরের একই লাইনে রাখে (a {), যা সাধারণ CSS কনভেনশন। Expand প্রতিটি ওপেনিং ব্রেসকে সিলেক্টরের নিচে নিজের লাইনে নামায়। ব্ল্যাংক-লাইন ও ওয়ান-সিলেক্টর-পার-লাইন টগল রুল ব্লকের মাঝে স্পেসিং এবং h1, h2, h3-এর মতো গ্রুপড সিলেক্টরের লেআউট নিয়ন্ত্রণ করে।
ব্রাউজার-সাইড CSS বিউটিফিকেশন আপনাকে বিল্ড স্টেপ বা আপলোড ছাড়াই পাঠযোগ্য স্টাইলশিট দেয়। একটি মিনিফাইড বা অগোছালো ফাইল পেস্ট করুন, আপনার ইন্ডেন্টেশন ও ব্রেস স্টাইল বেছে নিন, তারপর ফলাফল কপি বা ডাউনলোড করুন। কিছুই আপনার ডিভাইস ছাড়ে না, কোনো অ্যাকাউন্ট নেই, এবং লাইব্রেরি কেবল তখনই লোড হয় যখন আপনি চান — তাই এই পেজ খুলতে মেগাবাইট নয়, কয়েক কিলোবাইট লাগে।