CSS Minification

<div class="comparison">
  <div class="panel before">
    <h3>Before Minification</h3>
    <div class="code-block">
      <pre>.button {
        padding: 12px 24px;
        background: #3b82f6;
        border-radius: 8px;
        }</pre>
      </div>
      <div class="stats">
        <span class="label">Size:</span>
        <span class="size">1,245 bytes</span>
      </div>
    </div>
    <div class="arrow">→</div>
    <div class="panel after">
      <h3>After Minification</h3>
      <div class="code-block">
        <pre>.button{padding:12px 24px;background:#3b82f6;border-radius:8px}</pre>
      </div>
      <div class="stats success">
        <span class="label">Size:</span>
        <span class="size">687 bytes</span>
        <span class="reduction">(-45%)</span>
      </div>
    </div>
  </div>
  <div class="benefits">
    <h4>What Was Removed:</h4>
    <ul>
      <li>✓ Whitespace and line breaks</li>
      <li>✓ Unnecessary spaces</li>
      <li>✓ Comments</li>
      <li>✓ Redundant semicolons</li>
    </ul>
  </div>

<div class="techniques">
  <div class="technique">
    <h3>1. Remove Whitespace</h3>
    <div class="example">
      <div class="before-code">
        /* Before */
        .box {
        margin: 10px;
        padding: 20px;
        }
      </div>
      <div class="after-code">
        /* After */
        .box{margin:10px;padding:20px}
      </div>
    </div>
  </div>
  <div class="technique">
    <h3>2. Shorten Colors</h3>
    <div class="example">
      <div class="before-code">
        color: #ffffff;
        background: #000000;
      </div>
      <div class="after-code">
        color:#fff;
        background:#000
      </div>
    </div>
  </div>
  <div class="technique">
    <h3>3. Merge Properties</h3>
    <div class="example">
      <div class="before-code">
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
      </div>
      <div class="after-code">
        margin:10px
      </div>
    </div>
  </div>
  <div class="technique">
    <h3>4. Remove Zero Units</h3>
    <div class="example">
      <div class="before-code">
        padding: 0px;
        margin: 0em;
      </div>
      <div class="after-code">
        padding:0;
        margin:0
      </div>
    </div>
  </div>
</div>

<!-- package.json -->
<div class="setup-guide">
  <h3>Install Minifier</h3>
  <div class="command">
    npm install --save-dev cssnano postcss
  </div>
  <h3>Configure PostCSS</h3>
  <div class="config-file">
    <strong>postcss.config.js:</strong>
    <pre>module.exports = {
      plugins: [
      require('cssnano')({
      preset: 'default'
      })
      ]
      }</pre>
    </div>
    <h3>Build Command</h3>
    <div class="command">
      npm run build
    </div>
    <div class="result">
      ✅ CSS automatically minified in production!
    </div>
  </div>