• Prefix the classes with the app or extension name to assure that there is no conflict with other CSS in your system.

• Bind the CustomClass property to the value that triggers visual updates by using the appropriate CSS selectors.

• At times, CSS can override widget definitions, however, it also depends on how the property was defined in the widget. In case of conflicts, use nested selection of parent/child in the CSS as well as !important directive with caution.

• Make sure you use percentage based values for dimensions or position. The useful attributes for positioning are Vertical-Align and Text-Align. Flex box container manages items size and positions efficiently.

• Some widgets do not support the new CustomClass property, but we can still customize the CSS. One option is to mark a parent container (layout/panel) with a class, and then select target div in the CSS using parent-child selector.

• Bounding box does not change in the next release of the mashup builder so apply style to the bounding box div.

• Keep common code in a single CSS file and avoid code duplications. For example, if you select an internal element of a Repeater widget, place it in a common file so that you can easily implement the update, in case of DOM changes.

• Select a class name vs. element type. A class name typically represents a design intent whereas an element (table) might be converted to a different type (for example, to improve performances).

• When selecting by element type, review its context to assure that the code is viable. For example, if you select a text box widget element, the input element is probably safe; div is too general.

• Honor the ThingWorx class name and its design intent. For example, if the ThingWorx class name is: shadow-use it to customize the shadow only.

• Use direct child selection (>) when appropriate. This is done to avoid “leaking” selections to all recursive children. The mashup might include other mashups (by repeaters or contained mashups), so select only what is needed. Example: The Panel widget has an OuterContainer div so make sure you select the direct child rather than selecting all divs of this type.