En este vídeo echaremos un vistazo a la anatomía del CSS (o LESS) y JavaScript se utilizan para aplicar estilo al componente de título principal de Experience Manager mediante el sistema de estilos, así como la forma en que se aplican estos estilos al HTML y al DOM.
AEM El paquete de datos proporcionado (technical-review.sites.style-system-1.0.0.zip) instala el estilo de título de ejemplo, las directivas de ejemplo para los componentes Contenedor de diseño y Título de We.Retail y una página de ejemplo.
technical-review.sites.style-system-1.0.0.zip
El siguiente es el LESS definición del estilo de ejemplo que se encuentra en:
/apps/demo/sites/style-system/clientlib-example/components/titles/styles/example.less
Para aquellos que prefieren CSS, debajo de este fragmento de código está CSS esto LESS se compila en.
/* 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;
}
}
}
Lo anterior LESS es compilado de forma nativa por el Experience Manager en el siguiente 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;
}
El siguiente JavaScript recopila e inserta la fecha y la hora de la última modificación de la página actual debajo del texto del título cuando se aplica el estilo de ejemplo al componente Título.
El uso de jQuery es opcional, así como las convenciones de nomenclatura utilizadas.
El siguiente es el LESS definición del estilo de ejemplo que se encuentra en:
/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);
});
Bueno - Todos los elementos del componente se pueden dirigir mediante la notación BEM:
<!-- Good practice -->
<div class="cmp-list">
<ul class="cmp-list__item-group">
<li class="cmp-list__item">...</li>
</ul>
</div>
Malo - Los elementos de lista y lista solo se pueden dirigir por nombre de elemento:
<!-- Bad practice -->
<div class="cmp-list">
<ul>
<li>...</li>
</ul>
</div>
Es mejor exponer más datos y ocultarlos que exponer demasiado pocos datos que requieran un futuro desarrollo back-end para exponerlos.
La implementación de alternancias de contenido con capacidad de creación puede ayudar a mantener este HTML ágil, por lo que los autores pueden seleccionar qué elementos de contenido se escriben en el HTML. El puede ser especialmente importante a la hora de escribir imágenes en el HTML que pueden no utilizarse para todos los estilos.
La excepción a esta regla se produce cuando los recursos caros, como las imágenes, se exponen de forma predeterminada, ya que las imágenes de evento ocultas por CSS se recuperan, en este caso, de forma innecesaria.
El sistema de estilos presenta una pequeña divergencia técnica con BEM, ya que la variable BLOCK
y BLOCK--MODIFIER
no se aplican al mismo elemento, según lo especificado por BEM.
En su lugar, debido a restricciones del producto, la variable BLOCK--MODIFIER
se aplica al elemento principal del BLOCK
Elemento.
Todos los demás inquilinos de BEM debe estar alineado con.
Utilice preprocesadores como MENOS AEM (compatible con la opción de forma nativa con) o SCSS (requiere un sistema de compilación personalizado) para permitir una definición de CSS clara y la reutilización.
Mantenga la uniformidad en cuanto a peso/especificidad del selector. Esto ayuda a evitar y resolver conflictos en cascada de CSS difíciles de identificar.
Organice cada estilo en un archivo discreto.
@imports
o si se requiere CSS sin procesar, mediante la inclusión de archivos de la biblioteca de cliente de HTML o sistemas personalizados de compilación de recursos front-end.Evite mezclar muchos estilos complejos.
Utilice siempre clases CSS (siguiendo la notación de BEM) para definir reglas CSS.
Evite aplicar estilo al BLOCK--MODIFIER
directamente, ya que se adjunta a la cuadrícula adaptable. Cambiar la visualización de este elemento puede afectar al procesamiento y la funcionalidad de la cuadrícula adaptable, por lo que solo aplicar estilo en este nivel cuando la intención es cambiar el comportamiento de la cuadrícula adaptable.
Aplicar ámbito de estilo utilizando BLOCK--MODIFIER
. El BLOCK__ELEMENT--MODIFIERS
se puede utilizar en el componente, pero como el BLOCK
representa el componente, y el componente es el que tiene estilo, el estilo se "define" y se define mediante BLOCK--MODIFIER
.
Ejemplo de estructura del selector de CSS debe ser la siguiente:
Selector de primer nivel BLOQUE: MODIFICADOR |
Selector de segundo nivel BLOQUEO |
Selector de 3er nivel BLOCK__ELEMENT |
Selector CSS efectivo | |
.cmp-list-dark | .cmp-list | .cmp-list__item | → | .cmp-list-dark .cmp-list .cmp-list__item { color: azul; } |
.cmp-image-hero | .cmp-image | .cmp-image__caption | → | .cmp-image-hero .cmp-image .cmp-image__caption { color: rojo; } |
En el caso de los componentes anidados, la profundidad del selector CSS para estos elementos de componente anidados excederá el selector de tercer nivel. Repita el mismo patrón para el componente anidado, pero con el ámbito del componente principal BLOCK
. O en otras palabras, inicie el componente anidado de BLOCK
en el tercer nivel y en el del componente anidado ELEMENT
se encuentra en el nivel del selector 4.
Las prácticas recomendadas definidas en esta sección pertenecen a style-JavaScript o JavaScript, que está diseñado específicamente para manipular el componente con fines estilísticos en lugar de funcionales.
BLOCK--MODIFIERs
.BLOCK--MODIFIER BLOCK
y mostrarlo cuando se hayan completado todas las manipulaciones de DOM en JavaScript.