Revise o conteúdo em Como entender o código do sistema de estilos, para garantir a compreensão das convenções semelhantes ao BEM usadas pelo Sistema de estilos AEM.
Há dois sabores ou estilos principais que são implementados para o Sistema de estilos de AEM:
Estilos de layout afetam muitos elementos de um componente para criar uma representação bem definida e identificável (design e layout) do componente, geralmente alinhando com um conceito específico de Marca reutilizável. Por exemplo, um componente Teaser pode ser apresentado no layout tradicional baseado em cartão, um estilo promocional horizontal ou como um layout Herói sobrepondo o texto em uma imagem.
Estilos de exibição são usados para afetar pequenas variações nos estilos de Layout, no entanto, não alteram a natureza ou a intenção fundamental do estilo de Layout. Por exemplo, um estilo de layout Herói pode ter estilos de Exibição que alteram o esquema de cores do esquema de cores da marca principal para o esquema de cores da marca secundária.
Ao definir os nomes de estilo disponíveis para AEM autores, é melhor:
À medida que o número de combinações de estilo possíveis disponíveis para AEM autores aumenta, mais permutas existem que devem ser QA e validadas em relação aos padrões da marca. Muitas opções também podem confundir os autores, pois pode tornar-se pouco claro qual opção ou combinação é necessária para produzir o efeito desejado.
Nomes de estilo ou as opções apresentadas para AEM autores e os nomes de classe CSS implementadores são dissociados em AEM.
Isso permite que as opções de Estilo sejam rotuladas em um vocabulário claro e compreendido pelos autores AEM, mas permite que os desenvolvedores de CSS nomeiem as classes de CSS de maneira semântica e à prova de futuro. Por exemplo:
Um componente deve ter as opções para ser colorido com o principal e secundário cores, no entanto, os autores AEM conhecem as cores como verde e amarelo, em vez da linguagem de design do primário e do secundário.
O Sistema de estilos de AEM pode expor esses estilos de exibição de coloração usando rótulos compatíveis com o autor Verde e Amarelo, permitindo que os desenvolvedores de CSS usem a nomenclatura semântica de .cmp-component--primary-color
e .cmp-component--secondary-color
para definir a implementação de estilo real em CSS.
O nome do Estilo de Verde está mapeado para .cmp-component--primary-color
e Amarelo para .cmp-component--secondary-color
.
Se a cor da marca da empresa mudar no futuro, tudo o que precisa ser alterado são as implementações únicas de .cmp-component--primary-color
e .cmp-component--secondary-color
e os nomes do Estilo.
Veja a seguir um exemplo de uso do estilo de um componente Teaser para ter vários estilos diferentes de Layout e Exibição.
Isso explorará como os nomes de estilo (expostos aos autores) e como as classes CSS de backup são organizadas.
A imagem a seguir mostra o Estilos configuração do componente Teaser para as variações discutidas no caso de uso.
O Grupo de estilos por acaso, os nomes, o Layout e a Exibição correspondem aos conceitos gerais de Estilos de exibição e Estilos de layout usados para categorizar conceitualmente os tipos de estilos neste artigo.
O Grupo de estilos os nomes e o número de Grupos de estilos deve ser adaptado ao caso de uso de componentes e às convenções de estilo de componentes específicas do projeto.
Por exemplo, a variável Exibir o nome do grupo de estilos poderia ter sido Cores.
A imagem abaixo exibe a variável Estilo os autores do menu interagem com o para selecionar os estilos apropriados para o componente. Observe que Gráfico de estilo os nomes, bem como os nomes de Estilo, são expostos ao autor.
O estilo padrão é frequentemente o estilo mais usado do componente, e a exibição padrão e sem estilo do teaser quando adicionado a uma página.
Dependendo da banalidade do estilo padrão, o CSS pode ser aplicado diretamente no .cmp-teaser
(sem modificadores) ou em uma .cmp-teaser--default
.
Se as regras de estilo padrão se aplicarem com mais frequência do que não a todas as variações, é melhor usar .cmp-teaser
como as classes CSS do estilo padrão, já que todas as variações devem herdá-las implicitamente, supondo que as convenções semelhantes a BEM sejam seguidas. Caso contrário, elas deverão ser aplicadas por meio do modificador padrão, como .cmp-teaser--default
, que, por sua vez, deve ser acrescentada à Classes CSS Padrão da configuração de estilo do componente caso contrário, essas regras de estilo terão de ser substituídas em cada variação.
É possível atribuir um estilo "nomeado" como o estilo padrão, por exemplo, o estilo Herdado (.cmp-teaser--hero)
definido abaixo, no entanto, é mais claro implementar o estilo padrão em relação à variável .cmp-teaser
ou .cmp-teaser--default
Implementações de classe CSS.
Observe que o estilo de layout Padrão NÃO tem um nome de estilo de exibição; no entanto, o autor pode selecionar uma opção Exibir na ferramenta de seleção Sistema de estilos de AEM.
Isso em violação da prática recomendada:
Expor somente as combinações de estilo que têm um efeito
Se um autor selecionar o Estilo de exibição de Verde nada acontecerá.
Nesse caso de uso, concederemos essa violação, pois todos os outros estilos de Layout devem ser coloridos usando as cores da marca.
No Promoção (alinhada à direita) abaixo, veremos como evitar combinações de estilos indesejadas.
.cmp-teaser--promo
ou .cmp-teaser--default
O Estilo de layout promocional O é usado para promover conteúdo de alto valor no site e é apresentado horizontalmente para ocupar uma faixa de espaço na página da Web e deve ser passível de estilos por cores da marca, com o estilo de layout promocional padrão usando texto preto.
Para tal, estilo do layout de Promo e estilos de exibição de Verde e Amarelo são configurados no Sistema de estilos AEM para o componente Teaser.
cmp-teaser--promo
.cmp-teaser--promo
cmp-teaser--promo
cmp-teaser--primary-color
cmp-teaser--promo.cmp-teaser--primary-color
cmp-teaser--promo
cmp-teaser--secondary-color
cmp-teaser--promo.cmp-teaser--secondary-color
O Promoção alinhada à direita o estilo de layout é uma variação do estilo Promo que viaja o local da imagem e do texto (imagem à direita, texto à esquerda).
O alinhamento direito, em seu núcleo, é um estilo de exibição, pode ser inserido no Sistema de estilos de AEM como um estilo de exibição selecionado junto com o estilo de layout Promoção. Isso viola a prática recomendada de:
Expor somente as combinações de estilo que têm um efeito
…que já foi violada na Estilo padrão.
Como o alinhamento correto afeta apenas o estilo de layout Promo e não os outros 2 estilos de layout: padrão e herói, podemos criar um novo estilo de layout Promo (alinhado à direita) que inclui a classe CSS que alinha à direita o conteúdo dos estilos de layout Promo : cmp -teaser--alternate
.
Essa combinação de vários estilos em uma única entrada de Estilo também pode ajudar a reduzir o número de estilos e permutas de estilo disponíveis, o que é melhor para minimizar.
Observe o nome da classe CSS, cmp-teaser--alternate
, não precisa corresponder à nomenclatura amigável para autor de "alinhada à direita".
cmp-teaser--promo cmp-teaser--alternate
.cmp-teaser--promo.cmp-teaser--alternate
cmp-teaser--promo cmp-teaser--alternate
cmp-teaser--primary-color
.cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--primary-color
cmp-teaser--promo cmp-teaser--alternate
cmp-teaser--secondary-color
.cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--secondary-color
O estilo de layout Herdado exibe a imagem dos componentes como um plano de fundo com o título e o link sobreposto. O estilo de layout Herói, como o estilo de layout Promoção , deve ser colorido com as cores da marca.
Para colorir o estilo de layout Herdado com as cores da marca, os mesmos estilos de exibição usados para o estilo de layout Promoção podem ser aproveitados.
Por componente, o nome do estilo é mapeado para o conjunto único de classes CSS, o que significa que os nomes de Classe CSS que colorem o plano de fundo do estilo de layout Promoção devem colorir o texto e o link do estilo de layout Herói.
No entanto, isso pode ser obtido por meio do escopo das regras de CSS, no entanto, isso exige que os desenvolvedores de CSS entendam como essas permutas são aplicadas no AEM.
CSS para colorir o plano de fundo da Promover estilo de layout com a cor primária (verde):
.cmp-teaser--promo.cmp-teaser--primary--color {
...
background-color: green;
...
}
CSS para colorir o texto da variável Herói estilo de layout com a cor primária (verde):
.cmp-teaser--hero.cmp-teaser--primary--color {
...
color: green;
...
}
cmp-teaser--hero
.cmp-teaser--hero
cmp-teaser--hero
cmp-teaser--primary-color
cmp-teaser--hero.cmp-teaser--primary-color
cmp-teaser--hero
cmp-teaser--secondary-color
cmp-teaser--hero.cmp-teaser--secondary-color