請查看以下內容: 了解如何編寫樣式系統的代碼,以確保了解AEM樣式系統使用的BEM式慣例。
為AEM樣式系統實作的主要風格有兩種:
版面樣式 會影響元件的許多元素,以建立元件的定義和可識別的轉譯(設計和版面),通常會與特定可重複使用的品牌概念一致。 例如,預告元件可以以傳統的基於卡的佈局、水準的促銷樣式或以主圖佈局的形式顯示在影像上覆蓋文本。
顯示樣式 」(Layout styles)中的「佈局」(Layout)樣式的小變化,但它們不會更改「佈局」樣式的基本性質或意圖。 例如,主圖版面樣式可能具有顯示樣式,可將顏色配置從主品牌顏色配置更改為次品牌顏色配置。
定義AEM作者可用的樣式名稱時,最好:
隨著AEM作者可用的可能樣式組合數量增加,必須進行QA並根據品牌標準驗證的排列越多。 太多的選項也可能會混淆作者,因為可能不清楚需要哪個選項或組合才能產生想要的效果。
樣式名稱或向AEM作者呈現的選項,以及實作CSS類別名稱在AEM中是分離的。
這可讓AEM作者清楚地以辭匯來標示樣式選項,並加以了解,但讓CSS開發人員以未來適用的語義方式為CSS類別命名。 例如:
元件必須有選項可搭配品牌的 主要 和 次要 不過,顏色是AEM作者 綠色 和 黃色,而非主要和次要的設計語言。
AEM樣式系統可使用方便作者的標籤來公開這些色彩顯示樣式 綠色 和 黃色,同時允許CSS開發人員使用語義命名 .cmp-component--primary-color
和 .cmp-component--secondary-color
來定義CSS中的實際樣式實作。
樣式名稱 綠色 已對應至 .cmp-component--primary-color
,和 黃色 to .cmp-component--secondary-color
.
如果公司的品牌顏色未來會有所改變,則只需改變的單一實作即可 .cmp-component--primary-color
和 .cmp-component--secondary-color
和樣式名稱。
以下是設計Teaser元件樣式的範例使用案例,以具有數種不同的版面和顯示樣式。
這將探索樣式名稱(向作者公開)的組織方式,以及後備CSS類的組織方式。
下圖顯示 樣式 使用案例中討論之變異的Teaser元件設定。
此 樣式組 「名稱」、「版面」和「顯示」依偶發事件符合「顯示樣式」和「版面樣式」的一般概念,用於對本文中的樣式類型進行概念分類。
此 樣式組 名稱和 樣式群組 應根據元件使用案例和專案專用元件樣式慣例量身打造。
例如, 顯示 樣式組名稱可能已命名 顏色.
下圖顯示 樣式 功能表作者會與互動,以選取元件的適當樣式。 請注意 樣式格線 名稱以及樣式名稱都會向作者公開。
預設樣式通常是元件最常使用的樣式,而預設的預設預告檢視新增至頁面時沒有樣式。
CSS可以直接套用至 .cmp-teaser
(不含任何修飾元)或 .cmp-teaser--default
.
如果預設樣式規則的套用頻率比不適用於所有變數,最好使用 .cmp-teaser
作為預設樣式的CSS類,因為假設遵循BEM樣式的慣例,所有變數都應以隱含方式繼承它們。 否則,應透過預設修飾詞來套用,例如 .cmp-teaser--default
,而這又需要新增至 元件的樣式配置的預設CSS類 欄位,否則這些樣式規則將必須在每個變數中被覆蓋。
甚至可以將「已命名」樣式指派為預設樣式,例如Hero樣式 (.cmp-teaser--hero)
定義,但更清楚的是針對 .cmp-teaser
或 .cmp-teaser--default
CSS類別實作。
請注意,「預設版面樣式」沒有「顯示樣式」名稱,但作者可以在「AEM樣式系統」選取工具中選取「顯示」選項。
這違反了最佳做法:
僅顯示有效的樣式組合
如果作者選取的 綠色 不會發生任何事。
在此使用案例中,我們承認這項違反規定,因為所有其他版面樣式都必須使用品牌顏色可著色。
在 促銷(對齊右) 下節將說明如何防止不想要的樣式組合。
.cmp-teaser--promo
或 .cmp-teaser--default
此 促銷版面樣式 用於促銷網站上的高價值內容,並水準排列以佔用網頁上的一段空間,且必須以品牌顏色建立樣式,且預設促銷版面樣式使用黑色文字。
實現此目標, 版面樣式 of 促銷 和 顯示樣式 of 綠色 和 黃色 在AEM Style System中為Teaser元件設定。
cmp-teaser--promo
.cmp-teaser--promo
cmp-teaser--promo
cmp-teaser--primary-color
cmp-teaser--promo.cmp-teaser--primary-color
cmp-teaser--promo
cmp-teaser--secondary-color
cmp-teaser--promo.cmp-teaser--secondary-color
此 促銷活動右對齊 版面樣式是促銷樣式的變化,樣式會反轉影像和文字(影像在右,文字在左)的位置。
正確的對齊方式的核心是顯示樣式,可以在AEM樣式系統中作為顯示樣式輸入,該顯示樣式與促銷版面樣式一起選擇。 這違反了以下最佳做法:
僅顯示有效的樣式組合
…已經在 預設樣式.
因為正確的對齊方式只會影響促銷版面樣式,而不會影響其他2種版面樣式:預設和主圖,我們可以建立新的佈局樣式Promo(右對齊),其中包含CSS類,該類將Promo佈局樣式內容右對齊: cmp -teaser--alternate
.
將多種樣式組合成單一樣式項目,也有助於減少可用樣式和樣式排列的數量,而這最好能將數量降至最低。
請注意CSS類的名稱, cmp-teaser--alternate
,不必與「對作者有利」的命名法相符。
cmp-teaser--promo cmp-teaser--alternate
.cmp-teaser--promo.cmp-teaser--alternate
cmp-teaser--promo cmp-teaser--alternate
cmp-teaser--primary-color
.cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--primary-color
cmp-teaser--promo cmp-teaser--alternate
cmp-teaser--secondary-color
.cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--secondary-color
主圖版面樣式會以背景顯示元件的影像,標題和連結已覆蓋。 主圖版面樣式(如促銷版面樣式)必須可以用品牌顏色著色。
若要使用品牌顏色為「主圖」版面樣式著色,可以使用與促銷版面樣式相同的顯示樣式。
對於元件,樣式名稱將映射到單個CSS類集,這表示顏色為促銷版式樣式背景的CSS類名稱必須為Hero版式樣式的文本和連結的顏色。
這可透過略過CSS規則來達成,但這需要CSS開發人員了解在AEM上如何實施這些排列。
用於著色背景的CSS 提升 主(綠色)顏色的佈局樣式:
.cmp-teaser--promo.cmp-teaser--primary--color {
...
background-color: green;
...
}
用於著色文本的CSS 英雄 主(綠色)顏色的佈局樣式:
.cmp-teaser--hero.cmp-teaser--primary--color {
...
color: green;
...
}
cmp-teaser--hero
.cmp-teaser--hero
cmp-teaser--hero
cmp-teaser--primary-color
cmp-teaser--hero.cmp-teaser--primary-color
cmp-teaser--hero
cmp-teaser--secondary-color
cmp-teaser--hero.cmp-teaser--secondary-color