Best practices voor stijlsystemen understanding-style-organization-with-the-aem-style-system

Er zijn twee hoofdstijlen of stijlen die voor het Systeem van de Stijl van de AEM worden uitgevoerd:

de stijlen van de Lay-out beïnvloeden vele elementen van een Component om een goed te bepalen en identificeerbare vertoning (ontwerp en lay-out) van de component tot stand te brengen, die vaak aan een specifiek herbruikbaar merkconcept richt. Een teascomponent kan bijvoorbeeld worden weergegeven in de traditionele, op kaarten gebaseerde lay-out, in een horizontale promotiestijl of als een hoofdlay-out die tekst op een afbeelding bedekt.

de stijlen van de Vertoning worden gebruikt om minder belangrijke variaties aan de stijlen van de Lay-out te beïnvloeden, nochtans, veranderen zij niet de fundamentele aard of de intentie van de stijl van de Lay-out. Een hoofdopmaakstijl kan bijvoorbeeld weergavestijlen hebben die het kleurenschema wijzigen van het kleurenschema voor het primaire merk in het kleurenschema voor het secundaire merk.

Best practices voor organisatie style-organization-best-practices

Wanneer u de stijlnamen definieert die beschikbaar zijn voor AEM auteurs, kunt u het beste:

Aangezien het aantal mogelijke stijlcombinaties beschikbaar aan AEM auteurs stijgt, bestaan de meer permutaties die QA'd moeten zijn en tegen merknormen moeten worden bevestigd. Te veel opties kunnen auteurs ook verwarren, omdat het onduidelijk kan worden welke optie of combinatie nodig is om het gewenste effect te verkrijgen.

Stijlnamen versus CSS-klassen style-names-vs-css-classes

Stijlnamen, of de opties die aan AEM auteurs worden voorgesteld, en de het uitvoeren CSS klassennamen worden ontkoppeld in AEM.

Hierdoor kunnen stijlopties worden gelabeld in een woordenschat die duidelijk is en door de AEM auteurs wordt begrepen, maar kunnen CSS-ontwikkelaars de CSS-klassen op een semantische manier een naam geven die toekomstbestendig is. Bijvoorbeeld:

Een component moet de opties hebben om met het merk worden gekleurd primaire en secundaire kleuren, echter, de AEM auteurs de kleuren als groen en geel, eerder dan de ontwerptaal van primair en secundair.

Het systeem van de Stijl van de AEM kan deze het kleuren stijlen van de Vertoning blootstellen gebruikend auteursvriendelijke etiketten Groen en Geel, terwijl het toestaan van de CSS ontwikkelaars om semantische het noemen van .cmp-component--primary-color en .cmp-component--secondary-color te gebruiken om de daadwerkelijke stijlimplementatie in CSS te bepalen.

De naam van de Stijl van Groen wordt in kaart gebracht aan .cmp-component--primary-color, en Geel aan .cmp-component--secondary-color.

Als de merkkleur van het bedrijf in de toekomst verandert, hoeft u alleen de enkele implementaties van .cmp-component--primary-color en .cmp-component--secondary-color en de stijlnamen te wijzigen.

De component Teaser als voorbeeld gebruikt case the-teaser-component-as-an-example-use-case

Hieronder ziet u een voorbeeld van het gebruik van de stijl van een Taser-component voor verschillende lay-out- en weergavestijlen.

Hiermee wordt uitgelegd hoe stijlnamen (beschikbaar voor auteurs) en hoe de ondersteunende CSS-klassen worden ingedeeld.

Configuratie van componentstijlen voor teaser component-styles-configuration

In de volgende afbeelding ziet u de Styles -configuratie voor de component Teaser voor de variaties die in het gebruiksgeval worden besproken.

De namen, lay-out en weergave van Style Group komen per geval overeen met de algemene concepten Weergavestijlen en Lay-outstijlen die worden gebruikt om typen stijlen in dit artikel conceptueel te categoriseren.

De Style Group -namen en het aantal Style Groups -namen moeten zijn afgestemd op het gebruik van hoofdletters en kleine letters voor componenten en de stijlconventies voor projectspecifieke componenten.

Bijvoorbeeld, kon de naam van de de stijlgroep van de Vertoning Kleuren genoemd zijn.

Menu Stijlselectie style-selection-menu

In de onderstaande afbeelding ziet u de interactie tussen de auteurs van het menu Style en de juiste stijlen voor de component. Let op: de namen Style Grpi en Stijl worden allemaal weergegeven aan de auteur.

Standaardstijl default-style

De standaardstijl is vaak de meest gebruikte stijl van de component en de standaard, niet-opgemaakte weergave van het gummetje wanneer deze aan een pagina wordt toegevoegd.

