所有內建的網站元件都共用相似的 CSS 類別結構。
每個元件的最外層 <div> 元素會套用下列三個 CSS 類別：
scs-component scs-type design-style
type 是元件類型 (例如 image、gallery 或 divider)。design-style 是為元件選擇的樣式類別，如主題檔案中所定義。
主題樣式基本資訊
主題的 design.json 檔案會列出可套用至每一種元件類型 (例如 button 或 image) 的所有樣式 (frame、shadow、highlighted 等)。每一種樣式都有顯示名稱和類別名稱。顯示名稱會顯示在設定值面板的樣式頁籤上。類別名稱會參照主題之 design.css 檔案中的 CSS 選取器。例如，button 元件的項目如下：
"scs-button": {
"styles": [{
"name": "COMP_STYLE_ALTA_SMALL",
"class": "scs-button-default-style"
},
{
"name": "COMP_STYLE_ALTA_LARGE",
"class": "scs-button-style-2"
},
{
"name": "COMP_STYLE_SIMPLE",
"class": "scs-button-style-3"
}
]
},
內建元件的名稱會經過轉譯，因此您會看到一個可從資源組合取得樣式名稱的索引鍵。如果您將 button 元件新增至頁面，然後在設定值 > 樣式面板中選擇簡單樣式，design.json 檔案就會將顯示名稱簡單 (索引鍵為 COMP_STYLE_SIMPLE) 與類別名稱 scs-button-style-3 建立關聯。button 將以下列類別呈現：
scs-component scs-button scs-button-style-3
如果沒有為指定元件選擇任何樣式，則會使用預設樣式 scs-type-default-style。在上述範例中，按鈕將以下列類別呈現：
scs-component scs-button scs-button-default-style
scs-component-content 樣式
針對每個內建元件，在先前提到的 scs-component <div> 內，都有一個含有 scs-component-content CSS 類別的 content <div>。換句話說，就是：
scs-component scs-type design-style scs-component-content
在 design.css 檔案中，scs-component-content 類別通常用來設定包圍元件的「方塊」樣式 (例如，使用框線或陰影)。
值得注意的是，在內建的 comp.css 檔案中，通用 scs-component-content 類別除了其他 CSS 特性之外，還定義了 position:relative 和 display:inline-block。
雖然 scs-component-content 對於設定包圍每個元件的「方塊」樣式相當實用，但需要特定元件類別才能完整設定元件的樣式。請參閱元件特定樣式設定。