将css样式与GWT小部件关联（使用UiBinder）的首选方式是什么？

在GWT页面（）中，它提到了两种方法（对于现代应用程序）：

• 使用ClientBundle中包含的CssResource
• 在UiBinder模板中使用内联元素

现代GWT应用程序通常使用CssResource和UiBinder的组合

---

所以我的问题是，什么时候应该使用css文件并为其创建CssResource，什么时候应该使用直接在ui.xml文件中定义样式？这两种方法中的任何一种都有性能影响（即在客户端下载的资源大小）？

没有性能影响——如果在UiBinder文件中指定CSS，GWT编译器将根据.ui.xml文件中内联的规则动态创建CssResource并使用它

---

所以，这实际上取决于你是否想在应用程序的其他地方分享这种风格。如果希望SomethingElse.ui.xml中的按钮与SomethingElse.ui.xml中的另一个按钮具有相同的样式，则应在CssResource中指定该样式。否则，请在UiBinder文件中指定样式，其他类将无权访问它。

使用UiBinder，CssResource的主要用途是动态更改样式。如果您不打算动态更改样式，请不要在CssResource上浪费时间

我建议使用CSS文件。这将样式从UiBinder中的标记中分离出来，这有助于在项目中与超过一个人进行协作—对于大型项目尤其如此。在某种程度上，您的.ui.xml文件可能会变得非常庞大，而且其中包含CSS只会让事情变得更糟

您可以轻松地将CSS文件附加到任何UiBinder，然后像平常一样使用它。下面是一个例子：

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:style src="../css/StyleSheet.css" />
    ...
    ...
            <g:LayoutPanel ui:field="layoutName" styleName="{style.aCssRule}" >
    ...

...
...
...

通过这种方式使用样式，如果您想要动态更改小部件的样式，您只需在此CSS文件中创建一个CssResource（在ClientBundle中），就可以开始运行了。

相关问题：