1

我正在尝试modernizr。在同一个样式表中混合“针对/反对各种功能”是否可以，如果可以，是否有关于如何混合它们的一般规则？

例如，这是好的还是不好的做法。我只是想知道混合约定是否会造成混淆，以及通常坚持一种约定是否会更好，仅在必要时使用例外；或者以避免所有异常的方式进行编程是否重要。

    .no-borderradius .some-element {
    ...
    }

    .boxshadow .some-other-element {        
    ...
    }
4

1 回答 1

3

这实际上取决于具体情况，即您是否有样式依赖项。

例如，#box如果应用了边框半径，您需要一些填充，如果浏览器不支持它，您不需要任何填充。在这种情况下，您可以这样做：

.border-radius #box {
  border-radius: 5px;
  padding: 5px;
}

（忽略缺少供应商前缀。）

但是，例如，如果你有一个微妙的渐变，它只是增强了外观并且没有任何依赖它，你可以这样做：

#box {
  background: white linear-gradient(...);
}

支持它的浏览器会显示它，不支持它的浏览器只会显示退化的白色外观。

另一个例子，你想要一个不同的边框颜色，这取决于 box-shadow 是否成功应用。如果支持 box-shadow，您可以设置 box-shadowless 样式并覆盖它：

#box {
  border-color: gray;
}
.box-shadow #box {
  box-shadow: black 0 0 5px;
  border-color: white;
}

你可以反过来做，但在我看来，先给出退化的风格，然后增强它更有意义。您会看到，在此示例中无需使用.no-box-shadow，因为无论如何我都覆盖了边框颜色。此外，如果您发现带有灰色边框的 box-shadow 在视觉上可以接受，您可以将 box-shadow 样式放在#box(而不是.box-shadow #box) 下。

总而言之，没有必要为了“一致”而将代码与类混杂在一起，您只需要考虑样式的语义即可。此外，如果您的样式过于依赖 JavaScript 生成的类，想象一下关闭 JavaScript 后您的页面会是什么样子。

于 2012-06-03T13:42:32.373 回答