Clean-Css

What Is Clean-Css

When you are building a website, chances are that you are using a css framework like Bootstrap, Materializecss, etc... But you will only use a small set of the framework and a lot of unused css styles will be included.

This is where Clean-Css comes into play. Clean-Css analyzes your css. Then it matches the selectors used in your css files with your html files. It removes unused selectors from your css, resulting in smaller and optimized css file.

Usage

API

By sendeng a post request which contains the html and css as a string to this url: https://clean-css-ol7w.onrender.com/api/v1/remove-unused-css

Example using axios:

axios.post('https://clean-css-ol7w.onrender.com/api/v1/remove-unused-css', {
    html: '<p>hello</p>',
    css: 'p{color: red;}'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Website

Go to this website: https://comfy-syrniki-a32afb.netlify.app/

- Copy&paste your HTML and CSS into boxes as shown below

- Click Clean up css button

- Use your clean css

Please note:

Clean-Css only runs the Javascript that is run on page load. It does not (and cannot) handle Javascript that runs on user interactions like button clicks.

-> The code for both the website and API can be found in this repository