Best practice per il sistema di stili

Sono implementati due tipi di gusto o stili principali per il sistema di stili di AEM:

• Stili di layout
• Visualizzare gli stili

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.

Best practice per le organizzazioni di stili

Quando definisci i nomi degli stili disponibili per gli autori AEM, è meglio:

• Denominare gli stili utilizzando un vocabolario compreso dagli autori
• Ridurre al minimo il numero di opzioni di stile
• Esporre solo le opzioni di stile e le combinazioni consentite dagli standard di marchio
• Esporre solo combinazioni di stile con un effetto
  • Se sono esposte combinazioni inefficaci, assicurarsi che almeno non abbiano un effetto negativo

Con l’aumento del numero di possibili combinazioni di stile disponibili per gli autori AEM, sono presenti più permutazioni che devono essere QA 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.

Nomi di stile e classi CSS

I nomi degli stili, 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 di 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.

Il componente Teaser come esempio di utilizzo

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.

Configurazione degli stili dei componenti teaser

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.

Menu di selezione stile

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.

Stile predefinito

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.

• Stile di layout
  • Predefiniti
• Stile di visualizzazione
  • Nessuna
• Classi CSS efficaci: .cmp-teaser--promo o .cmp-teaser--default

Stile promozionale

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 di AEM per il componente Teaser sono configurati uno stile di layout di Promo e uno stile di visualizzazione di Verde e Giallo.

Predefinito promozionale

• Stile di layout
  • Nome stile: Promo
  • Classe CSS: cmp-teaser--promo
• Stile di visualizzazione
  • Nessuna
• Classi CSS efficaci: .cmp-teaser--promo

Principale promozionale

• Stile di layout
  • Nome stile: Promo
  • Classe CSS: cmp-teaser--promo
• Stile di visualizzazione
  • Nome stile: Verde
  • Classe CSS: cmp-teaser--primary-color
• Classi CSS efficaci: cmp-teaser--promo.cmp-teaser--primary-color

Promo secondario

• Stile di layout
  • Nome stile: Promo
  • Classe CSS: cmp-teaser--promo
• Stile di visualizzazione
  • Nome stile: Giallo
  • Classe CSS: cmp-teaser--secondary-color
• Classi CSS efficaci: cmp-teaser--promo.cmp-teaser--secondary-color

Stile progressivo allineato a destra

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 di 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.

Predefinito allineato a destra

• Stile di layout
  • Nome stile: Promo (allineato a destra)
  • Classi CSS: cmp-teaser--promo cmp-teaser--alternate
• Stile di visualizzazione
  • Nessuna
• Classi CSS efficaci: .cmp-teaser--promo.cmp-teaser--alternate

Principale allineata a destra

• Stile di layout
  • Nome stile: Promo (allineato a destra)
  • Classi CSS: cmp-teaser--promo cmp-teaser--alternate
• Stile di visualizzazione
  • Nome stile: Verde
  • Classe CSS: cmp-teaser--primary-color
• Classi CSS efficaci: .cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--primary-color

Secondaria allineata a destra

• Stile di layout
  • Nome stile: Promo (allineato a destra)
  • Classi CSS: cmp-teaser--promo cmp-teaser--alternate
• Stile di visualizzazione
  • Nome stile: Giallo
  • Classe CSS: cmp-teaser--secondary-color
• Classi CSS efficaci: .cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--secondary-color

Stile eroe

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;
   ...
}

Predefinito eroe

• Stile di layout
  • Nome stile: Eroe
  • Classe CSS: cmp-teaser--hero
• Stile di visualizzazione
  • Nessuna
• Classi CSS efficaci: .cmp-teaser--hero

Hero primario

• Stile di layout
  • Nome stile: Promo
  • Classe CSS: cmp-teaser--hero
• Stile di visualizzazione
  • Nome stile: Verde
  • Classe CSS: cmp-teaser--primary-color
• Classi CSS efficaci: cmp-teaser--hero.cmp-teaser--primary-color

Eroe secondario

• Stile di layout
  • Nome stile: Promo
  • Classe CSS: cmp-teaser--hero
• Stile di visualizzazione
  • Nome stile: Giallo
  • Classe CSS: cmp-teaser--secondary-color
• Classi CSS efficaci: cmp-teaser--hero.cmp-teaser--secondary-color

Risorse aggiuntive

• Documentazione del sistema di stili
• Creazione di librerie client AEM
• Sito web della documentazione di BEM (modificatore di elemento isolato)
• Sito web della documentazione SNELESS
• Sito web jQuery