Webacus (logo)
Watch Video

Minify CSS

Minifying CSS is the process of removing unnecessary whitespace, comments, and other extraneous characters from CSS files. This reduces the overall file size, which helps improve website performance by decreasing the amount of data that needs to be transferred to the user's browser.

Using tools like Clean-css, developers can automate the optimization of their CSS code. This not only speeds up page load times but also contributes to better user experience and improved search engine rankings. Clean-css is a fast and efficient CSS optimizer. 1

Here's a clearer explanation of the parameters for the CSS minification tool:

Optimization Levels

These options control how aggressively the tool optimizes your CSS code to reduce file size.

  • Level 0: No optimizations. Choose this if you only want to inline @import rules or rebase URLs (adjust paths to assets) but skip any other code changes.
  • Level 1: Basic optimizations. This level applies optimizations to individual CSS properties. For example, it can remove unnecessary units (like 0px), convert RGB color codes to shorter hexadecimal representations (e.g., rgb(0,0,0) to #000), and remove comments from your code.
  • Level 2: Advanced optimizations. This level performs more comprehensive optimizations by looking at entire CSS rules or multiple properties. It can remove duplicate rules, eliminate properties that are redefined later in the stylesheet, and even restructure rules to improve efficiency.

Formatting Options

These options determine the readability of the minified CSS output.

  • Beautify: Formats the output in a highly readable way, making it easy to understand and debug.
  • Keep breaks: Adds line breaks to the output, improving readability without full beautification.
  • No breaks: Produces the most compact output possible by removing all line breaks. This is ideal for production environments where file size is critical.

Inline @import Rules

This setting controls how the tool handles @import statements in your CSS.

  • None: The tool will not process or inline any @import rules.
  • All: The tool will find all @import rules and embed the content of those imported stylesheets directly into your main CSS file. This can reduce the number of HTTP requests your website makes.

Source:
[1] www.npmjs.com/package/clean-css