Revise o conteúdo em Noções básicas sobre como codificar para o Sistema de estilos, para garantir a compreensão das convenções do tipo BEM utilizadas pelo Sistema de Estilos AEM.
Há dois tipos ou estilos principais que são implementados para o Sistema de Estilos do AEM:
Estilos de layout afetar muitos elementos de um Componente para criar uma representação bem definida e identificável (design e layout) do componente, alinhando-se frequentemente a um conceito específico de Marca reutilizável. Por exemplo, um componente Teaser pode ser apresentado no layout tradicional baseado em cartão, em um estilo Promocional horizontal ou como um layout Hero sobrepondo o texto em uma imagem.
Estilos de exibição são usados para afetar pequenas variações nos estilos de Layout. No entanto, eles 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 mudam 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 autores de AEM, é melhor:
À medida que o número de combinações de estilo possíveis disponíveis para autores de AEM aumenta, mais permutas existem que devem ser de controle de qualidade e validadas em relação aos padrões da marca. Muitas opções também podem confundir os autores, pois pode não ficar claro qual opção ou combinação é necessária para produzir o efeito desejado.
Nomes de estilo, ou as opções apresentadas a autores de AEM, e os nomes de classe CSS de implementação são dissociados no AEM.
Isso permite que as opções de estilo sejam rotuladas em um vocabulário claro e compreendido pelos autores do AEM, mas permite que os desenvolvedores de CSS nomeiem as classes CSS de uma maneira semântica e inovadora. Por exemplo:
Um componente deve ter as opções para ser colorido com o da marca principal e secundário cores, no entanto, os autores AEM conhecem as cores como verde e amarelo, em vez do idioma de design primário e secundário.
O Sistema de Estilos AEM pode expor esses estilos de exibição de cores usando rótulos amigáveis para o autor Verde e Amarelo, permitindo que os desenvolvedores de CSS usem a nomeação semântica de .cmp-component--primary-color
e .cmp-component--secondary-color
para definir a implementação do 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, basta mudar 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 caso de uso de estilo de um componente de 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 apoio são organizadas.
A imagem a seguir mostra o Estilos Configuração do componente de Teaser para as variações discutidas no caso de uso.
A variável Grupo de estilos Os nomes, o Layout e a Exibição correspondem, por acaso, aos conceitos gerais de Estilos de exibição e Estilos de layout usados para categorizar conceitualmente os tipos de estilos neste artigo.
A variável Grupo de estilos nomes e o número de Grupos de Estilos deve ser personalizado para o caso de uso do componente e para as convenções de estilo do componente específico do projeto.
Por exemplo, a variável Exibir o nome do grupo de estilos poderia ter sido nomeado Cores.
A imagem abaixo mostra o Estilo os autores de menu interagem com o para selecionar os estilos apropriados para o componente. Observe que Gráfico de Estilo Os nomes do, bem como os nomes dos Estilos, são expostos ao autor.
O estilo padrão é geralmente o estilo mais usado do componente e a exibição padrão sem estilo do teaser quando adicionado a uma página.
Dependendo da semelhança do estilo padrão, o CSS pode ser aplicado diretamente no .cmp-teaser
(sem modificadores) ou em um .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 classes CSS do estilo padrão, já que todas as variações devem herdá-las implicitamente, supondo que as convenções semelhantes ao BEM sejam seguidas. Caso contrário, eles devem ser aplicados por meio do modificador padrão, como .cmp-teaser--default
, que por sua vez precisa ser adicionado à Classes CSS padrão da configuração de estilo do componente , caso contrário, essas regras de estilo terão que ser substituídas em cada variação.
É possível até mesmo atribuir um estilo "nomeado" como o estilo padrão, por exemplo, o estilo Hero (.cmp-teaser--hero)
definido abaixo, no entanto, é mais claro implementar o estilo padrão em relação ao .cmp-teaser
ou .cmp-teaser--default
Implementações da 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 de Exibição na ferramenta de seleção Sistema de Estilos AEM.
Isso em violação das práticas recomendadas:
Expor apenas combinações de estilo que tenham efeito
Se um autor selecionar o Estilo de exibição de Verde nada acontecerá.
Nesse caso de uso, admitiremos essa violação, pois todos os outros estilos de layout devem ser coloridos usando as cores da marca.
No Promoção (alinhado à direita) abaixo, veremos como evitar combinações de estilos indesejadas.
.cmp-teaser--promo
ou .cmp-teaser--default
A variável 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 poder ser estilizado por cores da marca, com o estilo de layout Promo padrão usando texto preto.
Para isso, uma estilo de layout de Promoção e a variável estilos de exibição de Verde e Amarelo são configurados no Sistema de Estilos AEM para o componente de 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
A variável Promoção alinhada à direita O estilo de layout é uma variação do estilo Promocional, que inverte a localização da imagem e do texto (imagem à direita, texto à esquerda).
O alinhamento direito, em seu núcleo, é um estilo de exibição, ele pode ser inserido no Sistema de estilo AEM como um Estilo de exibição selecionado em conjunto com o estilo de layout Promo. Isso viola as práticas recomendadas do:
Expor apenas combinações de estilo que tenham efeito
…que já foi violada no Estilo padrão.
Como o alinhamento direito 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 minimizar.
Observe o nome da classe CSS, cmp-teaser--alternate
, não precisa corresponder à nomenclatura compatível com o autor de "alinhado à 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 Herói exibe a imagem dos componentes como um plano de fundo com o título e o link sobrepostos. O estilo de layout Hero, como o estilo de layout Promo, deve ser colorido com as cores da marca.
Para colorir o estilo de layout Hero com as cores da marca, os mesmos estilos de exibição usados para o estilo de layout Promo podem ser aproveitados.
Por componente, o nome do estilo é mapeado para o único conjunto de classes CSS, o que significa que os nomes de Classe CSS que colorem o plano de fundo do estilo de layout Promo devem colorir o texto e o link do estilo de layout Hero.
Isso pode ser feito trivialmente definindo o escopo das regras de CSS, no entanto, isso requer que os desenvolvedores de CSS entendam como essas permutações são aplicadas no AEM.
CSS para colorir o plano de fundo do 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 do 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