• Préfixez les classes avec le nom de l'application ou de l'extension pour éviter tout risque de conflit avec d'autres CSS de votre système.

• Liez la propriété CustomClass à la valeur qui déclenche les mises à jour visuelles en utilisant les sélecteurs CSS appropriés.

• Parfois, les CSS peuvent se substituer aux définitions de widget, mais cela dépend aussi de la façon dont la propriété a été définie dans le widget. En cas de conflit, utilisez la sélection imbriquée de parent/enfant dans la CSS ainsi que la directive !important avec précaution.

• Veillez à utiliser des valeurs en pourcentage pour les dimensions ou la position. Les attributs utiles pour le positionnement sont Vertical-Align et Text-Align. Le conteneur Flexbox gère la taille et la position des éléments de manière efficace.

• Certaines widgets ne prennent pas en charge la nouvelle propriété CustomClass, mais vous pouvez toujours personnaliser la CSS. Une solution consiste à marquer un conteneur parent (mise en page/panneau) avec une classe, puis à sélectionner la div cible dans la CSS en utilisant le sélecteur de parent-enfant.

• La boîte englobante ne change pas dans la nouvelle version du Mashup Builder, appliquez par conséquent le style sur la div de la boîte englobante.

• Conservez le code commun dans un seul et même fichier CSS et évitez les duplications de code. Par exemple, si vous sélectionnez un élément interne d'un widget Répéteur, placez-le dans un fichier commun afin de pouvoir facilement implémenter la mise à jour, en cas de modifications DOM.

• Sélectionnez un nom de classe plutôt qu'un type d'élément. Un nom de classe représente généralement une intention de conception, tandis qu'un élément (table) peut être converti en un type différent (par exemple, pour améliorer les performances).

• Lors de la sélection d'un type d'élément, examinez son contexte pour vous assurer que le code est viable. Par exemple, si vous sélectionnez un élément de widget de zone de texte, l'élément input est probablement fiable ; l'élément div est trop général.

• Tenez compte du nom de la classe ThingWorx et de son intention de conception. Par exemple, si le nom de la classe ThingWorx est shadow, utilisez-la uniquement pour personnaliser l'ombre.

• Utilisez la sélection directe de l'enfant (>) dans les cas appropriés, l'idée étant d'éviter toute extension de la sélection à tous les enfants récursifs. L'application composite peut inclure d'autres applications composites (avec des répéteurs ou applications composites contenues) ; par conséquent, sélectionnez uniquement ce qui est nécessaire. Exemple : le widget Panneau possède une div OuterContainer, veillez par conséquent à sélectionner l'enfant direct plutôt que de sélectionner toutes les div de ce type.