GWT + CSS 样式重载

Question

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

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

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

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

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

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

我正在尝试用 GWT+CSS 以某种形式实现吗？

Answer 1

在构建复杂的 GWT 应用程序 6 年后，我非常支持为整个应用程序使用单个 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;
}