css - Bootstrap css 失败 grunt-recess lint 任务(noOverqualifying)

Question

Twitter 的 Bootstrap 未能通过其自身的休息时间检查。在 modals.less 上运行 grunt-recess 时我遇到资格过高的错误。

有问题的代码(在 LESS 中):

.modal {

  ...

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    .translate3d(0, -25%, 0);
    .transition-transform(~"0.3s ease-out");
  }
  &.in .modal-dialog { .translate3d(0, 0, 0) }
}

和

.modal-backdrop {

  ...

  // Fade for backdrop
  &.fade { .opacity(0); }
  &.in { .opacity(@modal-backdrop-opacity); }
}

在使用 grunt-contrib-less 编译 LESS 之后，我运行 recess 来检查生成的 app.css。

grunt-recess 输出:

Running "recess:dist" (recess) task
Warning: FILE: public/css/app.css
STATUS: Busted
FAILURES: 4 failures

Element selectors should not be overqualified
       1. .modal.fade .modal-dialog

Element selectors should not be overqualified
       1. .modal.in .modal-dialog

Element selectors should not be overqualified
       1. .modal-backdrop.fade

Element selectors should not be overqualified
       1. .modal-backdrop.in
 Use --force to continue.

如果没有 .modal 和 .modal-background 类，我不知道这些选择器 是否合格指定并且它破坏了模态 css。

Answer 1

首先，在使用 Bootstrap 时，您应该忽略这些错误，或者考虑您自己的 Bootstrap，正如评论中也提到的，这些类也用于 Bootstrap jQuery 插件。

其次，您应该想知道修复是否真的会解决根本问题，另请参阅 https://github.com/CSSLint/csslint/wiki/Disallow-overqualified-elements :

This rule is aimed at decreasing byte count by removing extra unnecessary qualifiers from selectors.

您的测试似乎在双选择器上失败，例如 .classa.classb 意味着同时具有 classa 和 classb。理论上您可以为这种情况定义一个新类，如果您选择一个短于 .classa.classb 的名称，它可以为您节省一些字节。但是在 Bootstrap 中，.in 和 .fade 类描述状态(与 :hover 和 :active 比较)和根本没有必要。