Utilities Batch Processing 2026-04-10

Batch CSS Minification

Minify hundreds of CSS files using CLI tools, Python scripts, and Node.js build pipelines. Reduce file sizes by 20-40% for faster page loads.

Tools used: CSS Minifier All Free

The Problem

Your project has dozens of CSS files across themes, components, and vendor libraries. Minifying them one by one in a web tool is tedious and error-prone. You need a repeatable build step that minifies everything automatically.

Why Batch Processing Matters

Batch CSS minification is essential for production build pipelines, reducing total CSS payload by 20-40%, improving Core Web Vitals (LCP, FCP), and creating reproducible builds. Manual minification doesn't scale and is easily forgotten during deployment.

Common Use Cases

Minify all CSS files in a project before production deployment
Add a CSS minification step to CI/CD pipelines (GitHub Actions, GitLab CI)
Process vendor CSS libraries that ship unminified
Compare original vs. minified sizes across an entire theme directory
Create both .css and .min.css versions for development vs. production

Step-by-Step Instructions

Inventory your CSS files

List all CSS files and their sizes: find . -name '*.css' ! -name '*.min.css' -exec ls -lh {} \;. Exclude already-minified files to avoid double-processing.

Choose a minification tool

For quick one-offs, use the CSS Minifier web tool. For batch operations, use csso (Node.js), cssmin (Python), or clean-css from the CLI.

Run batch minification

Use the scripts below to process all CSS files. Each script creates .min.css versions alongside the originals, preserving the source files for debugging.

Verify and measure savings

Compare total file sizes before and after: du -sh css/ css-min/. Visually check a few pages to ensure styles render correctly. Run your CSS through a validator if you see rendering issues.

Code Examples

# Install csso-cli globally
npm install -g csso-cli

# Minify all CSS files, creating .min.css versions
find . -name '*.css' ! -name '*.min.css' | while read f; do
  csso "$f" -o "${f%.css}.min.css"
  orig=$(wc -c < "$f")
  mini=$(wc -c < "${f%.css}.min.css")
  echo "$f: $orig → $mini bytes ($(( (orig-mini)*100/orig ))% saved)"
done

# Alternative: use clean-css-cli
npm install -g clean-css-cli
find . -name '*.css' ! -name '*.min.css' -exec sh -c \
  'cleancss -o "${1%.css}.min.css" "$1"' _ {} \;

import re
from pathlib import Path

def minify_css(css: str) -> str:
    """Simple CSS minifier — removes comments, whitespace, trailing semicolons."""
    css = re.sub(r'/\*[\s\S]*?\*/', '', css)  # Remove comments
    css = re.sub(r'\s+', ' ', css)              # Collapse whitespace
    css = re.sub(r'\s*([{}:;,>~+])\s*', r'\1', css)  # Remove space around symbols
    css = re.sub(r';}', '}', css)               # Remove trailing semicolons
    return css.strip()

input_dir = Path("./css")
output_dir = Path("./css-min")
output_dir.mkdir(exist_ok=True)
total_saved = 0

for css_file in input_dir.glob("*.css"):
    if css_file.stem.endswith(".min"):
        continue
    original = css_file.read_text()
    minified = minify_css(original)
    out_path = output_dir / f"{css_file.stem}.min.css"
    out_path.write_text(minified)
    saved = len(original) - len(minified)
    total_saved += saved
    pct = (saved / len(original) * 100) if original else 0
    print(f"{css_file.name}: {len(original):,} → {len(minified):,} bytes ({pct:.0f}% saved)")

print(f"\nTotal saved: {total_saved:,} bytes")

const fs = require('fs');
const path = require('path');
const CleanCSS = require('clean-css');  // npm install clean-css

const inputDir = './css';
const outputDir = './css-min';
fs.mkdirSync(outputDir, { recursive: true });

const minifier = new CleanCSS({ level: 2 });
let totalSaved = 0;

fs.readdirSync(inputDir)
  .filter(f => f.endsWith('.css') && !f.endsWith('.min.css'))
  .forEach(file => {
    const input = fs.readFileSync(path.join(inputDir, file), 'utf8');
    const output = minifier.minify(input);
    const outName = file.replace('.css', '.min.css');
    fs.writeFileSync(path.join(outputDir, outName), output.styles);
    const saved = input.length - output.styles.length;
    totalSaved += saved;
    const pct = ((saved / input.length) * 100).toFixed(0);
    console.log(`${file}: ${input.length} → ${output.styles.length} bytes (${pct}% saved)`);
  });

console.log(`\nTotal saved: ${totalSaved.toLocaleString()} bytes`);

Single vs Batch Comparison

Single file (web tool)

Paste CSS → click Minify → copy compressed output

Batch output (CLI)

$ find ./css -name '*.css' ! -name '*.min.css' | wc -l
34

$ python batch_minify.py
theme.css: 45,230 → 31,661 bytes (30% saved)
components.css: 23,100 → 16,170 bytes (30% saved)
vendor.css: 89,500 → 58,175 bytes (35% saved)
...

Total saved: 142,580 bytes

Frequently Asked Questions

Will minification break my CSS?

Standard minification (removing whitespace and comments) is safe. Aggressive optimizations like shorthand merging can occasionally cause issues — always test visually. Use level: 1 in clean-css for safe minification, level: 2 for aggressive.

Should I minify vendor CSS like Bootstrap?

Most vendor libraries ship with .min.css versions already. Only minify if you're using the unminified source. Check for an existing .min.css before processing.

How much space does CSS minification typically save?

Expect 20-40% reduction in file size. Well-commented, neatly formatted CSS saves more. Already compact CSS may only shrink by 10-15%. Combined with gzip/brotli compression, total transfer size drops by 70-85%.

Related Batch Guides

📋

Each tool runs in your browser with no signup required. Process single items instantly.

Open CSS Minifier

← All Batch Guides All Developer Guides