Formatting is a debugging aid

Readable line breaks and indentation reveal selector boundaries, declaration blocks and missing closing braces. Formatting should preserve token meaning rather than reorder declarations or combine rules that may depend on the cascade.

When diagnosing generated CSS, keep the original asset and compare the rendered page after formatting. A readable result is not proof that invalid or unsupported declarations became valid.

Minify conservatively

Whitespace and comments are often removable, but CSS contains strings, escaped identifiers, custom properties and data URLs where simple regular-expression rewrites can be risky. The XXF tool intentionally avoids aggressive value rewriting and selector merging.

  • Keep the authored source under version control
  • Minify a build artifact, not the only copy
  • Test data URLs and custom properties
  • Use source maps in production debugging workflows

Use a parser for production optimization

A parser-based tool understands CSS tokens and is better suited to merging rules, shortening values, removing unreachable code or handling new syntax. Run the project's browser tests after changing optimizer versions because valid transformations can still expose cascade assumptions.

Color conversion does not measure contrast

HEX, RGB and HSL are representations of color values, not accessibility scores. Rounding during conversion can slightly change numeric values, and acceptable text contrast depends on the foreground-background pair, font size and weight.

Use the converter to normalize design tokens, then evaluate contrast in the final component state, including hover, disabled and dark-mode combinations.

Primary references

Read the specification

World Wide Web ConsortiumCSS Syntax Module Level 3World Wide Web ConsortiumWeb Content Accessibility Guidelines · Contrast

Put the guide into practice

Open the related browser tools and test the workflow with a synthetic sample

CSS Formatter / Minifier HEX / RGB / HSL Converter