当我创建与GWT塞新项目，这对我产生了骨架工程。 在HTML文件中，有评论说：“考虑内联CSS减少请求的文件的数量”为什么我会考虑使用内联CSS？ 我艰难的CSS有单独的文件中没有内嵌减少了我的文件大小？ 是不是真的？
Answer 1:
答案在于，GWT的操作方式。 由于GWT只有每个模块加载一个页面加载内联缓存并没有真正发挥作用。
如果你只是想要的答案： 内联CSS减少了需要加载所有组成项目文件的TCP / IP连接数。 这可以给你可能有多个CSS文件，高延迟和其他网络条件，是不平凡的。 在我的工作中（州政府），你并不总是保证一个“宽管”。
GWT（或至少GWT孵化）具有用于内联的CSS的优化与信息和布局分离结合的机制。
输入ImmutableResources和StyleInjector。 这两件事情（组合）导致的方式来加载不可变（编译后的时间）资源。
要使用这些，首先下载GWT的孵化器。 然后，所需的库添加到您的module.gwt.xml
<!-- immutable resources and injecting styles -->
<inherits name="com.google.gwt.libideas.ImmutableResources" />
<inherits name="com.google.gwt.libideas.StyleInjector" />
一旦做到这一点，创建CSS文件的代码资源。 我把我的像源路径“org.project.client.resources。*”。 header.css，body.css，table.css：可以在单独的领域，如保持这些。 发疯，真的让事情作为独立的，只要你想。 您的文件路径应该是这个样子“/src/org/project/client/resources/header.css”。
现在，创建CSS接口。 现在，有一些比较特殊的东西，你可以用这个做一下这里 。 不过，我刚刚已经有基本的一个。
import com.google.gwt.libideas.resources.client.CssResource;
public interface Css extends CssResource {
}
现在，你有你的CssResource类（你可以有不同的），你需要创建一个包装了所有的CSS文件的不可变资源包。
import com.google.gwt.core.client.GWT;
import com.google.gwt.libideas.resources.client.ImmutableResourceBundle;
public interface ResourceBundle extends ImmutableResourceBundle {
public static final ResourceBundle INSTANCE = GWT.create(ResourceBundle.class);
/*
* =============================
* CSS
* =============================
*/
@Resource("org/project/client/resources/header.css")
public Css headerCss();
@Resource("org/project/client/resources/body.css")
public Css bodyCss();
}
这将在编译时，创建链接到不可改变的CSS资源。 现在，我们需要把 （插入）的CSS资源到该模块莫名其妙。 这就是StyleInjector用武之地。
我把类似下面的代码到我的入口点的“onModuleLoad”的方法。
StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.headerCss().getText());
StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.bodyCss().getText());
可能有其他的方法来完成在GWT的更多的东西比我已经在这里同样的效果，但CssResource的功率可以利用。 例如：在我的项目之一，我需要在CSS中的小改变让IE和Firefox渲染什么，我认为是corretly。 我在我的global.css中，像这样两个小的浏览器的特定部分：
/* fix ie floating quirk */
@if user.agent ie6 ie7 ie8 {
#someElement {
top: -21px;
right: 5px;
}
}
/* fix firefox floating quirk */
@if user.agent ff gecko mozilla firefox Gecko Mozilla moz gecko1_8 {
#someElement {
top: -14px;
}
}
能够离开这个逻辑了我的JavaScript / Java的的是美丽的。 还有一个小小的优化在这里，因为GWT只会做注射需要它的浏览器。 （基于浏览器的延迟绑定是如何大量的GWT工作上的事情。）
因此，提供内嵌CSS的机制还提供其他好处，同时保持CSS的分离。
不去爱的种种？
Answer 2:
基本上，它需要时间来打开一个TCP连接，并请求文件，因此它可以减少时间，它需要加载的所有文件，页面的数量。
另外，如果你要加载该文件，无论如何，最终这将是带宽的量相同。 最好是有转移比减少文件大小减少的时间。
Answer 3:
内联CSS有一定的好处，因为它在规则外部样式表始终-by necessity-采用了最新的CSS版本。 向下的一面是，它显然是特定的页面（等稀释CSS意图从标记单独介绍），并增加过的所有文件的大小（因为CSS是不缓存，它的重新加载每次和自从我去年读了关于直列CSS）每一页-unless东西已经改变。
外部样式表有被缓存的好处（因此需要更新或URI的变化只装），增加至初始下载时间/文件大小，但随后，不需要重新加载（除非必要）。
此外，当然，引用样式表的所有其他网页不会，如果有一个本地副本下载的CSS文件。 （我不认为它很重要，如果页面上的一个或多个域，只要URI始终指的是相同的文件，但我可能是错的。）
Answer 4:
然而，大多数时候这个速度下降将难以察觉，这是一个很好的做法，从CSS独立的HTML。 因此，只有这样做，如果它来优化你的页面的每一个部分是非常重要的。 另外，还要考虑没有直接内联CSS，而是使用某种对象/相似，将生成CSS在线为您服务。 这样的话，你仍然可以保持CSS在一个单独的文件和内嵌包括它需要它的网页（大部分不会）。
文章来源: GWT Html file with CSS
