Mer om metodtips för formatsystem understanding-style-organization-with-the-aem-style-system

Det finns två huvudvarianter eller format som implementeras för AEM Style System:

Layoutformat påverkar många element i en komponent för att skapa en väldefinierad och identifierbar återgivning (design och layout) av komponenten, som ofta justeras mot ett visst återanvändbart varumärkeskoncept. En Teaser-komponent kan till exempel presenteras i den traditionella kortbaserade layouten, en horisontell marknadsföringsstil eller som en Hero-layout som täcker text på en bild.

Visningsformat används för att påverka mindre variationer av layoutformat, men de ändrar inte den grundläggande typen eller avsikten för layoutformatet. En Hero-layoutstil kan till exempel ha visningsformat som ändrar färgschemat från det primära färgschemat till det sekundära färgschemat.

Bästa praxis för att organisera style-organization-best-practices

När du definierar de formatnamn som är tillgängliga för författare av AEM är det bäst att:

I takt med att antalet möjliga stilkombinationer som är tillgängliga för AEM-författare ökar, finns det fler möjligheter som måste vara QAd och valideras mot varumärkesstandarder. För många alternativ kan också förvirra författare eftersom det kan bli oklart vilket alternativ eller vilken kombination som krävs för att skapa önskad effekt.

Formatnamn jämfört med CSS-klasser style-names-vs-css-classes

Formatnamn, eller de alternativ som visas för AEM-författare, och de implementerande CSS-klassnamnen är inte kopplade till varandra i AEM.

Detta gör att formatalternativen kan märkas i en ordlista som är klar och som kan tolkas av AEM-författare, men gör att CSS-utvecklare kan namnge CSS-klasserna på ett framtidssäkert, semantiskt sätt. Till exempel:

En komponent måste ha alternativen för att färgläggas med varumärkets primära - och sekundära -färger, men AEM-författarna kan färgerna som gröna och gula i stället för som det primära och sekundära designspråket.

AEM Style System kan visa dessa färgvisningsformat med hjälp av de redigeringsvänliga etiketterna Green och Yellow, samtidigt som CSS-utvecklare kan använda semantiska namn på .cmp-component--primary-color och .cmp-component--secondary-color för att definiera den faktiska formatimplementeringen i CSS.

Formatnamnet för grönt mappas till .cmp-component--primary-color och gult till .cmp-component--secondary-color.

Om företagets varumärkefärg ändras i framtiden behöver bara implementeringarna av .cmp-component--primary-color och .cmp-component--secondary-color och formatnamnen ändras.

Teaser-komponenten som exempel på användningsfall the-teaser-component-as-an-example-use-case

Följande är ett exempel på hur du formaterar en Teaser-komponent så att den har flera olika layout- och visningsformat.

Då utforskas hur formatnamn (exponerade för författare) och hur CSS-klasserna som ligger till grund för dem är ordnade.

Konfiguration av komponentformat för Teaser component-styles-configuration

I följande bild visas Teaser-komponentens Styles-konfiguration för de variationer som diskuteras i användningsexemplet.

Style Group-namnen, layouten och visningen matchar som en händelse de allmänna begreppen för visningsformat och layoutformat som används för att kategorisera formattyper i den här artikeln.

Style Group-namnen och antalet Style Groups ska anpassas efter komponentens användningsfall och projektspecifika regler för komponentformat.

Formatgruppnamnet Visa kan till exempel ha namnet Färger.

Meny för val av format style-selection-menu

Bilden nedan visar hur menyförfattarna interagerar med Style för att välja lämpliga format för komponenten. Observera att namnen på Style Grpi, liksom formatnamnen, visas för författaren.

Standardformat default-style

Standardformatet är ofta det vanligaste formatet för komponenten och den icke-formaterade standardvyn för suddgummit när den läggs till på en sida.

Beroende på hur vanligt standardformatet är kan CSS användas direkt på .cmp-teaser (utan modifierare) eller på en .cmp-teaser--default.

Om standardformatreglerna gäller oftare än inte för alla variationer är det bäst att använda .cmp-teaser som CSS-klasser för standardformatet, eftersom alla variationer ska ärva dem implicit, förutsatt att BEM-liknande konventioner följs. Om de inte gör det bör de användas med standardmodifieraren, till exempel .cmp-teaser--default, som i sin tur måste läggas till i komponentens formatkonfigurations standardfält för CSS-klasser , annars måste dessa formatregler åsidosättas i varje variant.

Det går till och med att tilldela ett namngivet format som standardformat, till exempel Hero-formatet (.cmp-teaser--hero) som definieras nedan, men det är tydligare att implementera standardformatet mot implementeringarna av CSS-klassen .cmp-teaser eller .cmp-teaser--default.

Promo style promo-style

Layoutstilen Kampanj används för att marknadsföra högt värde på webbplatsen och har utformats vågrätt för att ta upp ett mellanrum på webbsidan och måste kunna formateras av varumärken, med standardlayoutstilen Promo som använder svart text.

För att uppnå detta konfigureras en layoutstil av Promo och visningsformaten av Green och Yellow i AEM Style System för Teaser-komponenten.

Promo Default

Primär kampanj

Promo Secondary

Promo Right-aligned style promo-r-align

Layoutstilen Kampanj högerjusterad är en variation av den Promo-stil som används för att vända platsen för bilden och texten (bild till höger, text till vänster).

Den högra justeringen, i sin helhet, är en visningsstil som du kan ange i AEM Style System som en visningsstil som du väljer i samband med kampanjlayoutstilen. Detta bryter mot bästa praxis:

Visa endast formatkombinationer som har en effekt

…som redan överträtts i standardformatet.

Eftersom den högra justeringen bara påverkar layoutformatet Promo, och inte de andra två layoutformaten: standard och hjälte, kan vi skapa en ny layoutstil Promo (högerjusterad) som innehåller CSS-klassen som högerjusterar innehållet i Promo-layoutstilarna: cmp -teaser--alternate.

Den här kombinationen av flera format till en enda formatpost kan också minska antalet tillgängliga format och formatändringar, vilket är bäst för att minimera.

Observera att namnet på CSS-klassen, cmp-teaser--alternate, inte behöver matcha den författarvänliga nomenklaturen för högerjusterad.

Promo right-aligned Default

Högerjusterad primär kampanj

Högerjusterad sekundär kampanj

Hero-stil hero-style

Layoutstilen Hero visar komponentens bild som en bakgrund med titeln och länken överlagrad. Layoutstilen Hero, liksom layoutstilen Promo, måste vara färgstark med varumärkesfärger.

Om du vill färglägga Hero-layoutstilen med varumärkesfärger kan du använda samma visningsstilar som används för Promo-layoutstilen.

För varje komponent mappas formatnamnet till en enda uppsättning CSS-klasser, vilket innebär att CSS-klassnamnen som färgar bakgrunden i Promo-layoutstilen måste färglägga texten och länken i Hero-layoutstilen.

Detta kan uppnås delvis genom att CSS-reglerna omdefinieras, men detta kräver att CSS-utvecklarna förstår hur dessa permutationer påverkar AEM.

CSS för att färglägga bakgrunden i layoutstilen Promote med den primära (gröna) färgen:

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

CSS för att färglägga texten i layoutstilen Hero med den primära (gröna) färgen:

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

Hero-standard

Hero Primary

Hero sekundär

Ytterligare resurser additional-resources