• クラスにはアプリケーションまたは拡張機能名のプレフィックスを付けて、システム内のほかの CSS と競合しないようにします。

• 適切な CSS セレクタを使用して、視覚的な更新をトリガーする値に CustomClass プロパティをバインドします。

• CSS がウィジェットの定義をオーバーライドすることがありますが、それはウィジェットでのプロパティの定義方法にもよります。競合が発生した場合には、CSS 内の親/子のネストされた選択と !important ディレクティブを注意して使用してください。

• 寸法や位置には、割合 (パーセント) に基づく値を必ず使用します。配置に役立つ属性は、Vertical-Align と Text-Align です。Flex ボックスコンテナは、アイテムのサイズと位置を効率的に管理します。

• 一部のウィジェットでは新しい CustomClass プロパティがサポートされていませんが、CSS はカスタマイズできます。1 つのオプションは、クラスを使用して親コンテナ (レイアウト/パネル) をマークし、親子セレクタを使用して CSS 内のターゲット div を選択することです。

• 次のリリースの Mashup Builder では境界ボックスは変更されないので、境界ボックス div にスタイルを適用します。

• 1 つの CSS ファイルに共通のコードを保持し、コードの重複を回避します。たとえば、「リピーター」ウィジェットの内部エレメントを選択して、共通ファイルに配置すると、DOM の変更時に更新を簡単に実装できます。

• エレメントタイプではなく、クラス名を選択します。一般的に、クラス名は設計意図を表しますが、エレメント (テーブル) は (パフォーマンス向上などの目的で) 別のタイプに変換される可能性があります。

• エレメントタイプを選択する場合は、コンテキストを見直してコードが実行可能であることを確認します。たとえば、テキストボックスウィジェットのエレメントを選択した場合、input エレメントはおそらく安全ですが、div が一般的すぎます。

• ThingWorx クラス名とその設計意図を優先します。たとえば、ThingWorx クラス名が shadow である場合は、シャドウのカスタマイズのみに使用します。

• 該当する場合は、直接の子選択 (>) を使用します。これは、すべての再帰的な子に対する選択の "共有" を防ぐための措置です。マッシュアップには (リピーターや組み込みマッシュアップによって) ほかのマッシュアップが含まれることがあるので、必要なもののみを選択します。例: パネルウィジェットには OuterContainer div があるので、このタイプのすべての div を選択するのではなく、必ず直接の子を選択してください。