Cómo a Formatear CSS

问题

Your CSS es minified o inconsistently formatted, making it hard a maintain.

Requisitos previos

• Understanding of CSS syntax
• Familiarity with selectors and properties

Pasos

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.

   entrada

   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).

   entrada

   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.

   entrada

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

   输出

   properly nested format

Resultado esperado

Readable CSS con consistent indentation, spacing, y optional propiedad sorting.

Errores comunes

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).

Solución de problemas指引

• 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.

Límites de seguridad

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