GWT CSS 选择：使用哪个、何时以及为什么？答案

【问题标题】：GWT CSS choices: which to use, when and why?GWT CSS 选择：使用哪个、何时以及为什么？
【发布时间】：2012-11-06 11:45:10
【问题描述】：

到目前为止，我已经说明了 GWT 开发人员可以将 CSS 注入 Web 应用程序的四 (4) 个不同的地方：

在 HTML 主机页面中，您可以放置指向外部样式表的 HTML 链接，例如让 MyWebApp/war/hello_gwt.html 包含以下行：<link type="text/css" rel="stylesheet" href="mywebapp/webModule.css">
通过使用实现 ClientBundles 让您的应用可以访问绑定的 CssResource 子类
通过 UI Binder XML
您可以在 gwt.xml 文件中包含主题/样式，例如 <inherits name="com.google.gwt.user.theme.standard.Standard"/>

我对这四个中的每一个应该完成什么工作感到困惑。换句话说，这些“CSS 机制”如何协同工作，为 Web 应用程序提供所需的所有样式，或者它们只是完成同一件事的不同方式？它们在不同的场景中是否各有不同的优缺点？如果有，它们是什么？

我喜欢使用Layout 或LayoutPanel 来定位我的应用程序的主要显示区域，然后使用CSS 设置各个区域、容器等的样式的策略。所以它看起来像上面的第一种情况（ HTML 外部 CSS 链接）不是，因为我希望随着 UI 的发展为每个新小部件自定义 CSS。

我想我只是在尝试在 GWT-land 中的 CSS 选项之间进行选择时寻找一个试金石。提前致谢！

【问题讨论】：

标签： java css gwt

【解决方案1】：

我强烈建议不要在 Ui:Binder 中定义样式。这使得在整个应用程序中维护和确保样式一致性变得非常困难。最佳做法是将所有 CSS 保存在一个位置。

正如您所说，您可以使用外部 CSS 方法和 CssResource “自定义每个新小部件的样式”。使用外部文件，您只需使用该文件中的类名来设置样式。随着 UI 的发展，您可以添加新类或修改现有类。您也可以使用外部 CSS 文件轻松创建主题。

外部 CSS 和 CssResource 方法之间还有其他区别。

CSS 文件是一种更传统的方法。它更易于使用，也更易于 UI 设计人员使用。

另一方面，CssResource 在有许多开发人员的大型项目中更容易维护。它还提供了许多有用的功能，例如条件 CSS、混淆、运行时替换等。

【讨论】：

在哪里放置 CSS 声明很大程度上取决于用例。当你有一个明确定义的组件想要设置样式时，将 CSS 声明放在 Ui:Binder 模板中是完全有效的，以避免使你的主 CSS 文件膨胀。包含成千上万行的 CSS 文件很难维护。
@Makkes - 当您的样式在 XML 文件中硬编码时，如何为 iPad mini 等创建新主题或新 CSS？此外，一个设计良好的应用程序不会在 CSS 文件中包含成千上万行：这通常发生在开发人员为他们工作的所有内容添加自己的 CSS 类时，即使已经存在类似或相同的类。

【解决方案2】：

1. 和 3.（css 文件和 ui binder xml）是执行相同操作的不同机制。

如果您将样式放在 UI 活页夹中，它将仅在此 UI 活页夹中可见，因此您不能（轻松）将其重用于其他类。但是，这种方式可以更轻松地保持样式整洁，因为您可以在一个位置看到用于组件的所有样式。

如果您将样式放在 CSS 中，您可以为不同的组件重复使用样式，但是在处理小部件时需要编辑两个文件。

当然，您可以同时使用它们：UI 活页夹样式和“单独的 CSS 文件”。

4. 只是通知您使用哪种 GWT 预定义样式。 GWT 对所有小部件都有默认样式，并且此继承告诉您将在您的应用中使用哪种样式。

【讨论】：

哈！我做到了！谢谢，鲍里斯是对的，不幸的是，我现在不能编辑它，所以我会在这里重申并删除我的旧的：不 - uibinder ui:style 标签 not 与外部相同css。选项 2 和 3 相同 - UiBinder 样式会自动编译成CssResource，并从那里全部编译成您实际编译的 JS 文件。
我从来没有写过 1 和 3 是一样的。我写道，它们是将您的样式添加到自定义小部件的不同机制。