• Aggiungere un prefisso alle classi con il nome dell'applicazione o dell'estensione per assicurarsi che non ci siano conflitti con altri CSS nel sistema.

• Associare la proprietà CustomClass al valore che attiva gli aggiornamenti visivi utilizzando i selettori CSS appropriati.

• Talvolta, il CSS può ignorare le definizioni di widget, tuttavia dipende anche da come la proprietà è stata definita nel widget. In caso di conflitti, utilizzare la selezione nidificata di padre/figlio nel CSS e la direttiva !important con cautela.

• Assicurarsi di utilizzare valori basati su percentuale per dimensioni o posizione. Gli attributi utili per il posizionamento sono Vertical-Align e Text-Align. Il contenitore Flexbox gestisce in modo efficiente le dimensioni e le posizioni degli elementi.

• Alcuni widget non supportano la nuova proprietà CustomClass, tuttavia è comunque possibile personalizzare il CSS. Un'opzione consiste nel contrassegnare un contenitore padre (layout/pannello) con una classe, quindi selezionare il div di destinazione nel CSS usando il selettore padre-figlio.

• La finestra di contenimento non cambia nella release successiva di Mashup Builder, pertanto applicare lo stile al div della finestra di contenimento.

• Mantenere il codice comune in un unico file CSS ed evitare duplicazioni del codice. Ad esempio, se si seleziona un elemento interno di un widget Ripetitore, posizionarlo in un file comune in modo da poter facilmente implementare l'aggiornamento, in caso di modifiche DOM.

• Selezionare il nome di una classe piuttosto che il tipo di elemento. Il nome di una classe rappresenta in genere una finalità di progettazione, mentre un elemento (tabella) può essere convertito in un tipo diverso (ad esempio, per migliorare le prestazioni).

• Quando si effettua la selezione in base al tipo di elemento, rivederne il contesto per assicurarsi che il codice sia valido. Ad esempio, se si seleziona un elemento del widget casella di testo, l'elemento input è probabilmente sicuro, mentre div è troppo generico.

• Rispettare il nome della classe di ThingWorx e la relativa finalità di progettazione. Ad esempio, se il nome della classe di ThingWorx è shadow, utilizzarlo per personalizzare solo l'ombra.

• Utilizzare la selezione figlio diretta (>) ove appropriato. Ciò ha lo scopo di evitare la condivisione di selezioni in tutti i figli ricorsivi. Il mashup può includere altri mashup (da ripetitori o mashup incorporati), quindi effettuare solo le selezioni necessarie. Esempio: il widget Pannello include un div OuterContainer, pertanto assicurarsi di selezionare il figlio diretto anziché tutti i div di questo tipo.