CSS Beautifier

Reformat and re-indent CSS and SCSS using css_beautify.

The CSS beautifier reformats and re-indents CSS source code. It expands compressed stylesheets into readable, consistently indented output.

The Python cssbeautifier package is a separate install from the JavaScript beautifier. Install it with pip install cssbeautifier. The Node.js js-beautify package includes the CSS beautifier.

Before and after

before.css

body{margin:0;padding:0;font-family:sans-serif;background:#fff}.container{max-width:1200px;margin:0 auto;padding:0 20px}.btn,.btn-primary{display:inline-block;padding:8px 16px;border-radius:4px;cursor:pointer}.btn-primary{background:#007bff;color:#fff;border:none}

Key options

brace_style

Controls brace placement. Only collapse and expand are implemented for CSS.

Value	Description
collapse	Opening brace on same line as selector (default)
expand	Opening brace on its own line

collapse (default)

.selector {
    color: red;
    font-size: 14px;
}

expand

.selector
{
    color: red;
    font-size: 14px;
}

selector_separator_newline

When true (default), places each selector in a multi-selector rule on its own line.

selector_separator_newline: true (default)

h1,
h2,
h3 {
    font-weight: bold;
}

selector_separator_newline: false

h1, h2, h3 {
    font-weight: bold;
}

newline_between_rules

When true (default), adds a blank line between CSS rule blocks.

newline_between_rules: true (default)

.foo {
    color: red;
}

.bar {
    color: blue;
}

newline_between_rules: false

.foo {
    color: red;
}
.bar {
    color: blue;
}

indent_size and indent_char

indent_size sets the number of characters per indentation level. indent_char sets the character used for indentation. Use indent_with_tabs: true to indent with tabs instead.

const beautify_css = require('js-beautify').css;

// 2-space indentation
beautify_css(source, { indent_size: 2, indent_char: ' ' });

// Tab indentation
beautify_css(source, { indent_with_tabs: true });

Result with indent_size: 2:

.container {
  display: flex;
  align-items: center;

  .inner {
    padding: 1rem;
  }
}

All CSS-specific options at a glance

brace_style

Default: "collapse"
Values: collapse, expand

Controls placement of opening braces relative to selectors.

selector_separator_newline

Default: true

Place each selector in a multi-selector rule on its own line.

newline_between_rules

Default: true

Insert a blank line between CSS rule blocks.

space_around_combinator

Default: false

Add spaces around CSS combinators such as >, ~, and +.

indent_size

Default: 4

Number of characters per indentation level.

indent_char

Default: " " (space)

Character used for indentation.

indent_with_tabs

Default: false

Indent with tabs. Overrides indent_size and indent_char.

end_with_newline

Default: false

End output with a trailing newline.

indent_empty_lines

Default: false

Keep indentation on otherwise empty lines.

Usage

Node.js

const beautify_css = require('js-beautify').css;

const ugly = 'body{margin:0;padding:0}.btn{display:inline-block}';
const pretty = beautify_css(ugly, {
    indent_size: 2,
    selector_separator_newline: true,
    newline_between_rules: true
});

console.log(pretty);

CLI

css-beautify --indent-size 2 style.css

# or via js-beautify with --css flag
js-beautify --css --indent-size 2 style.css

Python

pip install cssbeautifier

import cssbeautifier

opts = cssbeautifier.default_options()
opts.indent_size = 2
result = cssbeautifier.beautify('body{margin:0}', opts)