Bernard De Luna (blog, twitter), da MeltDSP, palestrou no evento Front In BH 2012 sobre boas práticas de CSS com o título Estilizando Folhas de Estilo com Estilo (slides).
Minhas anotações
- Ninguém sabe CSS.
- CSS é muito fácil e aí vc vai testando na tentativa e erro.
- Styleshit. A gente não sabe direito o que tá fazendo.
- Performance
- Key selector é o último seletor
- Browser seleciona da direita pra esquerda.
- class vs. id não faz muita diferença na prática
- não use tag.classe, só .classe
- Devíamos usar mais classes no HTML pra qualificar melhor no CSS.
- Não usar * como filho
- Ou implícito:
body [type=text]é na verdade `body [type=text]` - Não use @import
- Evite seletores CSS3: first-child, nth-child etc
- border-radius é bastante custoso. Mais que gradientes e shadows.
- Reflow e Repaint
- Definir tamanho das imagens no CSS ou IMG evita reflows.
- Modularização
- OOCSS: Reuse, Reduce, Recycle
- Classes mais reusáveis.
- Use OCSS + LESS
- Usar variáveis é uma boa.
- Documente o código sempre.
- Crie objetos padrões e reaproveitáveis pro projeto.
- Crie classes baseadas na função e não no conteúdo.
- Smacss é uma alternativa.
- Mágica
- Surpreenda, reinvente, brinque, explore.
- Muitos potenciais hoje em dia.
- old radio em css3 puro - impressionante!
Meus comentários
O Bernard focou bastante nas questões de performance de código CSS, evitar reflows, usar seletores otimizados etc. Concordo que são pontos válidos e realmente eficazes. Só deixo uma ressalva que essas micro otimizações de código CSS só devem ser feitas depois que otimizações maiores já foram feitas - como habilitar gzip ou jogar o JS pra baixo. A não ser que você tenha uma página gigantesca, o impacto prático de usar seletores mais rápidos é bem menor do que a gente imagina.
Sobre CSS modularizável e boas práticas, concordo completamente. Ultimamente tenho me deparado com muito CSS ruim e acoplado em projetos - inclusive meus de anos atrás que hoje preciso dar manutenção. Criar CSS mais flexível e reaproveitável é algo que tenho buscado ultimamente e digo: é muito mais difícil do que parece.
E um comentário especial pro demo impressionante do old radio que ele mostrou no final da palestra. Desenho inteiramente em CSS3 e com Web Audio API por trás. É fantástico.
Outras palestras do Front in BH 2012
Tem a minha palestra sobre otimizações web, incluindo slides, vídeo e post complementar. E as outras:
- Rest Client Side, com Alexandre Gaigalas
- Wordpress aliado do Front End, com Leandro Vieira
- Amazon AWS e CDN no Peixe Urbano, com Alexandre Tabor
- Novo Cinto de Utilidades do Desenvolvedor JavaScript, com Leo Balter
- Desafios do Design Mobile, com Horácio Soares
- CSS Sucks, com Zeno Rocha