Prácticas recomendadas para el sistema de estilos understanding-style-organization-with-the-aem-style-system

AEM Hay dos sabores o estilos principales que se implementan para el sistema de estilos de:

Los estilos de diseño afectan a muchos elementos de un componente para crear una representación bien definida e identificable (diseño y diseño) del componente, a menudo alineándose con un concepto de marca reutilizable específico. Por ejemplo, un componente Teaser puede presentarse en el diseño tradicional basado en tarjetas, en un estilo promocional horizontal o como un diseño Hero que superponga el texto en una imagen.

Los estilos de presentación se utilizan para modificar variaciones menores de los estilos de presentación, pero no cambian la naturaleza ni la intención fundamentales del estilo de presentación. Por ejemplo, un estilo de diseño Hero puede tener estilos de presentación que cambian el esquema de colores de la combinación de colores de marca principal a la combinación de colores de marca secundaria.

Prácticas recomendadas de organización de estilos style-organization-best-practices

AEM Al definir los nombres de estilo disponibles para los autores de la, lo mejor es:

AEM A medida que aumenta el número de combinaciones de estilos posibles disponibles para los autores de la, existen más permutaciones que deben someterse a un control de calidad y validarse en relación con los estándares de marca. Demasiadas opciones también pueden confundir a los autores, ya que puede resultar confuso qué opción o combinación se necesita para producir el efecto deseado.

Nombres de estilo frente a clases CSS style-names-vs-css-classes

AEM AEM Los nombres de estilo, o las opciones presentadas a los autores de la, y los nombres de clase CSS de implementación están disociados en las listas de nombres de clase de los distintos elementos de la.

AEM Esto permite que las opciones de Estilo se etiqueten con un vocabulario claro y entendido por los autores de la, pero permite a los desarrolladores de CSS nombrar las clases CSS de una manera semántica y preparada para el futuro. Por ejemplo:

AEM Un componente debe tener las opciones para que se le apliquen colores con los colores principal y secundario de la marca; sin embargo, los autores de la conocen los colores como verde y amarillo, en lugar del idioma de diseño principal y secundario.

AEM El sistema de estilos de estilo de la puede exponer estos estilos de visualización para colorear usando etiquetas verdes y amarillas que admiten el autor, mientras que los desarrolladores de CSS pueden usar nombres semánticos de .cmp-component--primary-color y .cmp-component--secondary-color para definir la implementación de estilo real en CSS.

El nombre de estilo de Green está asignado a .cmp-component--primary-color y Yellow a .cmp-component--secondary-color.

Si el color de marca de la compañía cambia en el futuro, todo lo que debe cambiarse son las implementaciones únicas de .cmp-component--primary-color y .cmp-component--secondary-color, y los nombres de Style.

El componente Teaser como ejemplo de uso the-teaser-component-as-an-example-use-case

A continuación se muestra un ejemplo de uso del estilo de un componente Teaser para tener varios estilos diferentes de Diseño y Visualización.

Esto explorará cómo se organizan los nombres de estilo (expuestos a autores) y las clases CSS de respaldo.

Configuración de estilos del componente Teaser component-styles-configuration

La siguiente imagen muestra la configuración de Styles para el componente Teaser para las variaciones analizadas en el caso de uso.

Los nombres, el diseño y la presentación del grupo de estilos Style Group coinciden, por casualidad, con los conceptos generales de los estilos de presentación y los estilos de presentación utilizados para categorizar conceptualmente los tipos de estilos en este artículo.

Los nombres de Style Group y el número de Style Groups deben adaptarse al caso de uso del componente y a las convenciones de estilo de componentes específicas del proyecto.

Por ejemplo, el nombre del grupo de estilos Pantalla podría haberse denominado Colores.

Menú de selección de estilo style-selection-menu

La siguiente imagen muestra el menú Estilo con el que interactúan los autores para seleccionar los estilos adecuados para el componente. Tenga en cuenta que los nombres Style Graph, así como los nombres Style, se exponen al autor.

Estilo predeterminado default-style

El estilo predeterminado suele ser el estilo más utilizado del componente y la vista predeterminada sin estilo del teaser cuando se agrega a una página.

