Bootstrap CSS无法完成grunt-recess皮棉任务（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之后，我运行减小以使生成的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和.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 ），根本不是必需的。