瞭解樣式系統最佳實務 understanding-style-organization-with-the-aem-style-system

針對「AEM樣式系統」實作有兩種主要風格或樣式：

配置樣式 ​會影響元件的許多元素，以建立定義良好且可識別的元件轉譯（設計和配置），通常會與特定可重複使用的品牌概念一致。 例如，Teaser元件可以呈現為傳統卡片式版面、水準促銷樣式，或是在影像上以主圖版面覆蓋文字。

顯示樣式 ​是用來影響版面樣式的細微變化，但是它們不會改變版面樣式的基本特性或意圖。 例如，主圖版面配置樣式可能有顯示樣式，可將色彩配置從主要品牌色彩配置變更為次要品牌色彩配置。

風格組織最佳實務 style-organization-best-practices

在定義AEM作者可用的樣式名稱時，最好：

隨著AEM作者可用的可能樣式組合數量增加，存在更多必須通過QA驗證且符合品牌標準之排列組合。 太多選項也會讓作者感到困惑，因為不知道需要哪個選項或組合才能產生想要的效果。

樣式名稱與CSS類別的比較 style-names-vs-css-classes

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

這可讓樣式選項以清楚的辭彙標示，並讓AEM作者瞭解，但可讓CSS開發人員以未來的校訂、語意方式命名CSS類別。 例如：

元件必須具備選項，才能使用品牌的​ 主要 ​和​ 次要 ​色彩來著色，但是AEM作者知道色彩為​ 綠色 ​和​ 黃色，而不是主要和次要的設計語言。

AEM樣式系統可以使用作者友善的標籤​ 綠色 ​和​ 黃色 ​來公開這些色彩顯示樣式，同時允許CSS開發人員使用.cmp-component--primary-color和.cmp-component--secondary-color的語意命名來定義CSS中的實際樣式實作。

綠色 ​的樣式名稱對應至.cmp-component--primary-color，黃色​ 對應至.cmp-component--secondary-color。

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

Teaser元件作為範例使用案例 the-teaser-component-as-an-example-use-case

以下範例使用案例來設定Teaser元件的樣式，使其具有數個不同的「配置」和「顯示」樣式。

這將會探索樣式名稱（向作者公開）的方式以及支援CSS類別的組織方式。

Teaser元件樣式設定 component-styles-configuration

下圖針對使用案例中討論的變數，顯示Teaser元件的樣式設定。

樣式群組名稱、[配置]和[顯示]，依偶然性符合本文中用來將樣式型別概念分類的顯示樣式和配置樣式的一般概念。

樣式群組名稱和樣式群組的數目應該根據元件使用案例和專案特定的元件樣式慣例量身打造。

例如，Display ​樣式群組名稱可能已命名為​ Colors。

樣式選取功能表 style-selection-menu

下圖顯示樣式功能表作者與互動，為元件選取適當的樣式。 請注意，樣式Grpi名稱以及樣式名稱都向作者公開。

預設樣式 default-style

預設樣式通常是元件最常用的樣式，以及新增到頁面時預設的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類別實作中實作預設樣式。

促銷樣式 promo-style

促銷版面配置樣式 ​是用來促銷網站上的高價值內容，並且是水準配置以佔用網頁的空間，而且必須能夠依據品牌顏色來配置樣式，預設的促銷版面配置樣式使用黑色文字。

為此，已在Teaser元件的AEM樣式系統中設定​ 促銷 ​的​ 配置樣式 ​以及​ 綠色 ​和​ 黃色 ​的​ 顯示樣式。

促銷預設

主要促銷

次要促銷

促銷右對齊樣式 promo-r-align

促銷右對齊 ​版面配置樣式是「促銷」樣式的變異，這種樣式會顛倒影像與文字（影像在右方，文字在左方）的位置。

右對齊方式的核心是顯示樣式，可以將其輸入到「AEM樣式系統」中作為顯示樣式，該顯示樣式與「促銷」配置樣式一起選取。 這違反了以下最佳實務：

僅公開具有效果的樣式組合

…已在預設樣式中違反該規則。

由於正確對齊方式只會影響「促銷」配置樣式，而不會影響其他2個配置樣式：預設和主圖，因此我們可以建立新的配置樣式「促銷」（靠右對齊），其中包含將「促銷」配置樣式內容靠右對齊的CSS類別： cmp -teaser--alternate。

將多個樣式組合成單一樣式專案，也可協助減少可用樣式和樣式排列的數目，使其最少。

請注意，CSS類別的名稱cmp-teaser--alternate不必符合「right aligned」的作者易記命名法。

促銷活動靠右對齊預設值

主要促銷活動靠右對齊

促銷右對齊次要

英雄樣式 hero-style

主圖版面配置樣式會將元件的影像顯示為背景，並覆蓋標題和連結。 主圖版面配置樣式（如促銷版面配置樣式）必須可搭配品牌顏色上色。

若要以品牌色彩為主圖版面樣式上色，可運用與促銷版面樣式相同的顯示樣式。

每個元件中，樣式名稱會對應至單一CSS類別集，這表示代表Promo配置樣式背景的CSS類別名稱必須代表Hero配置樣式的文字和連結。

只要界定CSS規則的範圍，通常就能達成此目的，不過，這確實需要CSS開發人員瞭解這些排列如何在AEM上實施。

以主要（綠色）色彩將​ Promote ​配置樣式的背景著色的CSS：

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

CSS以主要（綠色）色彩將​ Hero ​配置樣式的文字著色：

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

Hero預設

主要主圖

主圖次要

其他資源 additional-resources