使用 SonarQube 进行 CSS 测试入门

以下文章来自 David Racodon 的客座文章。 David 为这个开源代码质量工具做出了贡献，他将告诉你所有关于它的信息。 我以前从未听说过它，但我知道那里有很多对使用工具来帮助他们控制 CSS 感兴趣的人。 这有点像 CSS lint，但它被形式化为一个接口，用于处理整个项目的代码质量。

CSS 的质量往往会随着时间的推移而下降。 您开始一个新项目，它非常干净。 但是，随着更改和维护的慢慢进行，技术债务会累积起来。 对于拥有许多不同维护人员或员工流动的项目来说，情况会变得更糟。

我遇到的绝大多数 CSS 开发人员都关心他们的代码整洁，而且也觉得他们可以做得更好。

我使用并开发了一个名为 SonarQube 的工具，该工具专门用于开发人员改进代码质量。

什么是 SonarQube？

SonarQube 为包括 CSS 在内的多种语言提供代码质量反馈。 Web 界面提供项目代码质量的概述。

从那里，您可以深入挖掘，SonarQube 可以直接在代码中向您显示问题，例如潜在的错误，例如重复的属性

或跨文件的重复选择器

或任何其他 开发人员的七宗罪。

有 这些功能的演示，您也可以查看。

从哪里开始？ 新代码。

如果您现在分析您的代码会怎么样？ 如果您幸运的话，您可能只有几十个问题。 但是，如果您有几百个问题呢？ 那么您应该从哪里开始着手呢？ 换个角度说，如果您的浴缸漏水，您会先开始拖地，还是会先尝试修理漏水？ 我相信（至少我希望）你们大多数人会先尝试修理漏水。

SonarQube 提供了您专注于新代码所需的一切：差异视图。 它们允许您将代码的当前状态与之前状态进行比较。（之前状态可能是上次分析、冲刺开始、生产版本等）并突出显示新问题。

在上面的示例中，您只需单击 **+9** 即可显示自上次分析以来的 9 个新问题，并开始修复它们。

它执行哪些 CSS 检查？

目前有 50 多个 可用。 以下是一些示例

潜在的错误

• 重复属性：不好的复制粘贴？ 为了跨浏览器支持而设计的？ 尽管如此，在这种情况下，注释会很好
• 属性值应有效，否则它们将被浏览器忽略。 它不仅仅是一个基本的 CSS2 验证器，它还考虑了 CSS3 和浏览器普遍接受的值。 查看完整的验证器列表。

编码指南

• 选择器应遵循命名约定
• 零值的单位应删除
• 样式表不应包含太多规则

跨浏览器兼容性

• 标准属性应与供应商前缀属性一起指定
• 不应使用已弃用的系统颜色

尝试一下

SonarQube 是开源且免费的。 要在两分钟内分析您的代码，可以下载包含 CSS 插件和分析器的 SonarQube 包 此处（请参阅右侧的 **Download ZIP**）。

或者，查看 深入文档。

了解更多

说服了吗？ 通过使用您 最喜欢的持续集成服务 自动化代码分析来更进一步。 还有 JavaScript、HTML 和其他语言的插件。 您可以使用它来 查看问题、评估您的技术债务 等等。

关于 CSS 插件的反馈

我和 Tamas Kende 一起为 SonarQube CSS 插件做出了贡献。 我们并不是真正的 CSS 大师，我们相信现有规则可以改进，并且可以添加新规则。 欢迎您提供反馈！ 发布到 SonarQube 用户组 或在 Twitter 上 ping 我们，地址是 @kalidasya 和 @DavidRacodon。