了解樣式系統最佳實踐

注意

請在了解如何編寫樣式系統的代碼查看內容,以確保了解AEM樣式系統使用的類似BEM的慣例。

為AEM樣式系統實作的主要風格有兩種:

  • 版面樣式
  • 顯示樣式

版面 樣式會影響元件的許多元素,以建立元件的良好定義和可識別的轉譯(設計和版面),通常與特定可重複使用的品牌概念一致。例如,預告元件可以以傳統的基於卡的佈局、水準的促銷樣式或以主圖佈局的形式顯示在影像上覆蓋文本。

示樣式用於影響佈局樣式的次要變化,但它們不會更改佈局樣式的基本性質或目的。例如,主圖版面樣式可能具有顯示樣式,可將顏色配置從主品牌顏色配置更改為次品牌顏色配置。

樣式組織最佳實務

定義AEM作者可用的樣式名稱時,最好:

  • 使用作者所理解的辭匯來命名樣式
  • 將樣式選項的數量減到最少
  • 僅公開品牌標準允許的樣式選項和組合
  • 僅顯示有效的樣式組合
    • 如果暴露了無效組合,請確保它們至少不會產生不良影響

隨著AEM作者可用的可能樣式組合數量增加,必須進行QA並根據品牌標準驗證的排列越多。 太多的選項也可能會混淆作者,因為可能不清楚需要哪個選項或組合才能產生想要的效果。

樣式名稱與CSS類

樣式名稱或向AEM作者呈現的選項,以及實作CSS類別名稱在AEM中是分離的。

這可讓AEM作者清楚地以辭匯來標示樣式選項,並加以了解,但讓CSS開發人員以未來適用的語義方式為CSS類別命名。 例如:

元件必須具有以品牌的​primary​和​secondary​顏色著色的選項,但AEM作者知道顏色是​green​和​yellow,而不是主要和次要的設計語言。

AEM樣式系統可使用易於編寫的標籤​Green​和​Yellow​來公開這些顏色顯示樣式,同時允許CSS開發人員使用.cmp-component--primary-color.cmp-component--secondary-color的語義命名來定義CSS中的實際樣式實施。

將​Green​的樣式名稱映射到.cmp-component--primary-color,將​Yellow​映射到.cmp-component--secondary-color

如果公司的品牌顏色未來有所變更,則需要變更的只是.cmp-component--primary-color.cmp-component--secondary-color的單一實作,以及樣式名稱。

作為示例使用案例的預告元件

以下是設計Teaser元件樣式的範例使用案例,以具有數種不同的版面和顯示樣式。

這將探索樣式名稱(向作者公開)的組織方式,以及後備CSS類的組織方式。

預告元件樣式配置

下圖顯示了使用案例中討論的變數的Teaser元件的Styles配置。

樣式群組名稱、版面和顯示,按照偶發性符合本文中用來概念分類樣式的「顯示樣式」和「版面樣式」的一般概念。

樣式組名稱和樣式組的數量應根據元件使用案例和特定於項目的元件樣式約定進行定制。

例如,Display​樣式組名稱可能已命名為​Colors

顯示樣式組

樣式選擇菜單

下圖顯示Style功能表作者與之互動,以選取元件的適當樣式。 請注意,樣式圖形名稱以及樣式名稱都對作者公開。

樣式下拉式選單

預設樣式

預設樣式通常是元件最常使用的樣式,而預設的預設預告檢視新增至頁面時沒有樣式。

視預設樣式的共性而定,CSS可以直接套用在.cmp-teaser(不含任何修飾元)或.cmp-teaser--default上。

如果預設樣式規則的應用頻率比不應用於所有變數的頻率更高,則最好使用.cmp-teaser作為預設樣式的CSS類,因為假定遵循了類似BEM的約定,所有變數都應隱式地繼承它們。 否則,應透過預設修飾詞(例如.cmp-teaser--default)來套用,而元件的樣式設定的「預設CSS類別」欄位又需要新增至元件的「預設CSS類別」(Default CSS Classes),否則,這些樣式規則將必須在每個變數中覆寫。

您甚至可以指派「named」樣式作為預設樣式,例如下面定義的Hero style (.cmp-teaser--hero),但更清楚的是針對.cmp-teaser.cmp-teaser--default CSS類別實施預設樣式。

注意

請注意,「預設版面樣式」沒有「顯示樣式」名稱,但作者將能夠在「AEM樣式系統」選取工具中選取「顯示」選項。

這違反了最佳做法:

僅顯示有效的樣式組合

如果作者選取​Green​的顯示樣式,則不會發生任何情況。

在此使用案例中,我們承認這項違反規定,因為所有其他版面樣式都必須使用品牌顏色可著色。

在下方的​促銷活動(對齊右側)​區段中,我們將了解如何防止不想要的樣式組合。

預設樣式

  • 版面樣式
    • 預設
  • 顯示樣式
  • 有效的CSS類: .cmp-teaser--promo.cmp-teaser--default

促銷樣式

