Tableless

Busca Menu

Dicas de como fazer seu próprio framework CSS

Seja o primeiro a comentar por

Algumas anotações da minha palestra na QCon 2013, sobre como fazer seu próprio framework CSS.

Construindo seu framework CSS from Diego Eis

Por que usar Frameworks?

  • Aumentar a eficiência
  • Consistência e padrão de código
  • Compatibilidade mais confiável
  • Fácil manutenção
  • Facilita a repetições de tarefas

Por que não usar Frameworks?

  • Curva de aprendizado
  • HTML engessado
  • CSS engessado
  • Sopa de classes
  • Tem que manter tudo atualizado o tempo todo
  • Versionamento problemático

Separe seu CSS em partes

É bom para manutenção, escalabilidade do código e também evita misturar assuntos diferentes.

Base

CSS Reset, Tipografia, customizações globais e genéricas do seu layout. Aqui é onde você vai colocar as características comuns, que todo o framework usará.

Layout

Grids, responsive e outras decisões de estrutura. Aqui será a casca, a infraestrutura do seu framework. É onde você decide como vai se comportar mas mediaqueries de estrutura e comportamentos de grid.

Módulos

Aqui entra o grande trabalho do seu framwork. São os elementos criados em módulos: botões, alertas, tables, tabs, collapses, sliders, headers, listas e etc…

Alguns desenvolvedores podem querer dividir alguns elementos como collapses, modais e etc em outra parte chamada ESTADOS. Que agrupam elementos que tem comportamentos como abrir e fechar, aparecer e desaparecer, coisas do tipo.

Themes

Aqui depende muito da sua necessidade. Pode ser que seu projeto precise ter vários temas de cores ou você quer visuais diferentes (flat e skeumo por exemplo). Aí é bom separar as particularidades visuais de cada cenário em lugares separados.

Princípios teoricos

Modular e adaptável
Ou seja, você precisa combinar o quanto quiser todos os elementos o seu framework. Eles precisam ser plugáveis uns aos outros.

Leve
Escreva o mínimo possível. Não tente abraçar todos os browsers. Gracefull degradation e Progressive Enhancement devem estar no seu sangue.

Rápido
Mínimo de requisições. Isso quer dizer que você tem que usar o menor número de arquivos possível. Diminua o número de arquivos CSS, JS e Imagens.

Simples
Precisa ser fácil para fazer manutenção, legível para novos integrantes entenderem rapidamente.

Tenha poucas dependências
Dependa menos de terceiros. Existem plugins que são indispensáveis como JQuery. Seja criterioso com os plugins que você utilizar

Regra da similaridade
Se dois elementos são muito parecidos para incluir em uma página, provavelmente eles são muito parecidos para serem incluídos juntos em um site. Escolha um.

Na prática

Modularize componentes
Componentes são como legos. Você pluga diversas peças para formar uma peça maior.

Evite especificar tags. Mantenha o foco nas classes
É melhor fazer .btn do que a.btn
Botões podem ser um link, um input, uma tag button…
Deixe as classes livres para customizar qualquer elemento.

Não trave as dimensões do seu site.
O Grid controla a largura. O conteúdo controla a altura. Não trave alturas ou larguras a não ser que seja extremamente necessário.

Minimize seletores. Seja sucinto.
Não faça seletores complexos como: .search fieldset label .btn
Seja breve e vá direto ao ponto: .header .search .btn

Separe o conteúdo do container.
O estilo do conteúdo não pode ser dependente do seu container. Eu posso estilizar qualquer conteúdo independente do container que o elemento está. Trate o container como um módulo e o conteúdo como outro.

Separe a estrutura do layout
Você pode ter a liberdade de estilizar cada bloco de estrutura do jeito que achar melhor. O container pode ser estruturado de várias formas, com diferentes layouts.

CSS Incremental: customize objetos aplicando multiplas classes. Mas não abuse.
Aqui você deve ir com cuidado. Um botão pode ter vários tamanhos, defina um tamanho padrão, mas crie outras classes que mudarão o tamanho do botão conforme a necessidade. Fica assim:

<a href="#" class="btn btn-large">Botão</a>

Se quiser que esse botão flutue a direita, você pode inserir mais uma classe:

<a href="#" class="btn btn-large float-right">Botão</a>

Mas tome cuidado para não misturar muita “formatação” no HTML.

Use font para icones. É melhor ao lidar com diversos tamanhos e cores.
Fonts tem mais facilidade para mudarmos o tamanho, cores e posição.

Você pode usar algum pre-processador. Mas cuidado.
Pré-processadores podem te ajudar em diversas tarefas. Mas se não tomar cuidado o código pode ficar muito maior do que se fosse criado à mão.

Considere usar um framework como base

Não reinvente a roda. Procure um framework que te agrade mais e parta daí.
Customize o layout deste framework para a sua necessidade e adicione novas funções às funções existentes.

Publicado no dia