CSS is a render blocking resource on the web, user sees nothing until CSS is ready. The less CSS to deliver, the better. CSS minification can help with that by transforming a CSS document into a smaller document without losing correctness.
CSS minification does not have to be a lossless operation, even though we often think of it as such. Typical minification strategies are safe basic transformations and aggressive structural optimizations.
Different CSS minifiers (cssnano, clean-css, csso, etc.) may run different sets of optimizations, result in different sizes, and at different speeds.
Some stylesheets compress better than the others. Sometimes, one character difference can turn a well-compressible stylesheet to a very inconvenient one. You can help the minimizer by following these recommendations:
!important
declaration.This strategy is considered safe, includes removal of unnecessary elements or transforming the values into more compact representation.
, \n
, \r
, \t
, \f
) are unnecessary and do not affect rendering.;
) in a block is not required and does not affect rendering.@charset
rules must be placed at the very beginning of the stylesheet, @import
rules must precede all other rules except the @charset
rule if present.white
, black
, etc.) or three-digit shorthand hex colors (#fff
, #000
, etc.)0
or even dropped.bold
, normal
, etc) are minimized to associated number values (700, 400, etc).This strategy is considered aggressive and unsafe when it might causes losses of intended styles if not implemented correctly, includes removal of overridden properties or merging of blocks.
!important
or only the last !important
applied.