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模板中使用内联样式表。

文档建议现代应用程序倾向于使用第三和第四种方法，但这些方法似乎对开发过程具有侵入性，因为我们不希望在每次迭代中都必须更新CssResource接口以反映CSS的更改（在第三种方法中），或者必须将CSS文件分割并嵌入我们的ui.xml文件中（在第四种方法中）。

我们正在考虑使用第二种方法，并手动编写CSS类。这将使我们能够轻松地添加CSS文件更新，而不必让开发人员动手。我们将失去混淆，并需要一些工作来管理CSS名称的更改，但这并不比其他方法更难。是否有其他要考虑的因素？在涉及外部CSS设计师的GWT应用程序构建中是否有最佳实践？

- Numbat

Answer 1

如果您的团队不熟悉HTML/CSS/JS和GWT/Java，可能会出现问题。假设您有优秀的团队，这是您应该努力实现的目标。然后，您想获得以下CSS GWT的好处：

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

我发现使用UiBinder和该UiBinder的Java类可以实现最佳效果，所有内容都在一个地方。请参见下面的示例。这将根据我的经验产生最强大、压缩、最快、最可靠的应用程序，并且不添加任何其他文件。

一切都在一个地方：

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

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>

我之前问过这个问题，可以在这里查看。

- Joseph Lust

---

感谢您的回复、代码示例和链接到其他问题，希望您自己的项目进展顺利。正如我在另一个回复中提到的，我认为在项目的这个阶段，考虑到UI/CSS和GWT/Java团队成员的经验和熟悉程度，我们将采用较简单的方法，但确保我们的CSS输出可以在以后被切片并转换为使用UiBinder或CssResource。 - Numbat

Answer 2

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

如果您的团队由A）仅Java和B）仅CSS / HTML组成，则选项1或2可行。但是，如果您有一个了解GWT和CSS / HTML / XML（即：UiBinder）集成点的UX角色。此人可能了解如何设置UiBinder以最大化提供给仅Java角色的功能。

UiBinder + ClientBundle会为您的项目增加额外的复杂性。这带来了许多优势，但如果您的团队不适合，您可能会造成太多伤害。

“最佳实践”可能包括组织一个主CSS文件（通过ClientBundle或选项1或2使用），以一种使整个应用程序具有一致性的方式进行组织，同时在UiBinders中使用特定的样式以进行本地设置。

如果您想全力以赴，我认为您应该充分利用UiBinder和CssResource / ClientBundle（也可以使用Externs CssResource / ClientBundel），并通过编程方式访问UiBinder样式。

使用外部内容进行重用和添加一致性。

- Ashton Thomas

---

感谢Ashton，目前在我们的项目中，为了保持快速迭代和让开发人员和CSS人员逐渐跨领域技能提升，我们决定采用第二种方法，但保留与我们的CSS合作，在以后可以随时切换到CssResource的可能性。 - Numbat