用小工具打包css

我想打包一个小工具，很容易包含在任意项目中。我不想要求用户链接到我的个人创建的样式表在他们的主页 - 我只是希望CSS在他们使用我的代码时被神奇地注入。用小工具打包css

据我所知，CssResource可以通过一些方式实现这个梦想，但在搜索完文档后，我还没有发现任何对自然类型选择器的引用。例如，我想在我的小部件中设置<tr>的样式，而不必为每个类添加类名称。

GWT可以实现吗？ GWT自己的小部件都非常完美的风格，但似乎他们已经添加了一个风格类到DOM中的每一个元素！

2011-04-01 Riley Lark

你在正确的轨道上 - 一个CssResource或UiBinder的内嵌<ui:style>将实现你正在寻找。与类型，而不是类问候的造型元素也一定能做到：

<ui:UiBinder> 
    <ui:style> 
    .myTable tr { 
     color: red; 
    } 
    </ui:style> 

    <table class="{style.myTable}"> 
    <tr><td>A row!</td></tr> 
    </table> 
</ui:UiBinder>

GWT，但是，有喜欢过派生选择明确的类名称的原因：如果你有上面的样式，例如，每浏览器呈现一个<tr>元素，它必须遍历DOM并访问该元素的所有祖先，以查看它们中的任何一个是否具有类.myTable。如果您的应用程序使用了很多<tr>元素（这里<div>将是一个更好的示例），其中大多数元素没有.myTable祖先，它会导致渲染性能明显下降。

来源

2011-04-01 19:47:18

谢谢 - 我没有意识到，它足够聪明，拿起这些后代选择器。棒极了！我会自己测试一下，但我有两个快速跟进：1：我可以指定多个定义，例如： '.myTable tr {}'AND'.myTable div {}'？ 2：我可以在相同的定义中指定多个将被模糊的选择器，例如： '.myTable .myRow {}'应用于'

'？ – 2011-04-01 20:08:42

是的，这两个都可以工作。 '.myRow'后代选择器（很有可能）将不再需要，因为应用程序中的其他任何东西都不会有相同的类名称。 – 2011-04-01 20:13:00

想到GWT.create（）会经历很多帮助并用一些独特的.SDFJSDFH代替每个.myCustomName。我想现在很明显，但我只是在想这一切都是错误的。感谢您的帮助！另外：如果我有，我仍然需要选择器，比如，.tableOfStyle1 .row {}和.tableOfStyle2 .row {}，我想。 – 2011-04-01 20:20:50

我想，我会用UiBinder的，并且只给最外层的元素的类名，如：

<ui:style> 
    .outer tr { 
     ... 
    } 
</ui:style> 
<div class="{style.outer}"> 
    ... 
     <tr>...</tr> 
    ... 
</div>

现在你不必类分配给每个TR - 你只需要使用选择器“.outer tr”，其仅适用于<tr> s内某些标记了类属性{style.outer}的元素（顺便说一句，不一定是<div>）。当然，同样的原则也可以在没有UiBinder的情况下运行。

来源

2011-04-01 19:41:25

谢谢！这是完全有道理的，我只是不知道GWT是否足够聪明，只是混淆了''外部'而剩下的其余部分。聪明的东西！ – 2011-04-01 20:10:29

好吧我没有真正理解整个问题，也许仍然不这样做，但我认为你需要一种方法来从特异性“防弹CSS” - 我看到其他答案后立即获得CSS位

为了确保网站（不是你的）CSS尽可能快地失败，无论他们的规则有多特定（加权），都会向所有内容添加独特的类名称（有点矛盾是CSS术语，但是heyho）

但是，你可以让你的小部件CSS完全独一无二，也就是说，它不能被站点CSS取代，无论它们的选择器中有多少个ID，没有太多东西，也没有特别的分类g

例如#mywidget div {}可能很容易被站点CSS取代#wrapper #content div {}将会这样做 - 你的div也是这两个ID的后代，并且由于它们的规则有2个ID与你的ID相对应，你的CSS将会丢失 - 不可能猜测站点的每个排列CSS所以最简单的事情就是增加所有这些“额外”的班，为什么YUI和蓝图是因为它们是

但是，如果你写你的CSS：#mywidget>div {}你可能会一直赢，因为从来没有在他们的CSS会他们正在瞄准的div可能是你的widget ID的直接子（除非他们选择定制你的，他们也可以用'class everything'方法来做），

这样就可以防止你的CSS没有添加任何类。我假设你的小部件已经有一个独特的iD包装？那么如果你还没有一个内部div包装器，那么添加一个，它不需要有一个类，但是给它一个将会在这个技术上增加一层防弹。

然后在#mywidget>div.myclass的前面加上所有规则的前缀，例如， #mywidget>div.myclass td {} - 网站拥有自己的规则，无论权重有多重（选择器中的很多ID和类都会使选择器的权重更大），只要它们无法匹配特定的组合，它们就会失败 - 因此您的tr可以从站点CSS接管安全;）

添加一个div或类，并搜索并替换您的CSS，以添加前缀到一切..至于如何打包我不知道

来源

2011-04-01 20:25:03 clairesuzy

GWT自动解决了这个问题，因为它混淆了UiBinder和CssResources中的类名（这是关于GWT真正伟大的事情之一在我看来。） – 2011-04-01 20:32:00

啊谢谢，这很聪明 - 我会知道在哪里看看我什么时候需要 - 看到我说我不明白，我只知道为什么需要完成这项工作的逻辑，并且避免使用“class everything”方法的任何方法对我来说都足够了;） – clairesuzy 2011-04-01 20:39:45

用小工具打包css

回答

相关问题