CSS Minifier API: The Complete Guide

Need to optimize your CSS for production? This guide covers everything you need to know about CSS minification via API, including compression techniques, size reduction benefits, and implementation examples in multiple languages.

What is CSS Minification?

CSS minification is the process of removing unnecessary characters from CSS code without changing its functionality. This includes removing whitespace, comments, and unnecessary semicolons, as well as shortening color values and property names.

Minified CSS like .btn{color:#fff;background:#007bff;padding:10px 20px} is much smaller than the formatted version while functioning identically.

Why Minify CSS?

CSS minification provides several important benefits:

• Faster Load Times: Smaller files download faster
• Reduced Bandwidth: Lower data transfer costs
• Better Performance: Improved Core Web Vitals scores
• SEO Benefits: Page speed is a ranking factor

Using the CSS Minifier API

TinyFn provides a simple endpoint to minify CSS code:

POST https://api.tinyfn.io/v1/minify/css
Headers: X-API-Key: your-api-key
Content-Type: application/json

{
  "css": ".button {\n  color: #ffffff;\n  background-color: #007bff;\n}"
}

{
  "minified": ".button{color:#fff;background-color:#007bff}",
  "original_size": 62,
  "minified_size": 43,
  "compression_ratio": "30.6%"
}

Parameters

Code Examples

JavaScript / Node.js

const response = await fetch('https://api.tinyfn.io/v1/minify/css', {
  method: 'POST',
  headers: {
    'X-API-Key': 'your-api-key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    css: '.container { margin: 0 auto; max-width: 1200px; }'
  })
});
const { minified, compression_ratio } = await response.json();
console.log(`Compressed by ${compression_ratio}`);

Python

import requests

css_code = """
.header {
  background-color: #333333;
  padding: 20px;
}
"""

response = requests.post(
    'https://api.tinyfn.io/v1/minify/css',
    json={'css': css_code},
    headers={'X-API-Key': 'your-api-key'}
)
data = response.json()
print(f"Minified: {data['minified']}")

cURL

curl -X POST "https://api.tinyfn.io/v1/minify/css" \
  -H "X-API-Key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{"css": ".btn { color: white; }"}'

Optimization Techniques

• Whitespace Removal: Remove spaces, tabs, and newlines
• Comment Removal: Strip all CSS comments
• Color Shortening: Convert #ffffff to #fff
• Zero Unit Removal: Convert 0px to 0
• Property Merging: Combine duplicate selectors
• Shorthand Properties: Use margin: 10px instead of four properties

Best Practices

1. Minify for production only: Keep source files readable for development
2. Use source maps: Enable debugging of minified CSS in production
3. Automate in build: Integrate minification into your build process
4. Test thoroughly: Verify minified CSS works correctly