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

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

• Estilos de layout
• Estilos de exibição

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.

Práticas recomendadas da organização de estilos

Ao definir os nomes de estilo disponíveis para AEM autores, é melhor:

• Nomeie estilos usando um vocabulário compreendido pelos autores
• Minimizar o número de opções de estilo
• Exponha apenas as opções e combinações de estilo permitidas pelos padrões da marca
• Expor somente as combinações de estilo que têm um efeito
  • Caso sejam expostas combinações ineficazes, deve assegurar-se que pelo menos não produzem efeitos negativos

À 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 vs. classes CSS

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

O componente Teaser como um exemplo de caso de uso

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.

Configuração de estilos do componente Teaser

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.

Menu de seleção de estilo

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.

Estilo padrão

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.

• Estilo do 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 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.

Padrão de promoção

• Estilo do layout
  • Nome do estilo: Promo
  • Classe CSS: cmp-teaser--promo
• Estilo de exibição
  • Nenhum
• Classes CSS Efetivas: .cmp-teaser--promo

Principal de promoção

• Estilo do layout
  • Nome do estilo: Promo
  • 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 de promoção

• Estilo do layout
  • Nome do estilo: Promo
  • 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 alinhado à direita promocional

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

Padrão de alinhamento à direita promocional

• Estilo do layout
  • Nome do estilo: Promoção (alinhada à 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 Alinhado à Direita da Promoção

• Estilo do layout
  • Nome do estilo: Promoção (alinhada à 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

Promo secundário alinhado à direita

• Estilo do layout
  • Nome do estilo: Promoção (alinhada à 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 do herói

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

Padrão de Hero

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

Principal Herdado

• Estilo do layout
  • Nome do estilo: Promo
  • 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

Hero Secundary

• Estilo do layout
  • Nome do estilo: Promo
  • 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 AEM bibliotecas de clientes
• Site da documentação BEM (Block Element Modifier)
• MENOS 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