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后，我运行凹进来lint得到的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：

此规则旨在通过删除额外内容来减少字节数选择器中不必要的限定词。

您的测试似乎在双倍选择器上失败，例如.classa.classb意味着同时拥有classa和classb。理论上，您可以为该情况定义一个新类，如果您选择的名称短于.classa.classb，则可以节省一些字节。但是在Bootstrap中，.in和.fade类描述了状态（与:hover和:active比较）并且根本不需要。

Bootstrap css无法执行grunt-recess lint任务（noOverqualifying）

1 个答案: