Noções básicas sobre como codificar para o Sistema de estilos

Neste vídeo, observaremos a anatomia do CSS (ou LESS) e JavaScript usado para estilizar o Componente de título principal do Experience Manager usando o Sistema de estilos, bem como a forma como esses estilos são aplicados ao HTML e ao DOM.

Noções básicas sobre como codificar para o Sistema de estilos

O pacote AEM fornecido (technical-review.sites.style-system-1.0.0.zip) instala o estilo de título de exemplo, políticas de exemplo para os componentes Contêiner de layout e Título do We.Retail, e uma página de exemplo.

technical-review.sites.style-system-1.0.0.zip

O CSS

O seguinte é o LESS definição para o estilo de exemplo encontrado em:

• /apps/demo/sites/style-system/clientlib-example/components/titles/styles/example.less

Para aqueles que preferem CSS, abaixo deste trecho de código está o CSS deste LESS compila em.

/* LESS */
.cmp-title--example {
 .cmp-title {
  text-align: center;

  .cmp-title__text {
   color: #EB212E;
   font-weight: 600;
   font-size: 5rem;
   border-bottom: solid 1px #ddd;
   padding-bottom: 0;
   margin-bottom: .25rem
  }

  // Last Modified At element injected via JS
  .cmp-title__last-modified-at {
   color: #999;
   font-size: 1.5rem;
   font-style: italic;
   font-weight: 200;
  }
 }
}

O exposto acima LESS é compilado nativamente por Experience Manager para o CSS a seguir.

/* CSS */
.cmp-title--example .cmp-title {
 text-align: center;
}

.cmp-title--example .cmp-title .cmp-title__text {
 color: #EB212E;
 font-weight: 600;
 font-size: 5rem;
 border-bottom: solid 1px #ddd;
 padding-bottom: 0;
 margin-bottom: 0.25rem;
}

.cmp-title--example .cmp-title .cmp-title__last-modified-at {
 color: #999;
 font-size: 1.5rem;
 font-style: italic;
 font-weight: 200;
}

O JavaScript

O JavaScript a seguir coleta e injeta a data e hora da última modificação da página atual abaixo do texto do título quando o estilo Exemplo é aplicado ao componente Título.

O uso de jQuery é opcional, assim como as convenções de nomenclatura usadas.

O seguinte é o LESS definição para o estilo de exemplo encontrado em:

• /apps/demo/sites/style-system/clientlib-example/components/titles/styles/js/title.js

/**
 * JavaScript supporting Styles may be re-used across multi Component Styles.
 *
 * For example:
 * Many styles may require the Components Image (provided via an <img> element) to be set as the background-image.
 * A single JavaScript function may be used to adjust the DOM for all styles that required this effect.
 *
 * JavaScript must react to the DOMNodeInserted event to handle style-switching in the Page Editor Authoring experience.
 * JavaScript must also run on DOM ready to handle the initial page load rendering (AEM Publish).
 * JavaScript must mark and check for elements as processed to avoid cyclic processing (ie. if the JavaScript inserts a DOM node of its own).
 */
jQuery(function ($) {
    "use strict;"

    moment.locale("en");

    /**
     * Method that injects p element, containing the current pages last modified date/time, under the title text.
     *
     * Similar to the CSS Style application, component HTML elements should be targeted via the BEM class names (as they define the stable API)
     * and targeting "raw" elements (ex. "li", "a") should be avoided.
     */
    function applyComponentStyles() {

        $(".cmp-title--example").not("[data-styles-title-last-modified-processed]").each(function () {
            var title = $(this).attr("data-styles-title-last-modified-processed", true),
                url = Granite.HTTP.getPath() + ".model.json";

            $.getJSON(url, function(data) {
                var dateObject = moment(data['lastModifiedDate']),
                    titleText = title.find('.cmp-title__text');

                titleText.after($("<p>").addClass("cmp-title__last-modified-at").text("Last modified " + dateObject.fromNow()));
            });
        });
    }

    // Handle DOM Ready event
    applyComponentStyles();

    // Apply Styles when a component is inserted into the DOM (ie. during Authoring)
    $(".responsivegrid").bind("DOMNodeInserted", applyComponentStyles);
});

Práticas recomendadas de desenvolvimento

Práticas recomendadas do HTML

• O HTML (gerado por HTL) deve ser estruturalmente o mais semântico possível; evitando agrupamento/aninhamento desnecessário de elementos.
• Os elementos HTML devem ser endereçáveis por meio de classes CSS de estilo BEM.

Bom - Todos os elementos no componente são endereçáveis através da notação BEM:

<!-- Good practice -->
<div class="cmp-list">
    <ul class="cmp-list__item-group">
        <li class="cmp-list__item">...</li>
    </ul>
</div>

Ruim - A lista e os elementos da lista são endereçáveis somente pelo nome do elemento:

<!-- Bad practice -->
<div class="cmp-list">
    <ul>
        <li>...</li>
    </ul>
</div>

