• 클래스에 응용 프로그램 또는 확장 이름을 접두사로 붙여 시스템의 다른 CSS와 충돌되지 않도록 합니다.

• 적절한 CSS 선택기를 사용하여 CustomClass 속성을 시각적 업데이트를 트리거하는 값에 바인딩합니다.

• CSS가 위젯 정의를 재정의할 수도 있지만 이는 위젯에서 속성이 정의된 방식에 따라 달라집니다. 충돌이 있는 경우 CSS에서 상위/하위의 중첩 선택과 !important 지시문을 주의하여 사용하십시오.

• 치수 또는 위치에 대해 백분율 기반의 값을 사용해야 합니다. 포지셔닝에 유용한 속성은 Vertical-Align 및 Text-Align입니다. 유연 상자 컨테이너는 항목 크기와 위치를 효율적으로 관리합니다.

• 일부 위젯에서 CustomClass 속성을 지원하지 않지만 계속해서 CSS를 사용자 정의할 수 있습니다. 한 가지 옵션은 클래스로 상위 컨테이너(레이아웃/패널)를 표시한 다음 상위-하위 선택기를 사용하여 CSS에서 대상 div를 선택하는 것입니다.

• 경계 상자는 Mashup Builder의 다음 릴리즈에서 변경되지 않으므로 경계 상자 div에 스타일을 적용합니다.

• 공통 코드를 단일 CSS 파일에 유지하고 코드 중복을 방지합니다. 예를 들어, 반복기 위젯의 내부 요소를 선택할 경우 DOM이 변경될 때 업데이트를 쉽게 구현할 수 있도록 이러한 요소를 공통 파일에 배치합니다.

• 클래스 이름과 요소 유형을 비교해서 선택합니다. 클래스 이름은 일반적으로 설계 의도를 나타내는 반면 요소(테이블)는 성능 향상 등을 위해 다른 유형으로 변환될 수 있습니다.

• 요소 유형별로 선택할 때 해당 컨텍스트를 검토하여 코드가 실행 가능하도록 합니다. 예를 들어, 텍스트 상자 위젯 요소를 선택하는 경우 input 요소를 선택하면 적합할 가능성이 높습니다. div는 너무 일반적입니다.

• ThingWorx 클래스 이름과 해당 설계 의도를 준수합니다. 예를 들어, ThingWorx 클래스 이름이 shadow인 경우 이를 음영만 사용자 정의하는 데 사용합니다.

• 해당되는 경우 직접 하위 선택(>)을 사용합니다. 이는 모든 반복 하위에 대한 선택이 "노출"되는 것을 방지하기 위해 수행됩니다. 매쉬업은 반복기 또는 포함된 매쉬업을 통해 다른 매쉬업을 포함할 수 있으므로 필요한 항목만 선택할 수 있습니다. 예: 패널 위젯에는 OuterContainer div가 있으므로 이 유형의 모든 div를 선택하는 대신 직접 하위를 선택해야 합니다.