Question

我们最近开始了一个针对.NET4移动网站演示的小型项目; jquery-mobile被明智地选择负责客户端功能和UI交互。

请求的品牌与使用ThemeRoller构建的任何东西都有很大不同，因为它超出了基本的颜色变化;这就是（我认为）我即将走向死胡同。

目前我的理解是，几乎每个交互式对象上的元素表示和功能之间几乎没有分离，至少对于开箱即用的库而言。

考虑以下情况：我们已经完成了灰色渐变标签，我和我的行政决定（是的，右），想要制作整洁的粉红色方形（不是真的，但这应该让我的问题更具吸引力：）

我通常会添加一个css规则，例如 .tab-container .tab {background-color：pink;} 并完成它;但是，如果将data-role属性应用于包含这些选项卡的html元素，则会在运行时在客户端上发生以下情况（来自jquery-ui ... js）：

this.element.addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" );
this.list.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" );
this.lis.addClass( "ui-state-default ui-corner-top" );
this.panels.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" );

...而且，渲染时，我会得到我的粉红色标签，但默认情况下会显示所有样式。说，我真的希望那些圆角消失;开箱即用我有这些选择：

将“ui-corner-none”类添加到元素中 - 不好的是，必须为每个实例手动完成此操作，并且对于我想要覆盖的每个属性，使得此方法无法维护;这也会轻微膨胀css等等。
进入jquery.ui ... css并删除“ui-corner-all”声明 - 因为这会影响以前依赖于该类的所有内容，所以很糟糕;此类也将继续在运行时添加，但没有明显的效果
进入jquery-ui ... js并从上面引用的部分中删除类引用 - 修改库本身的不良做法，如果我想让角落回来怎么办？可能无法维持，这将导致不分离的问题
进入main.css并添加语义类覆盖上面的jquery样式 - 固体方法除了每个属性都需要被覆盖后快速膨胀到 .tab-container .tab {background-color：pink; -moz-border-radius：0; -webkit-border-radius：0; border-radius：0;} 等。

目前倾向于删除大多数语义不可知的样式 - 我相信迷你类很糟糕，并且具有与内联样式相似的可维护性问题。

非常想尝试至少为某些元素引入品牌特定的小部件（例如＆lt; ul data-role =“awesomebrand-customtabs”＆gt; ），但这需要很多更多的努力，超出了这个问题的范围。

我确信这里有一些显而易见的东西 - 请引导我吧！

Answer 1

你是对的，因为jQuery Mobile使用类的方式感觉很像它离内联样式只有一步之遥。更改jQuery Mobile的JS的问题在于它会破坏您的升级路径。

这有点难看，但我们的好朋友明星选择器和!important呢？例如，为整个应用程序提供平面，方形外观，可能相当简单：

*{ 
  border-radius: 0 !important;
  box-shadow: none !important; 
  text-shadow: important!; 
  background-gradient: !important; 
  /* etc... */
}

如果星形选择器过于苛刻而无法使用，您可以始终指定要覆盖的所有内容作为逗号分隔的选择器（.ui-tabs-panel, .ui-tabs-nav）。没有明显的CSS膨胀，干净的升级路径，也没有手动争吵的类。

重新关注jquery-mobile网站的问题分离

1 个答案: