CSS Compressor

CSS Minify Online

Minifying CSS takes the beautified, well formed CSS code that you have written and removes the spacing, indentation, newlines, and comments, making the CSS code more difficult to read, and save code size.

CSS Compressor Example

Before:

/* Layout helpers
----------------------------------*/

.ui-helper {
	background-color: red;
}
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	width: 1px;
}

After (Default):

.ui-helper{background-color:red}.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;width:1px}

After (With Line Breaks):

.ui-helper{background-color:red}
.ui-helper-hidden{display:none}
.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;width:1px}

Why use CSS Minifier?

CSS Minification is usefull for multiple reasons, here are some:

Increase website speed

This CSS Compressor tool can make a script up to 50% smaller, resulting in a faster download time.

Organize your code

I really like this one (Hi, I'm Mauri, creator of this css compressor tool), and I really like the way I can see and navigate the css code on my projects.

I always use this css minifier online tool with "line breaks" options enable, so I can have the css code separate and grouped by components, helpers or web sections.

Obfuscate CSS code

Some developers will use it to 'obfuscate' their css code. This makes it difficult for the css code to be read, thereby making it more difficult to reverse engineer or copy.

Anyway, you can use this Unminify CSS tool to revert the css compression.