Afhankelijk van de standaardinstelling kan de CSS rechtstreeks worden toegepast op de .cmp-teaser (zonder wijzigingstoetsen) of op een .cmp-teaser--default .

Als de standaardstijlregels vaker dan niet op alle variaties van toepassing zijn, kunt u .cmp-teaser het beste gebruiken als de CSS-klassen van de standaardstijl, aangezien alle variaties deze impliciet moeten overnemen, ervan uitgaande dat de BEM-achtige conventies worden gevolgd. Als niet, zouden zij via de standaardbepaling, zoals .cmp-teaser--default moeten worden toegepast, die beurtelings aan het gebied van de de stijlconfiguratie van de component de StandaardCSS Klassenmoet worden toegevoegd, anders zullen deze stijlregels in elke variatie moeten worden met voeten getreden.

Het is zelfs mogelijk om een stijl "benoemd" als de standaardstijl toe te wijzen, bijvoorbeeld de hieronder gedefinieerde hoofdstijl (.cmp-teaser--hero) , maar het is duidelijker om de standaardstijl te implementeren in combinatie met de implementatie van de CSS-klasse .cmp-teaser of .cmp-teaser--default .

Promo-stijl promo-style

De stijl van de lay-out van de Promo wordt gebruikt om hoog-waardeinhoud op de plaats te bevorderen en horizontaal geplaatst om een band van ruimte op de Web-pagina op te nemen en moet stijl-geschikt door merkkleuren, met de standaard de lay-outstijl van Promo gebruikend zwarte tekst zijn.

Dit bereiken, a lay-outstijl van Promo en de vertoningsstijlen van Groene en Geel wordt gevormd in het Systeem van de Stijl van de AEM voor de component van het Taser.

Standaardwaarde voor aanbieding

Primaire aanbieding

Secundaire aanbieding

Promo Right-align style promo-r-align

De Bevordering rechts-gerichte lay-outstijl is een variatie van de stijl van de Bodemstijl die de stijl de plaats van het beeld en de tekst (beeld op recht, tekst op linkerzijde) omkeert.

De juiste uitlijning, in de kern, is een weergavestijl die u in het AEM Stijlsysteem kunt invoeren als een weergavestijl die u samen met de stijl van de Promo-lay-out selecteert. Dit is in strijd met de beste praktijken van:

stelt slechts stijlcombinaties bloot die een effect hebben

…die reeds in de Standaardstijlwerd geschonden.

Omdat de juiste uitlijning alleen van invloed is op de stijl van de Promo-lay-out en niet op de andere twee lay-outstijlen: standaard en held, kunnen we een nieuwe lay-outstijlpromotie (rechts uitgelijnd) maken die de CSS-klasse bevat die de inhoud van de Promo-lay-outstijlen met de rechtermuisknop uitlijnt: cmp -teaser--alternate .

Deze combinatie van meerdere stijlen tot één Stijl-item kan ook het aantal beschikbare stijlen en stijlpermutaties verminderen. Dit is het beste om deze te minimaliseren.

De naam van de CSS-klasse cmp-teaser--alternate hoeft niet overeen te komen met de auteurvriendelijke nomenclatuur van 'rechts uitgelijnd'.

Standaard naar rechts uitgelijnde aanbieding

Primaire aanbieding rechts uitgelijnd

Secundaire promotie rechts uitgelijnd

Hero style hero-style

In de lay-outstijl Hoofdafbeelding wordt de afbeelding van de componenten weergegeven als een achtergrond met de titel en de koppeling overlay. De hoofdlay-outstijl moet, net als de Promo-lay-outstijl, kleurbaar zijn met brandkleuren.

Als u de hoofdlay-outstijl wilt kleuren met merkkleuren, kunt u dezelfde weergavestijlen gebruiken die voor de Promo-lay-outstijl worden gebruikt.

Per component wordt de stijlnaam toegewezen aan de enkele set CSS-klassen. Dit betekent dat de CSS-klassennamen die de achtergrond van de indelingsstijl Promo kleuren, de tekst en koppeling van de hoofdlay-outstijl moeten kleuren.

Dit kan triviaal worden bereikt door de CSS-regels te verkennen, maar dit vereist wel dat de CSS-ontwikkelaars begrijpen hoe deze permutaties worden toegepast op AEM.

CSS voor het kleuren van de achtergrond van bevordert lay-outstijl met de primaire (groene) kleur:

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

CSS voor het kleuren van de tekst van de Hero lay-outstijl met de primaire (groene) kleur:

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

Hero Default

Primaire hoofdafbeelding van Hero

Hero Secondary

Aanvullende bronnen additional-resources