An Ultimate Guide to Clean CSS for Optimized Website Performance

Introduction to Clean-CSS

Clean-CSS is a fast and efficient CSS optimizer that supports inlining, file imports, important functions, and many other advanced features. It helps in reducing the CSS file size, thereby speeding up the website loading time and enhancing the user experience.

Getting Started with clean-css

First, install clean-css via npm:

  npm install clean-css

Basic Usage

To minify CSS using clean-css:

  const CleanCSS = require('clean-css');
  const input = 'a { font-weight: bold; }';
  const output = new CleanCSS().minify(input);
  console.log(output.styles); // Output: 'a{font-weight:700}'

Inlining

Clean-CSS supports inlining of CSS files:

  new CleanCSS().minify(['path/to/first.css', 'path/to/second.css'], (error, output) => {
    console.log(output.styles); // Minified and inlined CSS content
  });

Optimizing CSS with Advanced Options

Using advanced options to optimize CSS:

  new CleanCSS({
    level: {
      1: {
        all: true,
      },
      2: {
        restructureRules: true,
      }
    }
  }).minify('a { color: #ff0000; }');

Using with Streams

Clean-CSS can be used with streams for processing large amounts of CSS:

  const fs = require('fs');
  const CleanCSS = require('clean-css');
  
  const input = fs.createReadStream('path/to/input.css', 'utf8');
  const output = fs.createWriteStream('path/to/output.css');
  
  input.pipe(new CleanCSS.stream()).pipe(output);

API Example: Building a Simple Node.js App with clean-css

Let’s build a simple Node.js application that uses clean-css to optimize CSS files:

  const fs = require('fs');
  const CleanCSS = require('clean-css');
  
  fs.readFile('styles.css', 'utf8', (err, data) => {
    if (err) {
      return console.error(err);
    }
    
    const output = new CleanCSS({ level: 2 }).minify(data);
    fs.writeFile('styles.min.css', output.styles, (err) => {
      if (err) {
        return console.error(err);
      }
      
      console.log('CSS minified and saved to styles.min.css');
    });
  });

This script reads a CSS file, minifies it using clean-css with advanced optimizations (level 2), and then writes the minified CSS to a new file.

Conclusion

Clean-CSS is a powerful tool that can greatly aid in optimizing your website’s CSS. From basic minification to advanced inlining and streaming options, clean-css offers a wide range of functionalities to suit any project’s needs.

Experiment with clean-css and take full control of your CSS optimizations today!

Hash: fddb40b7803b72e44ec7b71e56e49a2842f0d530a9082f6b6f21786f8482f99d