促銷版面樣式​用於促銷網站上的高價值內容,並水準佈置以佔用網頁上的一帶空間,且必須以品牌顏色建立樣式,預設促銷版面樣式使用黑色文字。

為此,在預告元件的AEM樣式系統中配置​促銷​的​佈局樣式​和​綠色​和​黃色​的​顯示樣式

促銷預設值

促銷活動預設

  • 版面樣式
    • 樣式名稱:促銷
    • CSS 類別: cmp-teaser--promo
  • 顯示樣式
  • 有效的CSS類: .cmp-teaser--promo

促銷主要

促銷主要

  • 版面樣式
    • 樣式名稱:促銷
    • CSS 類別: cmp-teaser--promo
  • 顯示樣式
    • 樣式名稱:綠色
    • CSS 類別: cmp-teaser--primary-color
  • 有效的CSS類: cmp-teaser--promo.cmp-teaser--primary-color

促銷次要

促銷次要

  • 版面樣式
    • 樣式名稱:促銷
    • CSS 類別: cmp-teaser--promo
  • 顯示樣式
    • 樣式名稱:黃色
    • CSS 類別: cmp-teaser--secondary-color
  • 有效的CSS類: cmp-teaser--promo.cmp-teaser--secondary-color

促銷右對齊樣式

促銷右對齊​版面樣式是促銷樣式的變化,該樣式會反轉影像和文字的位置(影像在右,文字在左)。

正確的對齊方式的核心是顯示樣式,可以在AEM樣式系統中作為顯示樣式輸入,該顯示樣式與促銷版面樣式一起選擇。 這違反了以下最佳做法:

僅顯示有效的樣式組合

預設樣式中已違反此規則。

因為正確的對齊方式只會影響促銷版面樣式,而不會影響其他2種版面樣式:預設和主圖,我們可以建立新的佈局樣式Promo(右對齊),其中包含CSS類,該類將Promo佈局樣式內容右對齊:cmp -teaser--alternate

將多種樣式組合成單一樣式項目,也有助於減少可用樣式和樣式排列的數量,而這最好能將數量降至最低。

請注意,CSS類別的名稱cmp-teaser--alternate不必與「對齊右方」的作者好記命名法相符。

促銷活動右對齊預設值

促銷活動右對齊

  • 版面樣式
    • 樣式名稱:促銷(靠右對齊)
    • CSS 類別: cmp-teaser--promo cmp-teaser--alternate
  • 顯示樣式
  • 有效的CSS類: .cmp-teaser--promo.cmp-teaser--alternate

促銷右對齊主

促銷右對齊主

  • 版面樣式
    • 樣式名稱:促銷(靠右對齊)
    • CSS 類別: cmp-teaser--promo cmp-teaser--alternate
  • 顯示樣式
    • 樣式名稱:綠色
    • CSS 類別: cmp-teaser--primary-color
  • 有效的CSS類: .cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--primary-color

促銷右對齊次級

促銷右對齊次級

  • 版面樣式
    • 樣式名稱:促銷(靠右對齊)
    • CSS 類別: cmp-teaser--promo cmp-teaser--alternate
  • 顯示樣式
    • 樣式名稱:黃色
    • CSS 類別: cmp-teaser--secondary-color
  • 有效的CSS類: .cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--secondary-color

主圖樣式

主圖版面樣式會以背景顯示元件的影像,標題和連結已覆蓋。 主圖版面樣式(如促銷版面樣式)必須可以用品牌顏色著色。

若要使用品牌顏色為「主圖」版面樣式著色,可以使用與促銷版面樣式相同的顯示樣式。

對於元件,樣式名稱將映射到單個CSS類集,這表示顏色為促銷版式樣式背景的CSS類名稱必須為Hero版式樣式的文本和連結的顏色。

這可透過略過CSS規則來達成,但這確實需要CSS開發人員了解在AEM上如何實施這些設定。

用主(綠色)顏色著色​Promote​佈局樣式背景的CSS:

.cmp-teaser--promo.cmp-teaser--primary--color {
   ...
   background-color: green;
   ...
}

用主(綠色)顏色對​Hero​佈局樣式的文本進行著色的CSS:

.cmp-teaser--hero.cmp-teaser--primary--color {
   ...
   color: green;
   ...
}

主圖預設值

英雄風格

  • 版面樣式
    • 樣式名稱:Hero
    • CSS 類別: cmp-teaser--hero
  • 顯示樣式
  • 有效的CSS類: .cmp-teaser--hero

主圖

主圖

  • 版面樣式
    • 樣式名稱:促銷
    • CSS 類別: cmp-teaser--hero
  • 顯示樣式
    • 樣式名稱:綠色
    • CSS 類別: cmp-teaser--primary-color
  • 有效的CSS類: cmp-teaser--hero.cmp-teaser--primary-color

Hero次級

Hero次級

  • 版面樣式
    • 樣式名稱:促銷
    • CSS 類別: cmp-teaser--hero
  • 顯示樣式
    • 樣式名稱:黃色
    • CSS 類別: cmp-teaser--secondary-color
  • 有效的CSS類: cmp-teaser--hero.cmp-teaser--secondary-color

其他資源

本頁內容