• É melhor expor mais dados e ocultá-los do que expor poucos dados que precisem de desenvolvimento de back-end futuro para expô-los.

  • A implementação de alternadores de conteúdo editável pode ajudar a manter esse HTML enxuto, permitindo que os autores selecionem quais elementos de conteúdo serão gravados no HTML. As podem ser especialmente importantes ao gravar imagens no HTML que pode não ser usado para todos os estilos.

  • A exceção a essa regra é quando recursos caros, por exemplo, imagens, são expostos por padrão, já que as imagens de eventos ocultas pelo CSS são, nesse caso, buscadas desnecessariamente.

    • Os componentes de imagem modernos geralmente usam JavaScript para selecionar e carregar a imagem mais apropriada para o caso de uso (visor).

Práticas recomendadas de CSS

• Use pré-processadores como MENOS (suportado pelo AEM nativamente) ou SCSS (requer um sistema de compilação personalizado) para permitir uma definição clara de CSS e reutilização.

• Mantenha o peso/especificidade do seletor uniforme; isso ajuda a evitar e resolver conflitos em cascata de CSS difíceis de identificar.

• Organize cada estilo em um arquivo distinto.

  • Esses arquivos podem ser combinados usando LESS/SCSS @imports ou se o CSS bruto for necessário, por meio da inclusão de arquivos da Biblioteca de clientes HTML ou de sistemas personalizados de build de ativos front-end.

• Evite misturar muitos estilos complexos.

  • Quanto mais estilos puderem ser aplicados em uma única vez a um componente, maior será a variedade de permutas. Isso pode se tornar difícil de manter/garantir o alinhamento da marca.

• Sempre use classes CSS (seguindo a notação BEM) para definir regras CSS.

  • Se a seleção de elementos sem classes CSS (ou seja, elementos simples) for absolutamente necessária, mova-os para cima na definição de CSS para deixar claro que eles têm uma especificidade menor do que qualquer colisão com elementos desse tipo que tenham classes CSS selecionáveis.

• Evite estilizar o BLOCK--MODIFIER diretamente, pois está anexada à Grade responsiva. Alterar a exibição desse elemento pode afetar a renderização e a funcionalidade da Grade Responsiva. Portanto, somente o estilo nesse nível quando a intenção for alterar o comportamento da Grade Responsiva.

• Aplicar escopo de estilo usando BLOCK--MODIFIER. A variável BLOCK__ELEMENT--MODIFIERS pode ser usado no componente, mas como BLOCK representa o componente, e o componente é estilizado, o estilo é "definido" e tem escopo definido por BLOCK--MODIFIER.

A estrutura do seletor de CSS de exemplo deve ser a seguinte:

No caso de componentes aninhados, a profundidade do seletor de CSS para esses elementos de componentes aninhados excederá o seletor de terceiro nível. Repita o mesmo padrão para o componente aninhado, mas com escopo definido pelo do componente principal BLOCK. Ou seja, inicie o do componente aninhado BLOCK no terceiro nível e os componentes aninhados do ELEMENT está no quarto nível de seletor.

Práticas recomendadas do JavaScript

As práticas recomendadas definidas nesta seção referem-se ao "JavaScript de estilo" ou ao JavaScript especificamente destinado a manipular o componente para fins estilísticos, em vez de funcionais.

• Style-JavaScript deve ser usado com critério e é um caso de uso minoritário.
• Style-JavaScript deve ser usado principalmente para manipular o DOM do componente para suportar estilos por CSS.
• Reavalie o uso do Javascript se os componentes aparecerem muitas vezes em uma página e entenda o custo computacional e/ou de redesenho.
• Reavalie o uso do Javascript se ele extrair novos dados/conteúdo de forma assíncrona (via AJAX) quando o componente puder aparecer muitas vezes em uma página.
• Lide com as experiências de publicação e criação.
• Quando possível, reutilize o style-Javascript.
  • Por exemplo, se vários estilos de um componente exigirem que sua imagem seja movida para uma imagem de plano de fundo, o JavaScript de estilo poderá ser implementado uma vez e anexado a vários BLOCK--MODIFIERs.
• Separe o JavaScript de estilo do JavaScript funcional quando possível.
• Avalie o custo do JavaScript em relação à manifestação dessas alterações de DOM no HTML diretamente via HTL.
  • Quando um componente que usa JavaScript de estilo exigir modificação no lado do servidor, avalie se a manipulação de JavaScript pode ser trazida no momento e quais são os efeitos/ramificações para o desempenho e a capacidade de suporte do componente.

Considerações sobre desempenho

• O JavaScript de estilo deve ser mantido claro e enxuto.
• Para evitar oscilação e redesenhos desnecessários, oculte inicialmente o componente por meio de BLOCK--MODIFIER BLOCKe mostrá-lo quando todas as manipulações de DOM no JavaScript estiverem concluídas.
• O desempenho das manipulações de JavaScript de estilo é semelhante aos plug-ins básicos de jQuery que anexam e modificam elementos no DOMReady.
• Verifique se as solicitações estão compactadas e se o CSS e o JavaScript estão minificados.

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