Noções básicas sobre as práticas recomendadas do sistema de estilos

Há dois tipos ou estilos principais que são implementados para o Sistema de Estilos do AEM:

• Estilos de layout
• Estilos de exibição

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.

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 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-colore os nomes do estilo.

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 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.

Menu de seleção de estilo

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.

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 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.

• Estilo de layout
  • Padrão
• Estilo de exibição
  • Nenhum
• Classes CSS efetivas: .cmp-teaser--promo ou .cmp-teaser--default

Estilo promocional

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.

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

Estilo promocional alinhado à direita

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".

Padrão alinhado à direita da promoção

• Estilo de layout
  • Nome do estilo: Promoção (alinhado à direita)
  • Classes em CSS: cmp-teaser--promo cmp-teaser--alternate
• Estilo de exibição
  • Nenhum
• Classes CSS efetivas: .cmp-teaser--promo.cmp-teaser--alternate

Principal Promocional Alinhado à Direita

• Estilo de layout
  • Nome do estilo: Promoção (alinhado à direita)
  • Classes em CSS: cmp-teaser--promo cmp-teaser--alternate
• Estilo de exibição
  • Nome do estilo: Verde
  • Classe CSS: cmp-teaser--primary-color
• Classes CSS efetivas: .cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--primary-color

Secundário Promo Alinhado à Direita

• Estilo de layout
  • Nome do estilo: Promoção (alinhado à direita)
  • Classes em CSS: cmp-teaser--promo cmp-teaser--alternate
• Estilo de exibição
  • Nome do estilo: Amarelo
  • Classe CSS: cmp-teaser--secondary-color
• Classes CSS efetivas: .cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--secondary-color

Estilo herói

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;
   ...
}

Herói padrão

• Estilo de layout
  • Nome do estilo: Herói
  • Classe CSS: cmp-teaser--hero
• Estilo de exibição
  • Nenhum
• Classes CSS efetivas: .cmp-teaser--hero

Principal herói

• Estilo de layout
  • Nome do estilo: Promoção
  • Classe CSS: cmp-teaser--hero
• Estilo de exibição
  • Nome do estilo: Verde
  • Classe CSS: cmp-teaser--primary-color
• Classes CSS efetivas: cmp-teaser--hero.cmp-teaser--primary-color

Herói Secundário

• Estilo de layout
  • Nome do estilo: Promoção
  • Classe CSS: cmp-teaser--hero
• Estilo de exibição
  • Nome do estilo: Amarelo
  • Classe CSS: cmp-teaser--secondary-color
• Classes CSS efetivas: cmp-teaser--hero.cmp-teaser--secondary-color

Recursos adicionais

• Documentação do sistema de estilos
• Criação de bibliotecas de clientes AEM
• Site da documentação do BEM (Block Element Modifier)
• LESS Site de documentação
• Site do jQuery

Recursos do Business.Adobe.com

Auto Text Summarization Cms Cloud Customer Communications Responsive Forms Managed Cloud Digital Asset Management