问GWT和CSS开发最佳实践

EN

如果您的团队不熟悉HTML/CSS/JS & GWT/Java，可能会出现问题。让我们假设你有摇滚的开端，你应该为之奋斗。然后，您希望获得以下CSS的好处：

没有字符串文字类名引用CSS类的CSS名称空间conflicts/pollution

• Minimization (压缩选择器和CSS规则的properties)

• Compiler优化(组合类似规则))，排除未使用的规则

• 编译器检查CSS有效性和缺少的类

• 在远程模式下运行DevMode时没有外部CSS文件的堆(否则浏览器会拉出远程CSS，而不是新的CSS )<>H 214F 215

我发现最好的方法是使用UiBinder & UiBinder的Java类，所有这些都在一个地方。见下面的例子。在我的经验中，这将产生最健壮的、压缩的、最快的、可靠的应用程序，并且不添加额外的文件。

一切都在一个地方：

• CSS在UiBinder中定义，在UiBinder中使用
• CSS接口定义在UiBinder文件中，其中使用

小部件

class MyClass extends Widget {
    ... // jave UI binder class

    public interface MyStyle extends CSSBundle {
        String someClassName();
    }

    @UiField
    MyStyle style;

    ...
    something.setClassName(style.someClassName());
    ...
}

UiBinder

<!-- UiBinder File -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

    <ui:style type='com.my.app.MyFoo.MyStyle'>
        .someClassName { background-color:pink; }
    </ui:style>

    <div class='{style.someClassName}'>Sample text.</div>

</ui:UiBinder>

我以前问过这个问题，看看here。

这里很难有一个“最佳实践”，因为四种不同的方法在不同的情况下都能很好地工作。根据使用GWT的方式，将确定要使用的最佳选项。

如果您的团队由A) Java专用和B) CSS/HTML组成，则选项1或2将有效。但是，如果您的UX角色理解GWT和CSS/HTML/XML的集成点(请阅读: UiBinder)。这个人可能知道如何最好地设置一个UiBinder，以便最大限度地利用赋予Java角色的功能。

UiBinder + ClientBundle为您的项目添加了额外的复杂性层。这带来了很多好处，但如果你的团队不太适合，你最终可能会造成太多的伤害。

“最佳实践”可能包括组织一个主CSS文件(通过ClientBundle或选项1或2)，该文件的组织方式提供了整体应用程序的一致性，同时对本地内容使用UiBinders中的特定样式。

如果你想全力以赴，我认为你应该专注于最大限度地使用UiBinder和CssResource/ClientBundle (Externs /ClientBundel)，以及通过

使用外部资源进行重用+增加一致性