GWT和CSS开发最佳实践

Question

我想知道开发一个外部CSS开发人员参与设计网站外观的应用程序的最佳实践是什么？

理想情况下,他们将创建CSS文件,我们可以通过多次迭代轻松地集成到站点中,开发团队不必对这些文件进行任何操作(显然会有HTML或模板更改指向相应的类) .

GWT文档(http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html)列出了四种方法:

1. 在主机HTML页面中使用标记.
2. 使用模块XML文件中的元素.
3. 使用ClientBundle中包含的CssResource.
4. 在UiBinder模板中使用内联元素.

文档表明现代应用程序倾向于使用方法3和4,但是这些似乎是对开发过程的干扰,因为我们不希望不断更新CssResource接口,每次迭代都会更改CSS(在方法3中)或者切割和拆分CSS文件,将它们内联到我们的ui.xml文件中(方法4).

我们正在考虑使用方法2,并手工编写CSS类.这将允许我们轻松地放入CSS文件更新,而不是开发人员需要触摸它们.我们会失去混淆,并且会有一些工作来管理CSS名称的更改,但不会超过其他方法.我还缺少其他考虑因素吗？

在构建涉及外部CSS设计人员的GWT应用程序时,是否有最佳实践？

Answer 1

如果您的团队不熟悉HTML/CSS/JS和GWT/Java,则可能会出现问题.让我们假设你有摇滚乐,你应该努力.那么你想获得以下CSS GWT的好处:

• 没有字符串文字类名称引用
• 没有CSS命名空间冲突/污染
• 最小化CSS类(压缩选择器和属性)
• 编译器优化CSS规则(结合类似规则),排除未使用的规则
• 编译器时间检查CSS有效性和缺少类
• 没有外部CSS文件的堆
• 在远程模式下运行DevMode时没有问题(否则浏览器会提取远程CSS,而不是您正在处理的新CSS)

我发现最好的方法是使用UiBinder和UiBinder的Java类,所有这些都在一个地方.见下面的例子.根据我的经验,这将产生最强大,压缩,最快,最可靠的应用程序,并且不会添加其他文件.

一切都在一个地方:

• 在UiBinder中定义的CSS,使用它
• 在Java文件中定义的CSS接口,在这些接口中使用它们

窗口小部件

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>

我以前问过这个问题,请在这里查看.