CSS Cleaner - Free Online Beautifyer and Compressor

CSS cleaner, beautifier, formatter, organizer or call it whatewer you like, is a free online code optimizer that helps you clean up easily your messy style sheet files for websites. There's no need to download or install any program because it runs in a web browser. Whether your code is obfuscated, minified or just simply messy this tool will help you bring it to an organized, readable format.

How To Use?

Take the code you want to work with and paste it in the editor. Click the Clean CSS button to organize the lines and text indentation and optionally apply additional cleaning features selecting the desired point in the attached list.

Features

CSS compressor

Reduce the size of the CSS file by removing unnecessary new lines and white space characters to assure a smaller file size and faster loating time. However a minimized code is barely readable for humans, this operation is definitely beneficial for your website performance and search engines will appreciate it. You can use this online tool later to "unpack" the minified document.

Use numeric font-weight properties

Using normal and bold is not the only way to define the thickness of the character. Numeric font weights provide more than just these two options where you can define a wole range from 100 to 900. Of course the font in use has to support the value you specify. The numeric value of normal is 400 and 700 defines bold. Go to Google Fonts to select a font family that supports the desired thickness.

Color names to hex codes

This CSS cleaning option allows you to convert all occurences of color definitions to the corresponding RGB hex codes. Beside the 17 standard colors (white, blue, yellow, maroon), there is a total of 148 predefined color names that most modern web browsers recognize, such as royalblue, saddlebrown, lightgoldenrodyellow etc. Using hexadecimal code instead of the color name you assure that your website will render correctly and the same on all browsers. Our test proves that hexadecimal definitions render faster since the names are assigned to a look-up table and converted to hex codes anyway.

Remove comments

The /* ... */ syntax is used for both single and multiline comments, allowing you to add notes to your document. Comments can take up unnecessary space in the file increasing download and render time and this is why it's recommended to remove them once the website goes live. Getting rid of comments is an essential step of compressing/minimizing CSS files.

Adjust !important

!important was introduced to help override normal specificity. Experienced developers try to avoid it because its usage might complicate further changes to the document. Using important usually means you're narcissistic, selfish or just lazy because usually there's another more elegant way.

This CSS beautify option adjusts the rules, setting it to all lowercase and leaving one space before the exclamation mark.

Set one space after colons

This CSS tidy option unifies all colons, leaving one space after each. It leaves double :: unchanged for example ::before.

Last semicolon in block

The last semicolon before the closing brace in a block is unnecessary and can be removed before a project goes live, saving some space.

Remove @media blocks

Deleting the conditional media queries in a document is not a standard CSS cleaning feature because it affects the website. With this feature you can choose to make a site unresponsive with a single click.

Delete unnecessary white characters

Successive white characters have no effect or use, they just fill the document, increasing the file size. Empty new lines or text indentation with repetitive spaces can be removed before publishing.