html - GWT + CSS 样式重载

Question

我正在考虑以统一的方式制作一些自定义 GWT 小部件，而无需设计人员在每次希望某些内容以不同方式显示时都进入每个小部件的 UI 文件。我会为小部件中的元素提供一堆基本样式，然后设计师会在 UIBinder、HTML、CSS 中使用相同的选择器设置样式。

例如: 我有一个复合小部件，我已将其设置为使用 CSSResource。此 CSS 资源具有一个名为 .myHeaderStyle 的样式，该样式应用于组合中的一个元素。

此组合在另一个 GWT 小部件中使用，并且在用于封闭小部件时需要略有不同。

我希望我可以在该 UI 的 UIBinder 定义中指定另一种样式，该 UI 也命名为 .myHeaderStyle，并让此样式覆盖复合小部件的 CSSResource 中指定的样式。

但是，在我尝试实现这一点时，即使 !important 包含在要覆盖初始样式的样式属性中，我也只是在复合小部件上设置了原始的 .myHeaderStyle。

我试图特别避免在每次编译时添加/更改组合中的样式，我希望它从封闭页面继承，有效地覆盖组合小部件的原始样式。

我尝试做的事情是否可以通过 GWT+CSS 以某种形式实现？

Answer 1

在构建了 6 年复杂的 GWT 应用程序之后，我大力支持对整个应用程序使用单个 CSS 文件，并且从不使用 CSS 资源或 UIBinder 定义。然后你可以在你的小部件中设置“.myWidget”样式，你的设计师可以这样做:

.myHeaderStyle {
   font-size: 1.4rem;
}
.myWidget .myHeaderStyle {
   font-size: 1.6rem;
}

在我看来，这是在整个应用程序中保持一致性的最简单方法 - 所有样式都在一个地方，使用继承、rem 和其他最佳实践。对于设计师来说，将 CSS 资源分散在整个应用程序中要容易得多。

顺便说一下，这也是实现主题(或皮肤)或根据屏幕尺寸更改 CSS 而不触及代码的最简单方法。

编辑:

这是我的一个应用程序的示例:

<g:HTMLPanel>
    <g:Label ui:field="logo" styleName="logo">My App</g:Label>
    <div class="menu" >
        <div class="tab" >
            <g:Label ui:field="tab1" ><ui:text from="{constants.tab1}" /></g:Label>
            <g:Label ui:field="tab2" ><ui:text from="{constants.tab2}" /></g:Label>
            <g:Label ui:field="tab3" ><ui:text from="{constants.tab3}" /></g:Label>
        </div>
    </div>
</g:HTMLPanel>

请注意，我对 div 元素使用“class”，但对小部件使用 styleName。我没有在我的选项卡标签上设置样式，因为我使用 CSS 一次性设置所有标签的样式:

.tab>div {
    float: right;
    margin: 0 0 0 6px;
    padding: 2px 6px;
    width: 120px;
}