CSS Minifier

यह किसके लिए है?

CSS जो source में पढ़ने योग्य होता है — comments, indentation और meaningful whitespace के साथ — आपके users द्वारा डाउनलोड की जाने वाली file को फुला देता है। एक structural minifier सभी cosmetic bytes (comments, whitespace के runs, redundant zeros, equivalent छोटे hex codes) को rules का अर्थ बदले बिना हटा देता है। यह tool वह pass आपके browser में चलाता है और साइज़ पहले/बाद में दिखाता है ताकि आप बचत देख सकें।

कब इस्तेमाल करें

• HTML email या blog post template में एक CSS snippet को एक बार inline ship करते समय, जहां आप bytes कम करना चाहते हैं लेकिन build chain नहीं है।
• यह तय करने से पहले कि क्या वास्तविक optimiser को जोड़ने लायक है, एक stylesheet में कितना "fat" है इसकी जल्दी जांच करना।
• third-party widget में शामिल करने के लिए vendor की pretty-printed CSS को slim करने हेतु paste करना।

यह क्या करता है

• Block comments (/* … */) हटाता है — single-line // वैसे भी valid plain CSS नहीं है।
• { } : ; , और combinators (> ~ +) के आसपास whitespace को संक्षिप्त करता है।
• } से पहले trailing semicolons को drop करता है।
• Leading zeros को trim करता है (0.5 → .5) और zero से units हटा देता है (0px → 0)।
• जहां सटीक हो वहां hex colours को छोटा करता है (#aabbcc → #abc)।

आम गलतियाँ

• यह एक structural minify है, full optimiser नहीं। यह duplicate selectors को merge नहीं करेगा, rules को reorder नहीं करेगा, या shorthand को rewrite नहीं करेगा। उसके लिए अपनी build pipeline में cssnano या esbuild चलाएं।
• Source maps generate नहीं होते। यदि आप production में minified CSS को debug करते हैं, तो उन्हें अलग से ship करें।
• commit की गई CSS को minify न करें। Pretty source commit करें; build/deploy पर minify करें। दोनों को mix करने से diff review कष्टदायक हो जाता है।
• Modern compression प्रमुख है। wire पर Brotli/gzip वही करता है जो minification करता है का बहुत कुछ। सबसे बड़ी बचत unused rules को हटाने से आती है — यह tree-shaking का काम है, minification का नहीं।