我正在尝试现代化。是否可以在同一样式表中混合使用“支持/反对各种功能”,如果有的话,是否有关于如何混合它们的一般规则?
例如这是好的还是坏的做法。我只是想知道混合惯例是否会造成混淆,如果最好通常坚持一个公约,只在必要时使用例外;或者以避免所有例外的方式编程是否重要。
.no-borderradius .some-element {
...
}
.boxshadow .some-other-element {
...
}
答案 0 :(得分:3)
这实际上取决于具体情况,即你是否有风格依赖。
例如,如果应用了border-radius,则需要在#box
上进行一些填充,如果浏览器不支持,则不需要任何填充。在这种情况下,你可以这样做:
.border-radius #box {
border-radius: 5px;
padding: 5px;
}
(忽略供应商前缀的缺失。)
但是,如果你有一个微妙的渐变,只是增强了外观而没有任何依赖它,你可以这样做:
#box {
background: white linear-gradient(...);
}
支持它的浏览器会显示它,不显示的浏览器只显示降级的白色外观。
另一个例子,您需要不同的边框颜色,具体取决于是否成功应用了box-shadow。如果支持box-shadow,您可以设置无盒无阴影样式并覆盖它:
#box {
border-color: gray;
}
.box-shadow #box {
box-shadow: black 0 0 5px;
border-color: white;
}
你可以反过来做,但在我看来,首先给出降级的风格更有意义,然后加强它。你看,在这个例子中没有必要使用.no-box-shadow
因为我无论如何都要覆盖边框颜色。此外,如果您发现带有灰色边框的盒子阴影在视觉上可以接受,则可以将框阴影样式放在#box
下(而不是.box-shadow #box
)。
要理解,不需要为了使代码混乱而只是为了“一致”,你只需要考虑你的样式的语义。另外,如果您的样式过分依赖JavaScript生成的类,请想象关闭JavaScript后您的页面会是什么样子。