On Strategies of CSS Minification

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:

• Keep length of selectors short.
• Avoid using !important declaration.
• Stick to the same order of properties throughout the stylesheet.
• Keep blocks with similar sets of properties close to each other.

Basic transformations

This strategy is considered safe, includes removal of unnecessary elements or transforming the values into more compact representation.

• Removal of whitespace: In some cases, whitespace characters ( , \n, \r, \t, \f) are unnecessary and do not affect rendering.
• Removal of trailing semicolon: The last semicolon (;) in a block is not required and does not affect rendering.
• Removal of comments: Comments do not affect rendering.
• Removal of invalid declarations: @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.
• Minification of color properties: Some color values are minimized to color keywords (white, black, etc.) or three-digit shorthand hex colors (#fff, #000, etc.)
• Minification of zero: In some cases, the numeric values can be compacted to 0 or even dropped.
• Minification of multi-line strings: A string cannot directly contain a newline except being escaped.
• Minification of the font-weight property: Text font-weight values (bold, normal, etc) are minimized to associated number values (700, 400, etc).

Structural optimizations

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.

• Merging blocks with identical selectors: Adjacent blocks with identical selectors are merged.
• Merging blocks with identical properties: Adjacent blocks with identical properties are merged.
• Removal of overridden properties: Among duplicate properties in a CSS rule, only the last property is applied if none is !important or only the last !important applied.
• Removal of overridden shorthand properties: If the last property is a shorthand then all preceding overridden properties will be removed.
• Removal of repeating selectors: Repeating selectors can be removed.
• Partial merging of blocks: Given two adjacent blocks where one of the blocks is a subset of the other one.
• Partial splitting of blocks: If two adjacent blocks contain intersecting properties.
• Removal of empty ruleset and at-rule: Empty ruleset and at-rule will be removed.
• Minification of margin and padding properties: The margin and padding properties are minimized according to shorthand properties.