Según lo común del estilo predeterminado, CSS se puede aplicar directamente en .cmp-teaser (sin ningún modificador) o en .cmp-teaser--default.

Si las reglas de estilo predeterminadas se aplican con mayor frecuencia que no a todas las variaciones, es mejor utilizar .cmp-teaser como las clases CSS del estilo predeterminado, ya que todas las variaciones deben heredarlas implícitamente, suponiendo que se sigan convenciones de tipo BEM. Si no es así, se deben aplicar mediante el modificador predeterminado, como .cmp-teaser--default, que a su vez debe agregarse al campo Clases CSS predeterminadas🔗 de la configuración de estilo del componente de lo contrario, estas reglas de estilo deberán anularse en cada variación.

Incluso es posible asignar un estilo "con nombre" como estilo predeterminado, por ejemplo, el estilo Hero (.cmp-teaser--hero) definido a continuación, aunque es más claro implementar el estilo predeterminado en las implementaciones de clase CSS .cmp-teaser o .cmp-teaser--default.

Estilo de promoción promo-style

El estilo de diseño de Promoción se usa para promocionar contenido de alto valor en el sitio, se coloca horizontalmente para ocupar una banda de espacio en la página web y debe poder aplicar estilos con colores de marca, con el estilo de diseño de Promoción predeterminado que utiliza texto en negro.

AEM Para conseguirlo, un estilo de diseño de Promoción y los estilos de visualización de Verde y Amarillo están configurados en el sistema de estilos de la para el componente Teaser.

Predeterminado de promoción

Promoción principal

Promoción secundaria

Promoción Estilo alineado a la derecha promo-r-align

El estilo de diseño Promoción alineada a la derecha es una variación del estilo Promoción que gira la ubicación de la imagen y el texto (imagen a la derecha, texto a la izquierda).

AEM La alineación correcta, en su núcleo, es un estilo de visualización, podría introducirse en el sistema de estilos de como un estilo de visualización que se selecciona junto con el estilo de diseño Promoción. Esto infringe la práctica recomendada de:

Exponer solo las combinaciones de estilos que tienen un efecto

…que ya se violó en el estilo predeterminado.

Dado que la alineación correcta solo afecta al estilo de diseño Promoción y no a los otros 2 estilos de diseño: predeterminado y a pantalla completa, podemos crear un nuevo estilo de diseño Promoción (alineado a la derecha) que incluya la clase CSS que alinea a la derecha el contenido de los estilos de diseño Promoción: cmp -teaser--alternate.

Esta combinación de varios estilos en una sola entrada de estilo también puede ayudar a reducir el número de estilos disponibles y las permutaciones de estilo, lo que es mejor minimizar.

Observe que el nombre de la clase CSS, cmp-teaser--alternate, no tiene que coincidir con la nomenclatura compatible con el autor de "alineado a la derecha".

Promoción predeterminada alineada a la derecha

Promoción principal alineada a la derecha

Promoción secundaria alineada a la derecha

Estilo Hero hero-style

El estilo de diseño Hero muestra la imagen de los componentes como fondo con el título y el vínculo superpuestos. El estilo de diseño Hero, como el estilo de diseño Promoción, debe ser coloreable con colores de marca.

Para aplicar color al estilo Diseño principal con colores de marca, se pueden aprovechar los mismos estilos de visualización utilizados para el estilo de diseño Promoción.

Por componente, el nombre del estilo se asigna al único conjunto de clases CSS, lo que significa que los nombres de clase CSS que dan color al fondo del estilo del diseño Promoción deben dar color al texto y al vínculo del estilo del diseño Hero.

AEM Esto se puede lograr trivialmente estableciendo ámbitos para las reglas CSS, sin embargo, esto requiere que los desarrolladores de CSS entiendan cómo se implementan estas permutaciones en los.

CSS para colorear el fondo del estilo de diseño Promote con el color principal (verde):

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

CSS para colorear el texto del estilo de diseño Hero con el color principal (verde):

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

Hero predeterminado

Hero principal

Hero secundario

Recursos adicionales additional-resources