CSS Minifier — Developer Code Samples

CSS minification removes whitespace, comments, and redundant characters to reduce file size without changing visual output. Python's csscompressor, Node.js's csso or clean-css, and basic regex approaches all achieve significant size reductions.

Try the interactive version online: Open CSS Minifier Tool →

Parameters

Parameter	Type	Required	Description
css	str	Yes	CSS string or file contents to minify
remove_comments	bool	No	Remove all CSS comments (default: True)
collapse_whitespace	bool	No	Collapse multiple spaces/newlines (default: True)

Returns: Minified CSS string with reduced file size

Code Examples

import re

def minify_css(css):
    """
    Minify CSS by removing comments, whitespace, and redundant characters.
    Pure Python, no external dependencies.
    """
    # Remove comments (/* ... */)
    css = re.sub(r'/\*.*?\*/', '', css, flags=re.DOTALL)

    # Remove whitespace around common characters
    css = re.sub(r'\s*([{}:;,>~+])\s*', r'\1', css)

    # Collapse multiple whitespace into single space
    css = re.sub(r'\s+', ' ', css)

    # Remove semicolon before closing brace
    css = re.sub(r';\}', '}', css)

    # Remove leading/trailing whitespace
    css = css.strip()

    return css

# Example usage
sample_css = """
/* Main navigation styles */
.nav {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 16px 24px;
}

.nav-link {
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    margin: 0 8px;
}

.nav-link:hover {
    color: #0066cc;
}
"""

minified = minify_css(sample_css)
print(minified)
# Output: .nav{display:flex;align-items:center;background-color:#ffffff;padding:16px 24px}.nav-link{color:#333333;text-decoration:none;font-size:14px;margin:0 8px}.nav-link:hover{color:#0066cc}

original_size = len(sample_css.encode())
minified_size = len(minified.encode())
print(f"Original: {original_size} bytes | Minified: {minified_size} bytes | Saved: {100*(1 - minified_size/original_size):.1f}%")

// Pure JS CSS minifier (no dependencies)
function minifyCSS(css) {
  return css
    // Remove comments
    .replace(/\/\*[\s\S]*?\*\//g, '')
    // Collapse whitespace
    .replace(/\s+/g, ' ')
    // Remove whitespace around special chars
    .replace(/\s*([{}:;,>~+])\s*/g, '$1')
    // Remove trailing semicolon before }
    .replace(/;}/g, '}')
    .trim();
}

const css = `
  /* Navigation */
  .nav {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 16px 24px;
  }
  .nav-link {
    color: #333333;
    font-size: 14px;
  }
`;

const minified = minifyCSS(css);
console.log(minified);

const savings = (1 - minified.length / css.length) * 100;
console.log(`Saved ${savings.toFixed(1)}%`);

// With csso (npm install csso)
// const csso = require('csso');
// const result = csso.minify(css);
// console.log(result.css);

// With clean-css (npm install clean-css)
// const CleanCSS = require('clean-css');
// const output = new CleanCSS({}).minify(css);
// console.log(output.styles);

# Minify CSS with Node.js clean-css-cli
npm install -g clean-css-cli
cleancss -o output.min.css input.css

# Using csso-cli
npm install -g csso-cli
csso input.css --output output.min.css

# Quick regex minify with sed (basic, not production-ready)
sed 's/\/\*.*\*\///g; s/[[:space:]]\+/ /g; s/ *{ */{/g; s/ *} */}/g; s/ *; */;/g; s/ *: */:/g' input.css > output.min.css

# Python one-liner
python3 -c "
import re, sys
css = sys.stdin.read()
css = re.sub(r'/\\*.*?\\*/', '', css, flags=re.DOTALL)
css = re.sub(r'\\s+', ' ', css)
css = re.sub(r'\\s*([{}:;,])\\s*', r'\\1', css)
print(css.strip())
" < input.css > output.min.css

# Check file sizes
wc -c input.css output.min.css

Other Tool APIs

JSON Formatter Base64 Encode/Decode URL Encode/Decode Lorem Ipsum Generator Word & Character Counter MD5 & SHA Hash Generator

View all API docs →