I am working on a big single page application [backbonejs and rails] which has LESS as the CSS preprocessor and the generated .css files has grown to such an extent that for IE we have to split it into 3 files with http://blesscss.com/
Though there are tools to detect unused css and linting css, I am unable to find a proper solution for refactoring LESS/SASS files directly from uncompiled files instead of a single large generated .css file.
Would like to know what is the best approach doing these tasks?
Thanks in advance !
If you want to remove unused CSS entirely, you can use a tool such as PurifyCSS to find out how much CSS file size can be reduced. Once you get the CSS code you should eliminate, you have to remove it manually from the page.
This is a simple to use PostCSS plugin that removes CSS selectors based on your other files.
Open UnCSS and paste the copied HTML code inside the HTML section and also copy the CSS from your stylesheet and paste it under the CSS section and click on UNCSS MY STYLES in it will automatically generate the CSS which is required by removing the unused CSS from the stylesheet.
PurgeCSS removes unused CSS rules from your stylesheets to reduce their size and therefore speed up page-loads. It's very important that you configure this tool correctly, or it will remove CSS rules that you need!
P.S.: Some of the links are just for SASS- for Less there are similar solutions which are easy to find.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With