Skip to main content

​
CSS Beautify/Minify

Format or minify CSS stylesheets. Beautify adds indentation and line breaks; minify removes comments and whitespace.

​
Overview

The CSS Beautify/Minify tool supports:
  • Beautify — Indents rules, properties, and selectors with 2 spaces
  • Minify — Removes comments, collapses whitespace, and strips unnecessary characters
Works with vanilla CSS, nested media queries, and at-rules.

​
Use Cases

Code formatting

Standardize CSS indentation for readability and team consistency

File size reduction

Minify CSS for production to reduce bandwidth and load time

Debugging

Beautify minified CSS from third-party libraries or CDNs

Version control

Format CSS before commits to improve diffs

​
Actions

Indents rules and properties with 2 spaces per level.Input:
body{margin:0;padding:0;}h1{color:#333;}
Output:
body {
  margin: 0;
  padding: 0;
}
h1 {
  color: #333;
}

​
Implementation Details

​
Beautify Algorithm

  1. Normalize braces and semicolons to create line breaks
  2. Split by newlines and track indentation depth
  3. Increase indent after {, decrease before }
  4. Join with proper indentation (2 spaces per level)
Source: lib/tools/engine.ts:233-260
Key logic
function beautifyCss(css: string): string {
  const result: string[] = [];
  let indent = 0;

  const normalized = css
    .replace(/\s*\{\s*/g, ' {\n')
    .replace(/\s*\}\s*/g, '\n}\n')
    .replace(/;\s*/g, ';\n')
    .replace(/\n{2,}/g, '\n');

  for (const line of normalized.split('\n')) {
    const trimmed = line.trim();
    if (!trimmed) continue;

    if (trimmed === '}') {
      indent = Math.max(0, indent - 1);
      result.push('  '.repeat(indent) + trimmed);
    } else if (trimmed.endsWith('{')) {
      result.push('  '.repeat(indent) + trimmed);
      indent++;
    } else {
      result.push('  '.repeat(indent) + trimmed);
    }
  }
  return result.join('\n');
}

​
Minify Algorithm

  1. Remove CSS comments (/* ... */)
  2. Collapse consecutive whitespace to single spaces
  3. Strip spaces around syntax characters ({, }, :, ;, ,)
  4. Remove trailing semicolons before }
Source: lib/tools/engine.ts:262-270
Key logic
function minifyCss(css: string): string {
  return css
    .replace(/\/\*[\s\S]*?\*\//g, '')   // Remove comments
    .replace(/\s+/g, ' ')               // Collapse whitespace
    .replace(/\s*([{}:;,])\s*/g, '$1')  // Remove space around syntax chars
    .replace(/;}/g, '}')                // Remove last semicolon before }
    .trim();
}
The beautifier uses basic regex-based parsing. Complex scenarios (nested at-rules, vendor prefixes, or CSS-in-JS) may not format optimally.

​
Keyboard Shortcuts

  • Cmd/Ctrl+Enter — Beautify (default)
  • Cmd/Ctrl+Shift+C — Copy output
  • Cmd/Ctrl+Shift+S — Download output

SCSS Beautify/Minify

Format or minify SCSS (Sass) stylesheets

LESS Beautify/Minify

Format or minify LESS stylesheets

HTML Beautify/Minify

Format or minify HTML markup

Build docs developers (and LLMs) love

Get started for freeTalk to us