• Anteponga a las clases el prefijo del nombre de aplicación o extensión para garantizar que no haya ningún conflicto con otras CSS del sistema.

• Enlace la propiedad CustomClass con el valor que activa las actualizaciones visuales con los selectores de CSS adecuados.

• A veces, la CSS puede sustituir las definiciones de widget; sin embargo, también depende de cómo se ha definido la propiedad en el widget. En caso de conflictos, utilice la selección anidada de padre/hijo en la CSS, así como la directiva !important con precaución.

• Asegúrese de utilizar valores basados en porcentaje para las cotas o la posición. Los atributos útiles para el posicionamiento son Vertical-Align y Text-Align. El contenedor de cuadro flexible permite gestionar el tamaño de los elementos y colocarlos de forma eficaz.

• Algunos widgets no soportan la propiedad CustomClass, pero aún se puede personalizar la CSS. Una opción es marcar un contenedor padre (esquema o panel) con una clase y, a continuación, seleccionar el elemento div de destino en la CSS mediante el selector padre-hijo.

• La caja no cambia en la siguiente versión de Mashup Builder, por lo que se puede aplicar estilo al elemento div de la caja.

• Conserve el código común en un único fichero CSS y evite duplicados de código. Por ejemplo, si se selecciona un elemento interno de un widget Repetidor, colóquelo en un fichero común para que se pueda implementar con facilidad la actualización, en caso de cambios de DOM.

• Seleccione un nombre de clase frente a un tipo de elemento. Normalmente, un nombre de clase representa una intención de diseño, mientras que un elemento (tabla) se puede convertir a un tipo diferente (por ejemplo, para mejorar el rendimiento).

• Al seleccionar por tipo de elemento, revise su contexto para garantizar que el código sea viable. Por ejemplo, si se selecciona un elemento de widget de cuadro de texto, probablemente el elemento input sea seguro; el elemento div es demasiado general.

• Cumpla con el nombre de clase de ThingWorx y su intención de diseño. Por ejemplo, si el nombre de clase de ThingWorx es shadow, se debe utilizar solo para personalizar la sombra.

• Utilice la selección hijo directa (>) cuando sea adecuado. De este modo, se evita el uso compartido de selecciones con todos los hijos recurrentes. El mashup podría incluir otros mashups (por repetidores o mashups contenidos). Por lo tanto, seleccione solo lo que se necesita. Ejemplo: el widget de panel tiene un elemento div OuterContainer. Por lo tanto, asegúrese de seleccionar el hijo directo en lugar de seleccionar todos los elementos div de este tipo.