Best practice per il sistema di stili understanding-style-organization-with-the-aem-style-system

Per il sistema di stili dell’AEM sono implementati due gusti o stili principali:

Gli stili di layout interessano molti elementi di un componente per creare una rappresentazione ben definita e identificabile (progettazione e layout) 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 principale che sovrappone il testo su un’immagine.

Gli stili di visualizzazione vengono utilizzati per influenzare le variazioni minori agli stili di layout, ma non modificano la natura o l'intento fondamentale dello stile di layout. Ad esempio, uno stile di layout Eroe può avere stili di visualizzazione che modificano la combinazione di colori dalla combinazione di colori del marchio principale alla combinazione di colori del marchio secondario.

Best practice per l’organizzazione degli stili style-organization-best-practices

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

Con l’aumento del numero di possibili combinazioni di stili disponibili per gli autori di AEM, esistono più permutazioni che devono essere sottoposte a QA e convalidate in base agli standard di marchio. Troppe opzioni possono inoltre 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 style-names-vs-css-classes

I nomi degli stili, o le opzioni presentate agli autori AEM, e i nomi delle classi CSS implementanti sono disaccoppiati nell'AEM.

Questo consente alle opzioni di stile di essere etichettate in un vocabolario chiaro e compreso dagli autori dell’AEM, ma consente agli sviluppatori CSS di denominare le classi CSS in modo semantico e a prova di futuro. Ad esempio:

Un componente deve avere le opzioni per essere colorato con i colori primario e secondario del brand, tuttavia gli autori dell'AEM conoscono i colori come verde e giallo, piuttosto che il linguaggio di progettazione primario e secondario.

Il sistema di stili dell'AEM può esporre questi stili di visualizzazione a colori utilizzando etichette descrittive dell'autore 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 stile di Verde è mappato a .cmp-component--primary-color e Giallo a .cmp-component--secondary-color.

Se il colore del marchio dell'azienda dovesse cambiare in futuro, sarà sufficiente modificare le implementazioni singole di .cmp-component--primary-color e .cmp-component--secondary-color e i nomi degli stili.

Il componente Teaser come caso d’uso di esempio the-teaser-component-as-an-example-use-case

Di seguito è riportato un esempio di utilizzo dello stile di un componente Teaser per diversi stili di layout e visualizzazione.

Questo esplorerà come vengono organizzati i nomi degli stili (esposti agli autori) e le classi CSS di base.

Configurazione degli stili dei componenti Teaser component-styles-configuration

L'immagine seguente mostra la configurazione di Stili per il componente Teaser per le varianti descritte nel caso d'uso.

I nomi, il layout e la visualizzazione del gruppo di stili, per casualità, corrispondono ai concetti generali degli stili di visualizzazione e degli stili di layout utilizzati per categorizzare concettualmente i tipi di stili in questo articolo.

I nomi del 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 dei componenti specifiche del progetto.

Ad esempio, il nome del gruppo di stili Visualizzazione avrebbe potuto essere Colori.

Menu di selezione stile style-selection-menu

Nell'immagine seguente viene visualizzato il menu Style con cui gli autori interagiscono per selezionare gli stili appropriati per il componente. Nota che i nomi Style Grpi e i nomi Style sono tutti esposti all'autore.

Stile predefinito default-style

Lo stile predefinito è spesso lo stile più comunemente utilizzato del componente e la visualizzazione predefinita e non formattata del teaser quando viene aggiunto a una pagina.

A seconda della compatibilità dello stile predefinito, il CSS può essere applicato direttamente a .cmp-teaser (senza modificatori) o a .cmp-teaser--default.

Se le regole di stile predefinite si applicano il più delle volte a tutte le varianti, è consigliabile utilizzare .cmp-teaser come classi CSS dello stile predefinito, poiché tutte le varianti devono ereditare implicitamente le varianti, supponendo che vengano seguite le convenzioni di tipo 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 di stile di componente. In caso contrario, queste regole di stile dovranno essere ignorate in ogni variante.

È anche possibile assegnare uno stile "denominato" come stile predefinito, ad esempio lo stile Hero (.cmp-teaser--hero) definito di seguito, tuttavia è più chiaro implementare lo stile predefinito rispetto alle implementazioni di classe CSS .cmp-teaser o .cmp-teaser--default.

Stile promozionale promo-style

Lo stile di layout Promo viene utilizzato per promuovere contenuti di alto valore nel sito ed è disposto orizzontalmente per occupare una banda di spazio nella pagina Web e deve essere personalizzabile in base ai colori del marchio, con lo stile di layout Promo predefinito che utilizza il testo nero.

A questo scopo, nel sistema di stili AEM per il componente Teaser sono configurati uno stile di layout di Promo e stili di visualizzazione di Verde e Giallo.

Valore predefinito promozione

Promozione principale

Promo secondario

Stile promo allineato a destra promo-r-align

Lo stile di layout Promo allineato a destra è una variante dello stile Promo che inverte la posizione dell'immagine e del testo (immagine a destra, testo a sinistra).

L’allineamento a destra, nel suo nucleo, è uno stile di visualizzazione, che potrebbe essere inserito nel Sistema di stili AEM come uno stile di visualizzazione selezionato insieme allo stile di layout Promo. Ciò viola la best practice di:

Mostra solo le combinazioni di stili con effetto

…che è già stato violato nello stile Predefinito.

Poiché l'allineamento corretto influisce solo sullo stile di layout Promo e non sugli altri 2 stili di layout: predefinito ed eroe, è possibile 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 di stile può anche aiutare a ridurre il numero di stili e permutazioni di stile disponibili, il che è meglio ridurre al minimo.

Nota che il nome della classe CSS, cmp-teaser--alternate, non deve corrispondere alla nomenclatura descrittiva di "Allineato a destra".

Impostazione predefinita promozionale allineata a destra

Promozione - Principale allineato a destra

Promo Allineato a destra Secondario

Stile protagonista hero-style

Lo stile di layout Eroe visualizza l’immagine dei componenti come sfondo con il titolo e il collegamento sovrapposti. Lo stile di layout Eroe, come lo stile di layout Promo, deve essere colorabile con i colori del marchio.

Per colorare lo stile di layout Eroe con i colori del marchio, è possibile utilizzare gli stessi stili di visualizzazione utilizzati per lo stile di layout Promo.

Per ogni componente, il nome dello stile è mappato al 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 definendo l’ambito delle regole CSS, tuttavia, questo richiede agli sviluppatori CSS di capire come queste permutazioni vengono emanate sull’AEM.

CSS per colorare lo sfondo dello stile di layout Promuovi con il colore principale (verde):

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

CSS per colorare il testo dello stile di layout Hero con il colore primario (verde):

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

Valore predefinito protagonista

Primaria protagonista

Eroe secondario

Risorse aggiuntive additional-resources