• Verwenden Sie den Anwendungs- oder Erweiterungsnamen als Präfix für die Klassen, um sicherzustellen, dass kein Konflikt mit anderen CSS in Ihrem System besteht.

• Binden Sie die Eigenschaft CustomClass mithilfe der entsprechenden CSS-Auswahl an den Wert, der visuelle Aktualisierungen auslöst.

• Manchmal kann ein CSS Widget-Definitionen überschreiben, dies hängt jedoch auch davon ab, wie die Eigenschaft im Widget definiert wurde. Verwenden Sie im Falle von Konflikten die verschachtelte Auswahl von Eltern/Kindern im CSS sowie die Anweisung !important mit Bedacht.

• Stellen Sie sicher, dass Sie prozentbasierte Werte für Bemaßungen oder Position verwenden. Die nützlichen Attribute für die Positionierung sind Vertical-Align und Text-Align. Der Flexbox-Container verwaltet Elementgröße und -positionen effizient.

• Einige Widgets unterstützen die neue Eigenschaft CustomClass nicht, aber das CSS kann weiterhin angepasst werden. Eine Option ist, einen Eltern-Container (Layout/Fensterbereich) mit einer Klasse zu markieren und dann im CSS unter Verwendung der Eltern-/Kind-Auswahl ein div-Zielelement auszuwählen.

• Der Rahmen ändert sich nicht in der nächsten Version des Mashup Builder, wenden Sie den Stil daher auf das Rahmen-div-Element an.

• Speichern Sie den allgemeinen Code in einer einzelnen CSS-Datei, und vermeiden Sie Codeduplikate. Beispiel: Wenn Sie ein internes Element des Widgets Repeater auswählen, platzieren Sie es in einer allgemeinen Datei, sodass Sie die Aktualisierung im Falle von DOM-Änderungen problemlos implementieren können.

• Wählen Sie einen Klassennamen oder einen Elementtyp aus. Ein Klassenname stellt in der Regel eine Konstruktionsabsicht dar, während ein Element (Tabelle) in einen anderen Typ konvertiert werden kann (z.B. zur Verbesserung der Leistung).

• Prüfen Sie bei der Auswahl nach Elementtyp den Kontext, um sicherzustellen, dass der Code sinnvoll ist. Beispiel: Wenn Sie ein Textfeld-Widget-Element auswählen, ist das Element input wahrscheinlich sinnvoll; div ist zu allgemein.

• Berücksichtigen Sie den ThingWorx Klassennamen und seine Konstruktionsabsicht. Beispiel: Wenn der ThingWorx Klassenname shadow ist, verwenden sie ihn, um nur den Schatten anzupassen.

• Verwenden Sie bei Bedarf die direkte Kindauswahl (>). Dies erfolgt, um eine "Gemeinsam benutzt mit"-Auswahl für alle rekursiven Kinder zu vermeiden. Das Mashup enthält möglicherweise andere Mashups (nach Repeatern oder enthaltenen Mashups), wählen Sie also nur aus, was erforderlich ist. Beispiel: Das Widget "Fensterbereich" hat ein div-Element OuterContainer. Stellen Sie also sicher, dass Sie das direkte Kind auswählen, statt alle div-Elemente dieses Typs.