Comparing CssCompactor: Features, Performance, and Alternatives

How CssCompactor shrinks stylesheets without breaking layouts

1) What it removes

• Comments & whitespace: strips comments, newlines, and extra spaces.
• Unnecessary semicolons/zeros: removes redundant semicolons and converts values like 0px → 0.
• Shortens properties: merges longhand into shorthand (margin-top/margin-right/… → margin).
• Shortens colors: converts rgb()/long hex to short hex when safe (#ffffff → #fff).
• Renames local variables: shortens non-global CSS custom properties and keyframe names when safe.

2) What it preserves to avoid breaking layouts

• Selector/DOM semantics: preserves selectors, combinators, pseudo-classes, and specificity order exactly.
• Cascade & inheritance: keeps rule order and specificity so cascade behavior is unchanged.
• Unit-sensitive values: avoids changing units where browsers differ (e.g., 0 vs 0px only when safe).
• Contextual rules: keeps media queries, @supports, @font-face, and keyframes intact or rewrites them conservatively.
• Ignored optimizations: skips transformations flagged as risky (e.g., merging rules with different specificity).

3) Safety checks and validation

• Syntactic parser: builds a CSSOM before transforming so it understands structure rather than using regex.
• Semantic analysis: detects dependencies (custom properties, keyframe names, font-family references) to avoid renames that would break references.
• Source-map support: generates source maps so original code is recoverable for debugging.
• Unit tests & regression suite: runs rendering/regression tests (visual diff or critical-rule checks) on representative pages or snippets when configured.

4) Typical optimization steps in order

1. Parse CSS into AST/CSSOM.
2. Remove comments/whitespace and minify tokens.
3. Convert eligible values (colors, zeros, decimals).
4. Merge longhand into shorthand where selectors/rule context allow.
5. Deduplicate identical rules and combine selectors if specificity and order permit.
6. Shorten internal names and produce source maps.
7. Output minified CSS and optional gzip/brotli compression.

5) Configuration & best practices

• Enable source maps for debugging.
• Whitelist selectors or files that must not be altered (third‑party libraries).
• Run visual/regression tests after minification for complex UIs.
• Keep a development (readable) build and use the minified build only in production.

If you want, I can produce a short example showing an original stylesheet and the CssCompactor-minified output plus a source-map snippet.