About css formatter
Minified CSS is hard to read. The formatter puts each rule and declaration on its own line with consistent indentation.
Useful when
- Debugging a stylesheet you only have in minified form.
- Cleaning up copied snippets.
- Reviewing differences in version control.
A worked example
The minified rule a{color:red;margin:0}.btn{padding:8px} becomes two blocks, each declaration on its own line with two spaces of indentation. That makes it easy to see which property belongs to which selector, and to add or remove lines.
Good habits
- Keep the readable source in version control and minify only in the build.
- Group related properties and keep a consistent order.
- Use custom properties for colours and spacing so changes happen in one place.
Spotting problems
Once the rules are expanded, repeated selectors and conflicting declarations become easy to spot, so you can merge them and remove dead code.
