jquery-mobileサイトの再構築についての懸念の分離

Question

最近、.NET4のモバイルサイトデモ用の小さなプロジェクトが開始されました。 jquery-mobileは、クライアント側の機能とUIのやりとりを担当するように選択されています。

要求されたブランドは、基本的な色の変化を超えているため、ThemeRollerで構築できるものとはかなり異なるものになります。これはどこかで（私が思う）私は打ち負かすつもりです。

私は、現時点では、ほとんどすべてのインタラクティブなオブジェクトに対して、少なくともデフォルトのライブラリを使用して、要素の表示と機能を分けることは事実上できません。

以下のシナリオを考えてみましょう：私は私の執行決定で（はい、そうです）、きれいなピンク色の正方形にしたいと思っています。関与する:)

通常、.tab-container .tab {background-color：pink;}のようなCSSルールを追加してください。

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"); 

...と、レンダリングされたとき、私は：しかし、次は（JS ... jqueryの-UIから）実行時に、クライアント上で起こるこれらのタブを含むHTML要素にデータ-role属性のアプリケーションを与えられましたピンクのタブが表示されますが、デフォルトではすべてのスタイルが使用されます。言う、私は本当にそれらの丸いコーナーが消えて欲しいです。私は、これらのオプションを持っている箱から出し：

• 要素に「UI-コーナーなし」クラスを追加 - 悪いこれは手動で、私はすべてのインスタンスのために、また、すべてのプロパティのために行わなければならないことを考えるとこのアプローチを維持不能にすることを無効にしたい。これは少しでもCSSなどを膨らませるでしょう。
• jquery.ui ... cssに入り、"ui-corner-all"宣言を削除してください。これは以前はクラスに依存しているすべてのものに影響を与えます。ライブラリ自体を変更する悪い習慣、私が欲しい場合はどのような - 目に見える効果なし
• はJS ... jqueryの-UIに入り、上記の引用した部分からクラス参照を削除するが、またクラスが実行時に追加されていきますコーナーバック？おそらくメンテナンス不可能であることも懸念の非分離に貢献するだろう
• main.cssに入り、上記のjqueryスタイリングをオーバーライドするセマンティッククラスを追加する。ただし、すべてのプロパティをすぐにオーバーライドして.tab-container .tab {背景色：ピンク; -mozボーダー半径：0; -webkitボーダー半径：0;ボーダー半径：0;}等

現在除去意味的にとらわれないスタイルの大部分を有する傾い - 私はミニクラスが悪く、インライン・スタイリングと同様の保守性の問題があると信じています。かなりいくつかの要素のための少なくとも導入、ブランド固有のウィジェット持つに見えるように誘惑

（すなわち< ULデータ-役割=「awesomebrand-customtabs」を>）が、それは多くの労力を必要とする外にあるだろうこの質問の対象範囲

私は明らかに何かがここでは見落とされていると確信している - 私は右操縦してください！

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の膨らみ、クリーンなアップグレードパス、および手作業で悩まされるクラスはありません。