Should I Minify My CSS?

What is the best way to minify CSS locally (not using a website minifying application)?

Is it worth it to minify the CSS?

What is the speed saving of minified CSS compared to non-minified CSS?

How do you unminify afterwards?

It reduces the size of CSS file significantly (mostly more than 1/3 of original size). But if its really small like a few KiB, like < 150, its probably good to leave it, but if its bigger than that you should minify in deployed version. And you don’t unMinify, you keep 2 versions (2 seperate files), 1 for minified and another for unMinified. And to the question of how to do that manually, just remove all the space characters and ‘Return carriage’ (new line character, precisely Enter character). that should do it. If you don;t want to do that manually and don’t like using web based online tools, you can use VSCode extension, go here https://marketplace.visualstudio.com/items?itemName=josee9988.minifyall Happy to help :slight_smile:

1 Like

@bhardwajmd1 Thank you for responding to my question. It is good to know about the size being less than 150KiB there is no need to minify.
I was not able to install VSCode I only have Vim.

Which way are other people using to minify their CSS code?

Usually, it would be part of some build step. Like if you use PostCSS or SCSS and have a compile step or just some general build process where you can minify the output.

VIM does have plugins but I can’t vouch for their quality or how well maintained they are (vim-minify).

1 Like

You minify when making a production build, and keep it unminified in development. When you make a serious web project, you’re typically going to use a bundler like webpack, parcel, rollup, vite, etc (the list of names keeps growing). Far as I know, all of those minify things automatically when the NODE_ENV environment variable is set to ‘production’.

1 Like

Thanks brothers @lasjorg and @chuckadams for the information. It was good to get the viewpoint of others about CSS minification.