একই স্টাইলশিটের উপর দুটি বিপরীত কাজ। মিনিফাই সরায় সেটাই যা কেবল মানুষের দরকার — মন্তব্য আর ইনডেন্ট। বিউটিফাই সেগুলো ফিরিয়ে দেয়, যাতে হাতে পাওয়া ফাইলটি আবার পড়া যায়। দুটোই আপনার দেওয়া লেখার উপর কাজ করে, আর কোনোটিই CSS-এর অর্থ ছোঁয় না।

কীভাবে ব্যবহার করবেন

1. 1 CSS পেস্ট করুন — পুরো ফাইল বা একটিমাত্র নিয়ম।
2. 2 চাপতে মিনিফাই, আর ইনডেন্টসহ খুলতে সাজান চাপুন।
3. 3 বাইট সংখ্যা দেখে নিয়ে ফলাফল কপি করুন।

সিলেক্টরের স্পেস সাজসজ্জা নয়

".a .b" বেছে নেয় কোনো .a-এর ভেতরের .b; ".a.b" বেছে নেয় সেই একটিমাত্র উপাদান যার দুটো ক্লাসই আছে। এগুলো আলাদা সিলেক্টর, আর স্পেসকে বাড়তি ভাবা মিনিফায়ার নীরবে ভুল উপাদান রাঙিয়ে দেয়। এখানে সিলেক্টরের দুই অংশের মাঝের স্পেস সবসময় টিকে থাকে; কেবল > আর + এর মতো কম্বিনেটরের আশপাশেরটা যায়।

calc()-এর স্পেস দরকার

"calc(100% - 10px)"-এ বিয়োগ চিহ্নের দুপাশের স্পেস ব্যাকরণেরই দাবি: সেগুলো না থাকলে ব্রাউজার "-10px"-কে ঋণাত্মক দৈর্ঘ্য পড়ে, রাশিটি অবৈধ হয়ে যায় আর গোটা ঘোষণাই বাতিল হয়। কেউ সতর্ক করে না — লেআউট শুধু ভুল হয়ে দাঁড়ায়। এই টুল বন্ধনীর ভেতরের ফাঁক কখনও সরায় না।

লাইসেন্স মন্তব্য থেকে যায়

/*! দিয়ে শুরু হওয়া মন্তব্যে কপিরাইট বা লাইসেন্সের ঘোষণা থাকে, আর রীতি অনুযায়ী প্রতিটি মিনিফায়ার সেটি রাখে। ওটি মুছে ফেলা মানে কোনো লাইব্রেরি যে স্বীকৃতিটি সঙ্গে পাঠাতে বলেছে তা সরিয়ে দেওয়া। সাধারণ /* মন্তব্য আপনার আর আপনার দলের জন্য, তাই সেগুলো যায়।

CSS মিনিফাই gzip-এর মতো লাভ দেয় না

সার্ভার এমনিতেই বেরোনোর সময় স্টাইলশিট চেপে পাঠায়, আর পুনরাবৃত্ত ফাঁকা জায়গায় gzip দারুণ — তাই তার উপরে মিনিফাই করলে সাধারণত কয়েক শতাংশ বাঁচে, অর্ধেক নয়। এটি করুন কারণ ওই ফাইলটিই লাইভে যায় আর আপনি সেটিকে ছোট ও স্থিতিশীল চান, এই আশায় নয় যে পাতা লক্ষণীয়ভাবে দ্রুত হবে।