Minifying CSS means removing unnecessary characters like whitespace, comments, and line breaks without changing functionality, resulting in smaller file sizes and faster page load times. 1. For quick, one-time minification, use online tools such as cssminifier.com, Clean CSS, or Toptal CSS Minifier by pasting your code, clicking “Minify,” and copying the output—this is beginner-friendly but not ideal for large projects or sensitive code. 2. For developers, automate the process using build tools: Option A—Use PostCSS with cssnano by installing Node.js and the required packages, creating a configuration file, adding a script to package.json, and running it to generate a minified file, which integrates well with modern frameworks. Option B—Use Webpack with the css-minimizer-webpack-plugin by installing the plugin, updating the Webpack configuration, and running Webpack in production mode to automatically minify CSS. 3. Use task runners like Gulp by installing gulp-cssnano and gulp-rename, setting up a gulpfile.js to define the minification task, and running it to process and save the compressed file, suitable for legacy workflows. 4. Use server-side or CMS tools: In WordPress, plugins like Autoptimize or WP Rocket handle CSS minification automatically; static site generators like Jekyll or Hugo support built-in or plugin-based minification; CDNs such as Cloudflare or Netlify often provide automatic minification features. A minified CSS example removes all extra spaces and comments, turning .header { padding: 20px; color: #333; font-size: 16px; } / This is a comment / into .header{padding:20px;color:#333;font-size:16px}, delivering the same styles in a smaller file. Minifying CSS improves performance, especially on mobile or slow connections, and should be automated in production environments using the appropriate toolset based on the project’s tech stack.

Minifying CSS means removing all unnecessary characters from your CSS code—like whitespace, comments, and line breaks—without changing its functionality. This makes the file smaller, which improves page load speed and overall performance. Here’s how to do it effectively.

1. Use Online CSS Minifiers (Quick & Easy)

If you have a small CSS file or just need a one-time minify, online tools are the fastest option.

Popular tools:

• CSS Minifier (cssminifier.com)
• Clean CSS
• Toptal CSS Minifier

How to use:

• Paste your CSS code into the input box
• Click “Minify”
• Copy the compressed output

? Pros: No setup, beginner-friendly
? Cons: Not ideal for large projects or automation

?? Avoid using online tools for sensitive or proprietary code, since you’re uploading it to a third-party server.

2. Use Build Tools (For Developers)

If you're working on a real project, automate minification using build tools. These integrate into your workflow and can minify CSS every time you make changes.

Option A: Use PostCSS with cssnano

PostCSS is a powerful tool that transforms CSS with plugins. cssnano is a plugin that minifies CSS.

Steps:

1. Install Node.js (if not already installed)
2. Run:

   npm install postcss cssnano postcss-cli --save-dev

3. Create a postcss.config.js:

   module.exports = {
     plugins: [
       require('cssnano')({
         preset: 'default'
       })
     ]
   }

4. Add a script to package.json:

   "scripts": {
     "minify-css": "postcss styles.css -o styles.min.css"
   }

5. Run:

   npm run minify-css

? Pros: Automatable, fits into modern dev workflows
? Works great with frameworks like React, Vue, etc.

Option B: Use Webpack

If you're using Webpack, use the css-minimizer-webpack-plugin.

1. Install:

   npm install css-minimizer-webpack-plugin --save-dev

2. Update webpack.config.js:

   const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
   
   module.exports = {
     optimization: {
       minimize: true,
       minimizer: [
         new CssMinimizerPlugin()
       ]
     }
   };

Now, when you run webpack --mode production, your CSS will be minified automatically.

3. Use Task Runners (Like Gulp or Grunt)

For older workflows, Gulp is still a solid choice.

Example with Gulp:

1. Install:

   npm install gulp gulp-cssnano gulp-rename --save-dev

2. Create gulpfile.js:

   const gulp = require('gulp');
   const cssnano = require('gulp-cssnano');
   const rename = require('gulp-rename');
   
   gulp.task('minify-css', function () {
     return gulp.src('src/styles.css')
       .pipe(cssnano())
       .pipe(rename('styles.min.css'))
       .pipe(gulp.dest('dist/'));
   });

3. Run:

   gulp minify-css

4. Use Server-Side or CMS Tools

If you're not comfortable with command-line tools:

• WordPress: Plugins like Autoptimize or WP Rocket minify CSS automatically.
• Static site generators (e.g., Jekyll, Hugo): Use built-in minification or plugins.
• CDN services (Cloudflare, Netlify): Often include automatic minification.

Bonus: What Minified CSS Looks Like

Original:

.header {
  padding: 20px;
  color: #333;
  font-size: 16px;
}
/* This is a comment */

Minified:

.header{padding:20px;color:#333;font-size:16px}

All extra spaces and comments are gone—same styles, smaller file.

Minifying CSS is simple once set up. For one-offs, use an online tool. For real projects, automate it with PostCSS, Webpack, or Gulp. The performance gains are real, especially on mobile or slow connections.

Basically: remove bloat, serve smaller files, and let users see your site faster.

The above is the detailed content of How to minify CSS?. For more information, please follow other related articles on the PHP Chinese website!