Controlla il contenuto in Informazioni su come codificare il sistema di stili, per comprendere le convenzioni simili a BEM utilizzate dal sistema di stili di AEM.
Sono implementati due tipi di gusto o stili principali per il sistema di stili AEM:
Gli stili di layout influiscono su molti elementi di un componente per creare una rappresentazione (progettazione e layout) ben definita e identificabile del componente, spesso allineata a uno specifico concetto di marchio riutilizzabile. Ad esempio, un componente Teaser può essere presentato nel layout tradizionale basato su schede, in uno stile Promozionale orizzontale o come layout Eroe che sovrappone il testo su un’immagine.
Gli stili di visualizzazione vengono utilizzati per influenzare lievi varianti degli stili di layout, tuttavia non modificano la natura o l’intento fondamentali dello stile di layout. Ad esempio, uno stile di layout eroe può avere stili di visualizzazione che modificano lo schema di colori dalla combinazione di colori del marchio principale alla combinazione di colori del marchio secondario.
Quando definisci i nomi degli stili disponibili per AEM autori, è meglio:
Con l’aumento del numero di possibili combinazioni di stile disponibili per gli autori di AEM, più permutazioni devono essere verificate e convalidate in base agli standard di marchio. Troppe opzioni possono confondere gli autori in quanto potrebbe non essere chiaro quale opzione o combinazione è necessaria per produrre l'effetto desiderato.
I nomi degli stili o le opzioni presentate agli autori AEM e i nomi delle classi CSS di implementazione vengono disaccoppiati in AEM.
Questo consente alle opzioni di stile di essere etichettate in un vocabolario chiaro e compreso dagli autori AEM, ma consente agli sviluppatori CSS di denominare le classi CSS in modo semantico e a prova di futuro. Esempio:
Un componente deve avere le opzioni da colorare con i colori primari e secondari del marchio, tuttavia, gli autori AEM conoscono i colori come verde e giallo, anziché il linguaggio di progettazione del primario e secondario.
Il sistema di stili AEM può esporre questi stili di visualizzazione colorati utilizzando le etichette compatibili con gli autori Verde e Giallo, consentendo agli sviluppatori CSS di utilizzare la denominazione semantica di .cmp-component--primary-color
e .cmp-component--secondary-color
per definire l’implementazione effettiva dello stile in CSS.
Il nome dello stile di Verde è mappato su .cmp-component--primary-color
e Giallo su .cmp-component--secondary-color
.
Se in futuro il colore del marchio dell'azienda cambia, tutto ciò che deve essere modificato sono le singole implementazioni di .cmp-component--primary-color
e .cmp-component--secondary-color
e i nomi di stile.
Di seguito è riportato un esempio di utilizzo dello stile di un componente Teaser per impostare diversi stili di layout e visualizzazione.
Verranno esaminati il modo in cui i nomi di stile (esposti agli autori) e le modalità di organizzazione delle classi CSS di supporto.
L’immagine seguente mostra la configurazione Stili per il componente Teaser per le varianti discusse nel caso d’uso.
I nomi Gruppo di stili, Layout e Visualizzazione, in base ai concetti generali di Stili di visualizzazione e Stili di layout utilizzati per classificare concettualmente i tipi di stili in questo articolo.
I nomi Gruppo di stili e il numero di Gruppi di stili devono essere personalizzati in base al caso d’uso del componente e alle convenzioni di stile del componente specifico del progetto.
Ad esempio, il nome del gruppo di stili Display potrebbe essere stato denominato Colori.
L’immagine seguente mostra l’interazione degli autori del menu Stile per selezionare gli stili appropriati per il componente. I nomi Grafici di stile e i nomi Stile sono tutti esposti all’autore.
Lo stile predefinito è spesso lo stile più comunemente utilizzato nel componente e la visualizzazione predefinita e non formattata del teaser quando viene aggiunto a una pagina.
A seconda della commonalità dello stile predefinito, il CSS può essere applicato direttamente sul .cmp-teaser
(senza modificatori) o su un .cmp-teaser--default
.
Se le regole di stile predefinite si applicano più spesso di quanto non sia per tutte le varianti, è consigliabile utilizzare .cmp-teaser
come classi CSS dello stile predefinito, in quanto tutte le varianti dovrebbero ereditare implicitamente, presupponendo che siano seguite convenzioni simili a BEM. In caso contrario, devono essere applicate tramite il modificatore predefinito, ad esempio .cmp-teaser--default
, che a sua volta deve essere aggiunto al campo Classi CSS predefinite 🔗 della configurazione dello stile del componente, altrimenti queste regole di stile dovranno essere ignorate in ogni variante.
È anche possibile assegnare uno stile "denominato" come stile predefinito, ad esempio lo stile eroe (.cmp-teaser--hero)
definito di seguito, tuttavia è più chiaro implementare lo stile predefinito rispetto alle implementazioni delle classi CSS .cmp-teaser
o .cmp-teaser--default
.
Osserva che lo stile di layout predefinito NON ha un nome di stile di visualizzazione, tuttavia l’autore potrà selezionare un’opzione Visualizzazione nello strumento di selezione del sistema di stile AEM.
Ciò in violazione delle migliori pratiche:
Esporre solo combinazioni di stile con un effetto
Se un autore seleziona lo stile di visualizzazione di Verde, non succederà nulla.
In questo caso d’uso, verrà applicata questa violazione, in quanto tutti gli altri stili di Layout devono essere colorabili utilizzando i colori del marchio.
Nella sezione Promo (allineato a destra) seguente verrà illustrato come evitare combinazioni di stile indesiderate.
.cmp-teaser--promo
o .cmp-teaser--default
Lo stile layout promo viene utilizzato per promuovere contenuti di alto valore sul sito e viene disposto orizzontalmente per occupare una banda di spazio sulla pagina web e deve essere formattato in base ai colori del marchio, con lo stile predefinito di layout Promo utilizzando il testo nero.
A questo scopo, nel sistema di stili AEM per il componente Teaser sono configurati uno stile layout di Promo e uno stile di visualizzazione di Verde e Giallo.
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
Lo stile di layout Promo allineato a destra è una variante dello stile Promo che capovolge la posizione dell'immagine e del testo (immagine a destra, testo a sinistra).
L’allineamento a destra, al suo centro, è uno stile di visualizzazione, può essere inserito nel sistema di stili AEM come stile di visualizzazione selezionato in combinazione con lo stile di layout Promo. Questo viola la migliore pratica di:
Esporre solo combinazioni di stile con un effetto
.che è già stato violato nello stile Predefinito.
Poiché l’allineamento a destra influisce solo sullo stile di layout Promo e non sugli altri 2 stili di layout: Per impostazione predefinita ed eroe, possiamo creare un nuovo stile di layout Promo (allineato a destra) che include la classe CSS che allinea a destra il contenuto degli stili di layout Promo: cmp -teaser--alternate
.
Questa combinazione di più stili in una singola voce Stile consente inoltre di ridurre il numero di stili e permutazioni di stile disponibili, il che è meglio ridurre al minimo.
Osserva che il nome della classe CSS cmp-teaser--alternate
non deve necessariamente corrispondere alla nomenclatura "allineata a destra" per l’authoring.
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
Lo stile di layout Eroe visualizza l’immagine dei componenti come sfondo con titolo e collegamento sovrapposti. Lo stile di layout Eroe, come lo stile di layout Promo, deve essere colorato con i colori del marchio.
Per colorare lo stile di layout Eroe con i colori del marchio, è possibile sfruttare gli stessi stili di visualizzazione utilizzati per lo stile di layout Promo.
Per componente, il nome dello stile viene mappato sul singolo set di classi CSS, il che significa che i nomi delle classi CSS che colorano lo sfondo dello stile di layout Promo, devono colorare il testo e il collegamento dello stile di layout Eroe.
Questo può essere ottenuto in modo banale tramite l’ambito delle regole CSS, tuttavia, questo richiede agli sviluppatori CSS di comprendere in che modo queste permutazioni verranno emanate in AEM.
CSS per colorare lo sfondo dello stile di layout Promuovi con il colore primario (verde):
.cmp-teaser--promo.cmp-teaser--primary--color {
...
background-color: green;
...
}
CSS per la colorazione del testo dello stile di layout Eroe con il colore primario (verde):
.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