Wicket页面和模板中的小CSS替换

多年来，我一直以这样的方式开发Wicket页面： 当新的、小的页面标记（html）包含小的CSS片段时<代码>本地css 当设计发生动态变化时，方法舒适，是一体式的

当页面增长时，提取css块以分离Wicket资源。可以更好地缓存在浏览器中（以受控方式）等

现在，我需要有可选的颜色，例如按钮（链接与按钮CSS），一个非活动按钮。Wicket文档准备用于替换资源（设计用于替换的类）`

我想对页面标记中的年轻CSS片段进行类似的替换，main-Wicket传统将其用作常量。假设当截取标记并替换时，没有人会批评

该应用程序适用于企业内部网中的工作人员，与大型媒体门户网站没有竞争优势。我想建立“皮肤”的概念，但只在小范围内。只有很少的基本颜色，字体大小在3个地方，仅此而已。色彩不伤眼睛，工作舒适

我希望（将来）有2-3张，不超过4张带有颜色/字体集的皮肤。没有人会测试“当我们提供的所有字体都大3倍时，要做什么”，字体范围仅为+/-20%。功能“重置为制造设置”是基础

问题：在Wicket中用两个位置（html和css）替换是政治正确的吗？ 一些技术上的想法？ 可能存在现成的库，用于保存会话参数（用于用户）或全局参数（用于所有用户）

定制将有移动的小“小工具”面板（像Portlet但更轻），左边框/右边框或隐藏，仅此而已

---

顺便说一句，我从来都不是一个图形，但是我的CSS技能在不断提高。只需在页面或页面中的组件/行为中使用：

@Override public void renderHead(IHeaderResponse response) {
    super.renderHead(response);
    response.render(CssHeaderItem.forCss(yourDynamicCssAsString, "some-unique-id"));
}

---

如果您的应用程序是SPA，那么我会将不同的类提取到单独的CSS文件中，然后有条件地将它们加载到

页面
的
renderHead（）

例如，我们这样做是为了根据浏览器有条件地加载js：

   public static JavaScriptHeaderItem getJqueryNumericJsHeaderItem() {
      ClientProperties browser = WebSession.get().getClientInfo().getProperties();
      if (browser.isBrowserInternetExplorer() && browser.getBrowserVersionMajor() <= 9) {
         return JavaScriptHeaderItem.forReference(jqNumericReference("numeric.ie8.js"));
      }
      if (browser.isBrowserInternetExplorer() && browser.getBrowserVersionMajor() >= 10) {
         return JavaScriptHeaderItem.forReference(jqNumericReference("numeric.ie11.js"));
      }
      return JavaScriptHeaderItem.forReference(jqNumericReference("numeric.js"));
   }

然后在CSS中：

.skinA .button{
 color: red;
 font-size: 20px;
}

.skinB .button{
 color: blue;
 font-size: 30px;
}

那么你就没有条件CSS加载了。只需有条件地将一个CSS类添加到
 是的，我使用这种技术，在“大的，旧的”页面中渲染广告。感谢您的想法如何在“小，原型”中替换感谢这两个答案。顺便说一句，现在我了解了更好的细微差别：同名的新css和同名的新css在浏览器缓存中的存在方式不同。我的第一个想法是为用户提供长css缓存（一个类似web会话的长会话，但长缓存也可以）。但现在我明白了，有时候CSS更改后更高的动态性更好（用户感觉更改是下一次刷新或立即更新）将波兰语言环境上传到Wicket base的过程是什么？我的问题被删除了，可能在形式上是可以的，但完全没有意义，要么在处将补丁附加到票证，要么在处发送拉取请求。
  WebMarkupContainer body = new WebMarkupContainer("bodyElement") {
     @Override
     protected void onConfigure() {
        super.onConfigure();
        add(AttributeModifier.replace("class", getSkinBasedOnCondition()));
     }
  };

.skinA .button{
 color: red;
 font-size: 20px;
}

.skinB .button{
 color: blue;
 font-size: 30px;
}