Questo video illustra l’anatomia dei CSS (o LESS) e JavaScript utilizzati per assegnare uno stile al componente titolo di base di Experience Manager utilizzando il sistema di stili, nonché il modo in cui questi stili vengono applicati all’HTML e al DOM.
Il pacchetto AEM fornito (technical-review.sites.style-system-1.0.0.zip) installa lo stile del titolo dell'esempio, i criteri di esempio per i componenti Contenitore di layout We.Retail e Titolo e una pagina di esempio.
technical-review.sites.style-system-1.0.0.zip
Di seguito è riportata la definizione LESS per lo stile di esempio trovato in:
/apps/demo/sites/style-system/clientlib-example/components/titles/styles/example.less
Per coloro che preferiscono il CSS, sotto questo frammento di codice si trova il CSS in cui viene compilato questo LESS.
/* LESS */
.cmp-title--example {
.cmp-title {
text-align: center;
.cmp-title__text {
color: #EB212E;
font-weight: 600;
font-size: 5rem;
border-bottom: solid 1px #ddd;
padding-bottom: 0;
margin-bottom: .25rem
}
// Last Modified At element injected via JS
.cmp-title__last-modified-at {
color: #999;
font-size: 1.5rem;
font-style: italic;
font-weight: 200;
}
}
}
I dati riportati sopra LESS vengono compilati in modo nativo per Experience Manager nel seguente CSS.
/* CSS */
.cmp-title--example .cmp-title {
text-align: center;
}
.cmp-title--example .cmp-title .cmp-title__text {
color: #EB212E;
font-weight: 600;
font-size: 5rem;
border-bottom: solid 1px #ddd;
padding-bottom: 0;
margin-bottom: 0.25rem;
}
.cmp-title--example .cmp-title .cmp-title__last-modified-at {
color: #999;
font-size: 1.5rem;
font-style: italic;
font-weight: 200;
}
Il seguente JavaScript raccoglie e inserisce l’ultima data e l’ora di modifica della pagina corrente sotto il testo del titolo quando lo stile Esempio viene applicato al componente Titolo.
L’utilizzo di jQuery è facoltativo, così come le convenzioni di denominazione utilizzate.
Di seguito è riportata la definizione LESS per lo stile di esempio trovato in:
/apps/demo/sites/style-system/clientlib-example/components/titles/styles/js/title.js
/**
* JavaScript supporting Styles may be re-used across multi Component Styles.
*
* For example:
* Many styles may require the Components Image (provided via an <img> element) to be set as the background-image.
* A single JavaScript function may be used to adjust the DOM for all styles that required this effect.
*
* JavaScript must react to the DOMNodeInserted event to handle style-switching in the Page Editor Authoring experience.
* JavaScript must also run on DOM ready to handle the initial page load rendering (AEM Publish).
* JavaScript must mark and check for elements as processed to avoid cyclic processing (ie. if the JavaScript inserts a DOM node of its own).
*/
jQuery(function ($) {
"use strict;"
moment.locale("en");
/**
* Method that injects p element, containing the current pages last modified date/time, under the title text.
*
* Similar to the CSS Style application, component HTML elements should be targeted via the BEM class names (as they define the stable API)
* and targeting "raw" elements (ex. "li", "a") should be avoided.
*/
function applyComponentStyles() {
$(".cmp-title--example").not("[data-styles-title-last-modified-processed]").each(function () {
var title = $(this).attr("data-styles-title-last-modified-processed", true),
url = Granite.HTTP.getPath() + ".model.json";
$.getJSON(url, function(data) {
var dateObject = moment(data['lastModifiedDate']),
titleText = title.find('.cmp-title__text');
titleText.after($("<p>").addClass("cmp-title__last-modified-at").text("Last modified " + dateObject.fromNow()));
});
});
}
// Handle DOM Ready event
applyComponentStyles();
// Apply Styles when a component is inserted into the DOM (ie. during Authoring)
$(".responsivegrid").bind("DOMNodeInserted", applyComponentStyles);
});
Buono : tutti gli elementi del componente sono indirizzabili tramite la notazione BEM:
<!-- Good practice -->
<div class="cmp-list">
<ul class="cmp-list__item-group">
<li class="cmp-list__item">...</li>
</ul>
</div>
Scorretto : gli elementi elenco ed elenco sono indirizzabili solo in base al nome dell’elemento:
<!-- Bad practice -->
<div class="cmp-list">
<ul>
<li>...</li>
</ul>
</div>
È meglio esporre più dati e nasconderli piuttosto che esporre troppi dati che richiedono uno sviluppo back-end futuro per esporli.
L’implementazione di pulsanti per contenuti modificabili dall’autore consente di mantenere l’HTML snello, consentendo agli autori di selezionare gli elementi di contenuto scritti nell’HTML. L’ può essere particolarmente importante quando si scrivono immagini nell’HTML che potrebbero non essere utilizzate per tutti gli stili.
L’eccezione a questa regola è quando le risorse costose, ad esempio le immagini, sono esposte per impostazione predefinita, in quanto le immagini dell’evento nascoste da CSS vengono, in questo caso, recuperate inutilmente.
Il sistema di stili crea una piccola divergenza tecnica rispetto a BEM, in quanto le BLOCK
e BLOCK--MODIFIER
non vengono applicate allo stesso elemento, come specificato da BEM.
Al contrario, a causa di vincoli di prodotto, il valore BLOCK--MODIFIER
viene applicato all'elemento principale dell'elemento BLOCK
.
Tutti gli altri tenant di BEM devono essere allineati con.
Utilizza i preprocessori come LESS (supportato da AEM nativamente) o SCSS (richiede un sistema di compilazione personalizzato) per consentire una chiara definizione CSS e la riutilizzabilità.
mantenere uniforme il peso/specificità del selettore; Questo aiuta a evitare e risolvere i conflitti CSS difficili da identificare.
Organizza ogni stile in un file discreto.
@imports
o se è richiesto un CSS non elaborato, tramite l’inclusione di file nella libreria client HTML o sistemi di creazione di risorse front-end personalizzati.Evita di mescolare molti stili complessi.
Utilizza sempre le classi CSS (seguendo la notazione BEM) per definire regole CSS.
Evita di applicare lo stile BLOCK--MODIFIER
direttamente in quanto è collegato alla griglia reattiva. La modifica della visualizzazione di questo elemento può influenzare il rendering e la funzionalità della griglia reattiva, quindi solo lo stile a questo livello quando l’intento è quello di modificare il comportamento della griglia reattiva.
Applica l’ambito dello stile utilizzando BLOCK--MODIFIER
. Il BLOCK__ELEMENT--MODIFIERS
può essere utilizzato nel componente, ma poiché il BLOCK
rappresenta il componente e il componente è lo stile, lo stile viene "definito" e delimitato tramite BLOCK--MODIFIER
.
Esempio di struttura del selettore CSS:
Selettore di primo livello BLOCCO - MODIFICATORE |
Selettore di secondo livello BLOCCO |
Selettore di terzo livello BLOCK_ELEMENT |
Selettore CSS efficace | |
.cmp-list—scura | .cmp-list | .cmp-list__item | → | .cmp-list—scura .cmp-list .cmp-list__item { colore: blu; } |
.cmp-image—hero | .cmp-image | .cmp-image_caption | → | .cmp-image—hero .cmp-image .cmp-image_caption { colore: rosso; } |
Nel caso dei componenti nidificati, la profondità del selettore CSS per questi elementi dei componenti nidificati supererà il selettore di terzo livello. Ripetere lo stesso pattern per il componente nidificato, ma con l’ambito del componente principale BLOCK
. In altre parole, avvia il BLOCK
del componente nidificato al terzo livello e il ELEMENT
del componente nidificato sarà al quarto livello di selettore.
Le best practice definite in questa sezione riguardano "style-JavaScript" o JavaScript appositamente progettato per manipolare il componente a scopo stilistico, anziché funzionale.
BLOCK--MODIFIERs
.BLOCK--MODIFIER BLOCK
e mostralo quando tutte le manipolazioni DOM in JavaScript sono completate.