Question

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

理想情况下，他们会创建CSS文件，我们可以通过多次迭代轻松地集成到网站中，开发团队不必对这些文件进行任何操作（显然会有HTML或模板更改指向适当的课程。）

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

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

文档表明现代应用程序倾向于使用方法3和4，但是这些似乎对开发过程有侵入性，因为我们不希望每次迭代都不断更新CssResource接口（在方法3中））或者必须砍掉并拆分CSS文件，将它们内嵌到我们的ui.xml文件中（在方法4中）。

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

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

Answer 1

如果你的团队不熟悉HTML / CSS / JS＆amp; GWT / Java的。让我们假设你有摇滚乐，你应该努力。然后，您希望获得以下CSS GWT优势：

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

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

一切都在一个地方：

在UiBinder中定义的CSS，使用
在Java文件中定义的CSS接口，使用它们

的widget

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。

Answer 2

这里很难有“最佳实践”，因为这四种不同的方法在不同情况下运作良好。根据您使用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 CssResource / ClientBundel的东西以及通过

提供对UiBinder样式的编程访问）

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

GWT和CSS开发最佳实践

2 个答案: