Wie in Formatieren CSS

问题

Your CSS ist minified oder inconsistently formatted, making it hard in maintain.

Voraussetzungen

• Understanding of CSS syntax
• Familiarity with selectors and properties

Schritte

1. 1. Parse the CSS rules

   The formatter parses selectors, declarations, at-rules, and comments. It identifies the structure to apply consistent formatting. Invalid CSS may cause parsing errors.

   Eingabe

   body{margin:0;padding:0}

   输出

   parsed rules

2. 2. Apply formatting conventions

   Place each declaration on a new line with a semicolon. Indent declarations inside their rule. Add spaces after colons and before opening braces. Sort properties if desired (alphabetical or by category).

   Eingabe

   body{margin:0;padding:0}

   输出

   body {\n  margin: 0;\n  padding: 0;\n}

3. 3. Handle nested and at-rules

   Modern CSS and preprocessors support nesting and at-rules like @media. Indent nested rules to reflect their hierarchy. Preserve the order of at-rules and their contents.

   Eingabe

   @media(min-width:768px){.x{color:red}}

   输出

   properly nested format

Erwartetes Ergebnis

Readable CSS mit consistent indentation, spacing, und optional Eigenschaft sorting.

Häufige Fehler

Formatter breaks vendor prefixes

Ensure the formatter preserves vendor-prefixed properties (-webkit-, -moz-). Some formatters strip them; configure to keep them.

Nested syntax not supported

Use a formatter that supports CSS nesting or your preprocessor syntax (Sass, Less).

Troubleshooting指引

• If the formatted CSS behaves differently, check for altered specificity or reordered properties that rely on cascade order.
• Comments should be preserved; if they disappear, switch formatters.

Sicherheitsgrenzen

• Formatting CSS is safe. CSS cannot execute code, though CSS-based exfiltration attacks exist in content injection contexts.