AMCSS - Módulos de Atributos para CSS

Esta página é uma tradução do artigo http://amcss.github.io/, com pequenas adaptações.

Attribute Modules (AM) é uma técnica para usar os atributos HTML e seus valores em vez de classes para estilizar os elementos. Ao fazê-lo, cada atributo declara efetivamente um namespace separado para encapsular as informações de estilo, resultando em um HTML e CSS mais legíveis e de fácil manutenção.

Não se trata nem de um framework, nem de uma biblioteca. É um estilo que melhor descreve os componentes que você está construindo. Para uma introdução sobre como AM foi desenvolvido, veja o post original de Glen Maddern. Já tem uma especificação disponível no GitHub.

Exemplo: botões do Bootstrap

Os botões são um dos melhores exemplos de aplicação de AM. Aqui temos alguns exemplos de marcação dos botões do Bootstrap.

<! - Botão primário Grande ->
<a class="btn btn-primary btn-lg"> Botão primário Grande </a>
<a am-Button="primary large"> Botão primário Grande </a>

<! - Botão Padrão ->
<a class="btn btn-default"> Botão Padrão </a>
<a am-Button> Botão Padrão </a>

<! - Botão de informação pequeno ->
<a class="btn btn-info btn-sm"> Botão de informação pequeno </a>
<a am-Button="info small"> Botão de informação pequeno </a>

<! - Botão de perigo extra-pequeno ->
<a class="btn btn-danger btn-xs"> Botão de perigo extra-pequeno </a>
<a am-Button="danger extra-small"> Botão de perigo extra-pequeno </a>

A marcação Bootstrap original é fortemente baseada na convenção de que todos os botões exigem uma classe btn e outras classes de botão específicas prefixadas por btn-. Isso resulta em um markup desordenado e repetitivo.

A versão de AM, por sua vez, utiliza o atributo am-Button como um identificador, e permite modificadores aditivos simples e naturais (large, small, pequeno, grande, primary, primario, etc.).

As mudanças no CSS são bastante simples:

.btn
[am-Button] {/ * estilos botão padrão * /}

.btn-primary
[am-Button~="primary"] {/ * cores básicas * /}

.btn-large
[am-Button~= "large"] {/ * definições de dimensionamento * /}

Exemplo: Flexbox Grid

Já é de praxe usarmos algum sistema de grade, e Flexbox Grid é uma boa opção. Aqui temos convertido um exemplo de marcação em um estilo AM.

<div class="row reverse">
 <div class="column-12--hand column-8--lap">
 <div class="box">Responsive</div>
 </ div>
</ div>
<div am-Grid-Row="reverse">
 <div am-Grid-Col="12 lap:8">
 <div am-Demo="box">Responsive</div>
 </ div>
</ div>

A marcação inicial tem alguns problemas comuns a todos os sistemas de grade baseados em classes. Como as classes da grade são usadas com tanta freqüência, ela usa classes css relativamente nuas, como row e reverse, mas como as colunas precisam ser responsivas, ela evita uma classe col global e define classes col-breakpoint-número.

A marcação AM, por outro lado, define os módulos am-Grid-Row e am-Grid-Col, e uma vez que cada um desses define um namespace, ficamos livres para usar os valores de nossa escolha. Estes valores podem usar uma gama de caracteres muito maior do que é permitido com classes, de modo que podemos utilizar a sintaxe breakpoint:número, o que é mais fácil de entender imediatamente. Nós também podemos adotar uma abordagem mobile-first, omitindo o breakpoint hand.

Exemplo: traços reutilizáveis

Considerando AM uma evolução do estilo de nomeação BEM, você também pode considerar um módulo que defina um namespace mais geral para o agrupamento de estilos relacionados. Semelhante às classes de utilidade em Suit CSS, estes podem ser considerados como traços de estilo reutilizáveis, que podem ser aplicados sobre ou no interior de componentes.

<div class = "u-posAbsoluteCenter">
 <div class = "u-textTruncate u-textCenter">
 Texto super centralizado.
 </ div>
</ div>
<div am-position = "center absolute">
 <div am-text = "center truncate">
 Texto super centralizado.
 </ div>
</ div>

Aqui podemos aproveitar o fato de que os valores para am-position e am-text operam em diferentes namespaces, para que possamos utilizar o valor center em ambos os lugares, sem a preocupação com conflitos de nomes.

Mais exemplos no Github