Bootstrap css 失败 grunt-recess lint 任务（noOverqualifying）答案

【问题标题】：Bootstrap css fails grunt-recess lint task (noOverqualifying)Bootstrap css 失败 grunt-recess lint 任务（noOverqualifying）
【发布时间】：2014-08-07 18:19:16
【问题描述】：

Twitter 的 Bootstrap 未能通过自己的凹槽 linting。在 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。

【问题讨论】：

你的问题是什么？ Bootstrap 在 v3.0.1 中放弃了 recess 支持，所以严格来说它不再是“它自己的”（如果我没记错的话，甚至在此之前，Bootstrap 编译的过度限定选项仍然是关闭的）。
我的问题只是一般来说如何解决这个问题 - 要么通过以非破坏性方式编辑 LESS，要么通过弄清楚为什么休会抱怨选择器（在我看来）并不过分.不知道 Bootstrap 已经放弃了对凹槽的支持，感谢您指出这一点！
我想解决这个问题的正确方法是关闭基于 Bootstrap 的 CSS 的选项（即noOverqualifying: true 左右）。我看不到以不间断方式编辑这些文件的方法（特别是考虑到相应的scripts 也可能使用那些modal 类）。

标签： css twitter-bootstrap gruntjs less recess

【解决方案1】：

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

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

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

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

【讨论】：