Práticas recomendadas de organização de estilo
Ao definir os nomes de estilo disponíveis para autores de AEM, é melhor:
- Nomear estilos usando um vocabulário compreendido pelos autores
- Minimizar o número de opções de estilo
- Expor somente as opções e combinações de estilo permitidas pelos padrões da marca
- Expor apenas combinações de estilo que tenham efeito
- Se combinações ineficazes forem expostas, certifique-se de que pelo menos não tenham um efeito negativo
À 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 vs classes CSS
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 de cores com as cores primárias e secundárias da marca. No entanto, os autores do AEM conhecem as cores como verdes e amarelas, em vez da linguagem de design primária e secundária.
O Sistema de Estilos AEM pode expor esses estilos de exibição de cores usando rótulos amigáveis para autor Verde e Amarelo, enquanto permite que os desenvolvedores CSS usem a nomenclatura semântica de .cmp-component--primary-color
e .cmp-component--secondary-color
para definir a implementação de estilo real no 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 dos estilos.
O componente Teaser como exemplo de caso de uso
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.
Configuração de estilos de componente de teaser
A imagem a seguir mostra a configuração de Estilos do componente de Teaser para as variações discutidas no caso de uso.
Os nomes, o Layout e a Exibição do Grupo de Estilos 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.
Os nomes do Grupo de Estilos e o número de Grupos de Estilos devem ser adaptados ao caso de uso do componente e às convenções de estilo do componente específico do projeto.
Por exemplo, o nome do grupo de estilos Exibição poderia ter sido nomeado como Cores.
Menu de seleção de estilo
A imagem abaixo exibe o menu Estilo com o qual os autores interagem para selecionar os estilos apropriados para o componente. Observe que os nomes da Grade de Estilos, bem como os nomes dos Estilos, são todos expostos ao autor.
Estilo padrão
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 de 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 aplicam 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, assumindo que as convenções do tipo BEM são 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 ao campo 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 contra as implementações de classe CSS .cmp-teaser
ou .cmp-teaser--default
.
- Estilo de layout
- Padrão
- Estilo de exibição
- Nenhum
- Classes CSS Efetivas:
.cmp-teaser--promo
ou.cmp-teaser--default
Estilo promocional
O Estilo de layout promocional é usado para promover conteúdo de alto valor no site e é posicionado horizontalmente para ocupar uma faixa de espaço na página da Web e deve ser estilizável por cores de marca, com o estilo de layout Promocional padrão usando texto preto.
Para isso, um estilo de layout de Promo e os estilos de exibição de Verde e Amarelo estão configurados no Sistema de Estilos AEM para o componente de Teaser.
Padrão promocional
-
Estilo de layout
- Nome do estilo: Promoção
- Classe CSS:
cmp-teaser--promo
-
Estilo de exibição
- Nenhum
-
Classes CSS Efetivas:
.cmp-teaser--promo
Primário da promoção
-
Estilo de layout
- Nome do estilo: Promoção
- Classe CSS:
cmp-teaser--promo
-
Estilo de exibição
- Nome do estilo: Verde
- Classe CSS:
cmp-teaser--primary-color
-
Classes CSS Efetivas:
cmp-teaser--promo.cmp-teaser--primary-color
Secundário promocional
-
Estilo de layout
- Nome do estilo: Promoção
- Classe CSS:
cmp-teaser--promo
-
Estilo de exibição
- Nome do estilo: Amarelo
- Classe CSS:
cmp-teaser--secondary-color
-
Classes CSS Efetivas:
cmp-teaser--promo.cmp-teaser--secondary-color