Problemática

O que é considerado bom?

• Reproduzir o PSD com perfeição (Pixel Perfect)
• Tableless
• Usar o mínimo de imagens
• CSS3 e todos seus recursos
• Pré-processadores
• Seletores HTML5

O que falta então?

• Código legível
• Fácil alteração ou ampliação
• Modular
• Escalável

Metas para uma boa arquitetura CSS

Previsível

As regras são claras ao ponto dos comportamentos serem previsíves quando utilizados. Adicionar mais estilos deve ser feito de forma fluida seguindo o padrão de toda a aplicação. Alterar ou adicionar estilos não deve afetar outras partes da aplicação.

Reutilizável

Os estilos devem ser abstraídos e desassociados ao ponto de você poder reutilizá-los. Usando regras já existentes para novos componentes.

Sustentável

Quando precisar alterar, adicionar ou reorganizar o conteúdo da aplicação, isso não deve exigir refatoração no código existente. Adicionar um novo componente à uma página existente não deve afetar outros componentes.

Escalável

Não importa se a equipe de front-end é composta por uma ou cem pessoas. O CSS deve ser facilmente gerido e mantido.

Erros comuns

Estilizar usando elemento pai

Um dos erros comuns é usar o elemento pai para determinar o contexto dos filhos.

Complicar sem necessidade

Classes absurdamente genéricas

Compreendendo as partes

Bloco ou componente

Um bloco é uma entidade independente, um "bloco de construção" de uma aplicação. Pode ser simples ou composto (contendo outros blocos).

Elemento

Um elemento é uma parte de um bloco que executa uma certa função. Elementos são dependentes do contexto: eles só fazem sentido no bloco a que pertencem.

Modificador

O uso do modificador é opcional. Basicamente você cria um bloco e mudando o modificador você altera a aparência dele.

Soluções

Convenção de nomenclatura

Usando a metodologia BEM como base

Algumas regras são necessárias

• Nomes são escritos em caixa baixa usando letras e números
• Nomes compostos serão separados por hífen (-)
• Nunca use IDs ou o elemento para estilização apenas classes.

Blocos

Blocos são únicos por isso seus nomes também devem ser. Pode ser adicionado um prefixo para facilitar na hora da nomenclatura. A classe é o próprio nome.

Elementos

Seu nome deve ser único dentro do contexto do bloco, mas pode se repetir de um bloco para outro. A classe é o nome do bloco seguido pelo nome do elemento separado por dois sublinhados (__).

Modificadores

O nome do modificador é composto pelo nome do bloco ou elemento a que pertence. O nome do modificador é delimitado com um único sublinhado (_) ou dois hífens (--).

Organização de arquivos

Usando a metodologia SMACSS como base

Cinco principais categorias:

• Base
• Layout (.l-)
• Module
• State (.is-)
• Theme (placeholder)

Template

Siga uma estrutura lógica de nomenclatura

Conclusão

• CSS não é apenas design visual
• Não jogue fora as melhores práticas de programação
• Seja crítico com seu código
• Não existe bala de prata

Alguns links:

• github.com/neysimoes
• twitter.com/ney_simoes
• medium.com/@neysimes
• ciandt.com/card/vagas-abertas

OBRIGADO!