用于格式化css以使其更具可读性的工具

Question

我正在使用VSCode，我希望将CSS格式化为其中任何一种，

选项1

.class-name {
 font-size:  13px;
 width:      200px;
 height:     200px;
 color:      #333;
}

选项2

.class-name {
  font-size:  13px;
      width:  200px;
     height:  200px;
      color:  #333;
}

我想知道的是，

1. 是否有任何可以生成此类代码的工具。
2. 像这样构建你的css是不好的做法吗？

我使用Sass，我使用缩小器输出最终的样式表。

Answer 1

http://www.cleancss.com/css-beautify/

构建css的好网站。

来到第二个问题， 如果你正在发展，这是一个很好的做法。

一旦你进入生产和部署，缩小它

Answer 2

它不一样，但我认为它类似

body {
    background : black;
    color      : #80c0c0
}

如果你使用JetBrains IDE（PHPStorm，WebStorm，RubyMine，PyCharm）之一，你可以这样做。 我想你可以在其他文本编辑器中找到这种对齐方式，但我不知道它究竟存在于哪里。

要在JetBrains IDE中启用此对齐方式，请转到Settings->Editor->Code Style->CSS->Other->Align values，并将其设置为On colon

希望，这很有帮助

Answer 3

我最喜欢的，非常简单易用：http://minifybeautify.com/