Best practice per il sistema di stili

Ultimo aggiornamento: 14 luglio 2024
  • Argomenti:

Creato per:

  • Intermedio
  • Esperto
  • Sviluppatore
NOTE
Rivedi il contenuto all'indirizzo Informazioni su come codificare per il sistema di stili, per conoscere le convenzioni di tipo BEM utilizzate dal sistema di stili dell'AEM.

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

  • Stili layout
  • Stili di visualizzazione

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

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

  • Assegnare un nome agli stili utilizzando un vocabolario comprensibile per gli autori
  • Riduci al minimo il numero di opzioni di stile
  • Mostra solo le opzioni e le combinazioni di stile consentite dagli standard del marchio
  • Mostra solo le combinazioni di stili con effetto
    • Se vengono esposte combinazioni inefficaci, assicurarsi che non abbiano almeno un effetto dannoso

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

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

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

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.

Visualizza gruppo di stili

Menu di selezione stile

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.

Menu a discesa Stile

Stile predefinito

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.

NOTE
Lo stile di layout predefinito NON ha un nome di stile di visualizzazione, tuttavia l’autore può selezionare un’opzione di visualizzazione nello strumento di selezione del sistema di stili dell’AEM.
In violazione della best practice:
Mostra solo le combinazioni di stili con effetto
Se un autore seleziona lo stile di visualizzazione Verde, non succede nulla.
In questo caso d’uso, concederemo questa violazione, poiché tutti gli altri stili di Layout devono essere colorabili utilizzando i colori del marchio.
Nella sezione Promo (Allineato a destra) di seguito verrà illustrato come evitare combinazioni di stili indesiderate.

stile predefinito

  • Stile layout
    • Predefiniti
  • Stile visualizzazione
    • Nessuno
  • Classi CSS effettive: .cmp-teaser--promo o .cmp-teaser--default

Stile promozionale

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

predefinito promozionale

  • Stile layout

    • Nome stile: Promo
    • Classe CSS: cmp-teaser--promo

  • Stile visualizzazione

    • Nessuno

  • Classi CSS effettive: .cmp-teaser--promo

Promozione principale

promo primario

  • Stile layout

    • Nome stile: Promo
    • Classe CSS: cmp-teaser--promo

  • Stile visualizzazione

    • Nome stile: Verde
    • Classe CSS: cmp-teaser--primary-color

  • Classi CSS effettive: cmp-teaser--promo.cmp-teaser--primary-color

Promo secondario

Promozione secondaria

  • Stile layout

    • Nome stile: Promo
    • Classe CSS: cmp-teaser--promo

  • Stile visualizzazione

    • Nome stile: Giallo
    • Classe CSS: cmp-teaser--secondary-color

  • Classi CSS effettive: cmp-teaser--promo.cmp-teaser--secondary-color

Stile promo allineato a destra

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

promo allineato a destra

  • Stile layout

    • Nome stile: Promozione (allineato a destra)
    • Classi CSS: cmp-teaser--promo cmp-teaser--alternate

  • Stile visualizzazione

    • Nessuno

  • Classi CSS effettive: .cmp-teaser--promo.cmp-teaser--alternate