CSS をフォーマットする方法

问题

CSS が圧縮されていたり書式が不統一だったりして、保守が困難です。

前提条件

• CSS 構文の理解
• セレクタとプロパティへの習熟

ステップ

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.

   入力

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

   入力

   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.

   入力

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

   输出

   properly nested format

期待される結果

一貫したインデントとスペース、必要に応じたプロパティの並べ替えを施した、読みやすい CSS。

よくあるエラー

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

トラブルシューティング指引

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

セキュリティ上の制限

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