0

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.

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

4

1 回答 1

1

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

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

此规则旨在通过从选择器中删除多余的不必要的限定符来减少字节数。

您的测试似乎在双打选择器上失败，例如同时.classa.classb具有classa和的含义classb。理论上，您可以为这种情况定义一个新类，如果您选择的名称短于.classa.classb. 但是在 Bootstrap 中，.inand.fade类描述了状态（与:hoverand比较:active）并且根本没有必要。

于 2014-11-01T00:05:17.353 回答