En este vídeo, echaremos un vistazo a la anatomía de CSS (o LESS) y JavaScript que se usan para aplicar estilo al componente de título principal de Experience Manager mediante el sistema de estilos, así como a cómo se aplican estos estilos al HTML y al DOM.
El paquete de AEM proporcionado (technical-review.sites.style-system-1.0.0.zip) instala el estilo de título de ejemplo, las políticas de ejemplo para los componentes Contenedor de diseño y Título de We.Retail y una página de muestra.
technical-review.sites.style-system-1.0.0.zip
La siguiente es la definición LESS para el estilo de ejemplo que se encuentra en:
/apps/demo/sites/style-system/clientlib-example/components/titles/styles/example.less
Para los que prefieren CSS, bajo este fragmento de código está el CSS en el que LESS se compila.
/* 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;
}
}
}
El LESS anterior 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 inyecta la fecha y hora de la última modificación de la página actual debajo del texto del título cuando se aplica el estilo Ejemplo al componente Título .
El uso de jQuery es opcional, así como las convenciones de nomenclatura utilizadas.
La siguiente es la definición LESS para el 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 notación BEM:
<!-- Good practice -->
<div class="cmp-list">
<ul class="cmp-list__item-group">
<li class="cmp-list__item">...</li>
</ul>
</div>
Incorrecto : 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 del back-end para exponerlos.
La implementación de toggles de contenido que se pueden crear puede ayudar a mantener esta imagen HTML, por lo que los autores pueden seleccionar qué elementos de contenido se escriben en el HTML. El puede ser especialmente importante al escribir imágenes en HTML que no se puedan usar en todos los estilos.
La excepción a esta regla es cuando se exponen de forma predeterminada recursos costosos, por ejemplo imágenes, ya que las imágenes de evento ocultas por CSS se recuperarán innecesariamente en este caso.
El sistema de estilos crea una pequeña divergencia técnica con respecto a BEM, en el sentido de que BLOCK
y BLOCK--MODIFIER
no se aplican al mismo elemento, como se especifica en BEM.
En su lugar, debido a restricciones de producto, el BLOCK--MODIFIER
se aplica al elemento principal del BLOCK
elemento.
Todos los demás inquilinos de BEM deben alinearse con.
Utilice preprocesadores como LESS (compatible con AEM de forma nativa) o SCSS (requiere sistema de compilación personalizado) para permitir una definición CSS clara y la reutilización.
Mantener uniforme el 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 HTML o sistemas personalizados de creación de recursos front-end.Evite mezclar muchos estilos complejos.
Utilice siempre clases CSS (que sigan la notación BEM) para definir reglas CSS.
Evite aplicar estilo al BLOCK--MODIFIER
directamente, ya que está adjunto a la cuadrícula interactiva. Cambiar la visualización de este elemento puede afectar a la renderización y funcionalidad de la cuadrícula interactiva, por lo que solo el estilo de este nivel cuando la intención es cambiar el comportamiento de la cuadrícula interactiva.
Aplique un ámbito de estilo utilizando BLOCK--MODIFIER
. El BLOCK__ELEMENT--MODIFIERS
se puede usar en el componente, pero como el BLOCK
representa el componente y el componente es el estilo, el estilo se "define" y se examina mediante BLOCK--MODIFIER
.
La estructura del selector de CSS de ejemplo debe ser la siguiente:
Selector de primer nivel BLOQUE: MODIFICADOR |
Selector de segundo nivel BLOQUE |
Selector de tercer nivel BLOCK_ELEMENT |
Selector CSS efectivo | |
.cmp-list: oscuro | .cmp-list | .cmp-list__item | → | .cmp-list: oscuro .cmp-list .cmp-list__item { color: azul; } |
.cmp-image—héroe | .cmp-image | .cmp-image_caption | → | .cmp-image—héroe .cmp-image .cmp-image_caption { color: rojo; } |
En el caso de los componentes anidados, la profundidad del selector de CSS para estos elementos de componente anidados superará el selector de tercer nivel. Repita el mismo patrón para el componente anidado, pero con el alcance BLOCK
del componente principal. O, en otras palabras, inicie el BLOCK
del componente anidado en el tercer nivel y el ELEMENT
del componente anidado estará en el cuarto nivel de selector.
Las prácticas recomendadas definidas en esta sección están relacionadas con "style-JavaScript" o JavaScript, que están especialmente pensados para manipular el componente con fines estilísticos y no funcionales.
BLOCK--MODIFIERs
.BLOCK--MODIFIER BLOCK
y muéstrelo cuando se hayan completado todas las manipulaciones DOM en JavaScript.