CSS - linter 与美化器不一致

Question

我正在使用 grunt-jsbeautifier 来美化打印 .css 文件，并使用 grunt-contrib-csslint 检查 .css 文件是否存在问题。不幸的是，美化器生成的 CSS 似乎违反了 linter 规则。

如果我有这个 CSS:

.half_circle_style a:nth-child(2) {}

...然后 grunt-contrib-csslint 报告“完成，没有错误”。

如果我通过 grunt-jsbeautifier 运行 CSS，则会在第 nth-child 之前添加一个空格:

.half_circle_style a: nth-child(2) {}

... 导致 grunt-contrib-csslint 报告:

[L1:C23]
>> Expected LBRACE at line 1, col 23. This rule looks for recoverable syntax errors. (errors)
[L1:C23]
>> Unexpected token 'nth-child(' at line 1, col 23. This rule looks for recoverable syntax errors. (errors)
[L1:C33]
>> Unexpected token '2' at line 1, col 33. This rule looks for recoverable syntax errors. (errors)
[L1:C34]
>> Unexpected token ')' at line 1, col 34. This rule looks for recoverable syntax errors. (errors)
[L1:C36]
>> Unexpected token '{' at line 1, col 36. This rule looks for recoverable syntax errors. (errors)
[L1:C37]
>> Unexpected token '}' at line 1, col 37. This rule looks for recoverable syntax errors. (errors)

我不是 CSS 专家，所以我正在寻找专家意见，请问 - grunt-jsbeautifier 是打印得很糟糕，还是 grunt-contrib-csslint 过于严格？

Answer 1

在这种情况下，我不认为 grunt-contrib-csslint 过于严格。

.half_circle_style a:nth-child(2) {}

是有效的 CSS 语法，而

.half_circle_style a: nth-child(2) {}

(在 nth-child 之前有一个空格)不是有效的 CSS 语法。

问题可能是因为您通过 JavaScript 美化引擎而不是 CSS 美化引擎来运行 CSS？也许您可以尝试通过 http://cssbeautify.com/ 运行您的代码