Developer tools help you find and fix rendering issues, but what about efficiency? Are our file sizes as small as they can be? For that, we need minification tools.
Minification in the context of CSS means “removing excess characters”. Consider, for example, this block of code:
hi {
font: 16px / 1.5 ‘Helvetica Neue’, arial, sans-serif;
width: 80%;
margin: 10px auto 0px;
}
That’s 98 bytes long, including line breaks and spaces. Let’s look at a minified example:
h1{font:16px/1.5 ‘Helvetica Neue’,arial,sans-serif;width:80%;
margin:10px auto 0}
Now our CSS is only 80 bytes long—an 18% reduction. Fewer bytes, of course, means faster download times and data transfer savings for you and your users.
In this section, we’ll look at CSS Optimizer, or CSSO, a minification tool that runs on Node.js . It’s available as a plugin for several build tools and workflows, but we’ll focus on the command-line interface version.
Of course, using the command-line version of CSSO requires that you get comfortable using a command-line interface. Linux and macOS users can use the Terminal application (Ctrl + Alt + T for most Linux distributions, Terminal.app for macOS). If you’re using Windows, try the command prompt. Go to the Start or Windows menu and type “cmd” in the search box. You can also use PowerShell.
Before you install CSSO, you’ll need to install Node.js and npm. Node.js is a JavaScript runtime that lets you write JavaScript applications that run on your computer or on a server without a browser .npm is the package manager for Node.js. Package managers make it easy to install and update the code libraries used in your projects. npm is installed as part of the Node.js installation process, so you’ll only need to install one package.
1. Installing CSSO with npm
Now you can install CSSO. In the command line, type the following:
npm install -g csso-cli
The -g flag installs CSSO globally, so that you can run it from any directory. npm will print a message to your terminal window when installation is complete. The image below shows CSSO being installed using npm on macOS.
2. Running CSSO with npx
If you do a lot of Node.js development, you may want to avoid installing packages globally. Global packages can cause trouble if multiple projects require different versions of a package. Luckily, npm includes a package runner—npx —that lets you run package binaries from a local directory or a central cache.
Because npx is a package runner, rather than an installer, you’ll need to type npx and the full name of the package every time you want to run CSSO:
npx csso-cli
The first time you use this command, npx will alert you that it needs to install csso-cLi . Confirm that you want to do so when prompted.
Now you’re ready to minify your CSS.
3. Using CSSO
To minify CSS files, run the csso command, passing the name of a file as an argument:
csso style.css
If you’re using npx, you’ll need to type a few more characters:
npx csso-cli style.css
This performs basic compression. CSSO strips unneeded whitespace, removes superfluous semicolons, and deletes comments from your CSS input file.
Once complete, CSSO prints the optimized CSS to standard output, meaning the current terminal or command prompt window. In most cases, however, we’ll want to save that output to a file. To do that, pass an output argument to csso using the –output or shorter -o flag. For example, if we wanted to save the minified version of style.css as style.min.css , we’d use the following:
csso style.css -o style.min.css
If you’ve chosen npx, use this:
npx csso-cli style.css -o style.min-css
By default, CSSO also restructures your CSS. It will, for example, merge the declaration blocks of duplicate selectors and remove some redundant properties. Consider the following CSS:
body {
margin: 20px 30px;
padding: 100px;
margin-left: 0px;
}
hi {
font: 200 36px / 1.5 sans-serif;
}
h1 {
color: #ff6600;
}
In this snippet, margin-left overrides the earlier margin declaration. We’ve also repeated h1 as a selector for consecutive declaration blocks. After optimization and minification, we end up with this:
body{padding:100px;margin:20px 30px 20px 0}hi{font:200 36px/1.5 sans-serif;color:#f60}
CSSO has removed extraneous spaces, line breaks, and semicolons, and shortened #ff6600 to #f60 . CSSO also merged the margin and margin-left properties into one declaration ( margin: 20px 30px 20px 0 ) and combined our separate h1 selector blocks into one.
If you’re skeptical about how CSSO will rewrite your CSS, you can disable its restructuring features. Use the –no-restructure flag. For example, running csso style.css -o style.min.css –no-restructure gives us the following:
body{margin:20px 30px;padding:100px;margin-left:0}hi{font:200 36px/1.5 sans-serif}hi{color:#f60}
Now our CSS is minified, but not optimized. Our margin-Left: 0 declaration remains. Disabling restructuring will keep your CSS files from being as small as they could be. Avoid disabling restructuring unless you encounter a problem.
Preprocessors and post-processors (such as Sass, Less and PostCSS) offer minification as part of their toolset. However, using CSSO may shave additional bytes from your files.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.