<
Menu

Tableless



Imagem post: Quando utilizar (ou não) frameworks CSS

Quando utilizar (ou não) frameworks CSS

A utilização de frameworks HTML e/ou CSS ainda é um assunto que divide a opinião dos desenvolvedores.

Framework é um conjunto de componentes que provêm uma estrutura básica de elementos reutilizáveis, tendo uma arquitetura consistente de funcionalidade genérica sob a qual a aplicação será construída.

No caso de CSS, os frameworks constituem bibliotecas que visam permitir a codificação do CSS de modo mais fácil e compatível com padrões de estilos, agregando uma série de opções já prontas para projetar uma página web, como se fosse um esqueleto, reduzindo o tempo gasto com o desenvolvimento.

Os frameworks CSS geralmente apresentam definições de formatação os elementos mais comuns de uma página: formulários, cabeçalhos, estilos de textos e imagens. Alguns apresentar opções para a estruturação do conteúdo baseado em grids.

A utilização de frameworks HTML e/ou CSS ainda é um assunto que divide a opinião dos desenvolvedores, pois muitos consideram o framework como uma solução pronta e acreditam que ele tira o trabalho das mãos do designer/desenvolvedor e faz com que ele não aprimore os seus conhecimentos.

Será que você, sem perceber, nunca criou o seu próprio framework? Pense em um arquivo CSS padrão (além do reset) que você criou para melhorar a produtividade de seus projetos.

É importante esclarecer que o uso de frameworks não substitui a necessidade do designer/ desenvolvedor de desenvolver o CSS do site. Ele apenas fornece uma base para a formatação de elementos comuns e otimiza o trabalho repetitivo.

Para quem os frameworks são recomendados

Utilizar um framework CSS não é uma prática recomendada para quem está começando, principalmente por privar a pessoa da prática e do conhecimento sobre o funcionamento do CSS. Além disso, se ela não compreender bem CSS, poderá ter problemas para resolver problemas de layout causados por incompatibilidade entre o framework e um código CSS específico que ela inseriu.

Portanto, é recomendável que frameworks sejam utilizados por quem possui um nível razoável de conhecimento e compreensão do código, mas tem a intenção de otimizar parte do trabalho com o uso de um framework. E isto serve não apenas para quem pretende utilizar um framework CSS, mas também qualquer tipo de framework.

Quando é interessante utilizar?

  • Prototipação rápida em HTML
  • Sites de larga escala e com estruturas similares (como portais, blog/sites no estilo magazine)
  • Sites construídos através de plataformas de CMS
  • Projetos que tenham prazos curtos
  • Projetos realizados em equipe onde há diversas pessoas trabalhando no mesmo CSS, podendo ter um conjunto consistente de padrões de codificação

Vantagens

  • Padronização de código entre a equipe de desenvolvimento;
  • Arquivos modularizados;
  • Flexibilidade de estilos, classes genéricas que podem ser combinadas de diversas formas nos elementos da página;
  • Geralmente já possuem uma documentação, que pode ser consultada pela equipe em caso de dúvida ou necessidade de solucionar algum problema;
  • Compatibilidade cross-browser (na maioria dos casos);
  • Você pode melhorar suas habilidades estudando o framework;
  • Redução de tempo: o desenvolvedor/designer pode se concentrar mais nos aspectos particulares do site desenvolvido, pois a base está assegurada e não precisa desenvolvê-la do zero;
  • Reduz futuros esforços de manutenção caso seja necessário resposicionar elementos ou alterar características de renderização (fonte, margens, etc) em diversos elementos.

Desvantagens

  • Quantidade excessiva de modificações que devem ser feitas para adaptar o framework;
  • O framework pode conter códigos irrelevantes que nunca serão utilizados no projeto e serão carregados sem necessidade, podendo diminuir o desempenho da página;
  • Nem sempre o código é bem organizado;
  • Muitos frameworks apresentam classes pouco semânticas (ex.: span-5).

Algumas dicas para melhorar o uso do framework

Como as classes geralmente não apresentam muita semântica, procure colocar IDs significativos nos elementos da página, quando possível.

Você também pode optar por utilizar somente uma parte do framework. Em projetos em que utilizei o Blueprint CSS, muitas vezes utilizava apenas algumas folhas de estilos do framework que se adequavam ao que eu necessitava.

Dica: evite usar vários frameworks CSS em um mesmo projeto. Isto quebra a ideia de consistência, uma vez que cada framework tem o seu padrão de estruturação.

Como escolher o framework?

  • Verificar se é realmente necessário o uso de um framework CSS no projeto;
  • Avaliar se o código do framework escolhido tem uma estrutura e organização;
  • Avaliar se há código excessivo que nunca será utilizado;
  • Conferir se há uma boa documentação;
  • Verificar se os recursos do framework são adequados ao que você necessita para o projeto. Não adianta utilizar um framework CSS focado em renderização quando seria mais útil um framework de grid.

Frameworks CSS, se bem utilizados, podem trazer muitos benefícios para seus projetos, basta saber como explorar o potencial que eles possuem ;)

Referências

Why you should NOT use a web framework - http://checkedexception.blogspot.com/2010/04/why-you-should-not-use-web-framework.html

To use a framework, or not to: that is the question - http://www.phparch.com/2010/04/to-use-a-framework-or-not-to-that-is-the-question/

Please do not Use CSS Frameworks - http://mondaybynoon.com/2007/08/27/please-do-not-use-css-frameworks/

Which CSS Grid Framework Should You Use for Web Design? - http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/

When to use CSS framework? - http://www.vcarrer.com/2008/08/when-to-use-css-framework.html

WHAT’S NOT TO LOVE ABOUT CSS FRAMEWORKS? - http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/

Frameworks for Designers - http://www.alistapart.com/articles/frameworksfordesigners

Por Talita Pagani

Talita Pagani, 25 anos, mora em Bauru, interior de SP. Atualmente é Analista de Testes na MStech, atuando com projetos educacionais. Também trabalha como web designer desde 2005, mas começou a se interessar pela área em 2001. É graduada em Ciência da Computação e pós-graduanda em Gerenciamento de Projetos. Apaixonada por usabilidade, design de interface e padrões web.

http://www.twitter.com/talitapagani

Mais posts do autor

Comentários (19)

  • http://www.brunopullis.com.br Bruno Pulis

    Concordo com o artigo.

    Estou iniciando com o Blueprint CSS e já vi a grande produtividade que ele pode nos trazes, utilizei a algum tempo também o 960gs curti bastante, mas o Blueprint me parece mais completo e robusto!

  • Denis Dib

    Muito legal o artigo.

  • Pedro Prá

    A utilização de FrameWork é uma mão na roda para o desenvolvedor, ao meu ver é muito interessante para uma empresa que desenvolve sistemas web e geralmente segue uma mesma linha de layouts em seus produtos. Porém eu acho mais recomendável a criação do framework pela própria empresa criando algo que venha as necessidades da mesma ao invés de simplesmente baixar uma solução pronta da internet. Para quem está iniciando na área de Html/CSS também pode contribuir muito nos estudos.

  • Renan Souza

    Nossa muito bom Talita, comecei há algum tempo como desenvolvedor web e somente hoje vim descobrir que existe frameworks para css rsrs mas, gostei bastante do seu artigo..queria lhe pedir (se não for pedir muito ^^) um artigo falando sobre as as características das principais Rendering engines existentes, pois até hoje não entendo porque esses navegadores renderizam a página de maneira diferentes..mas, é isso aí parabéns pelo excelente artigo e continua assim!

  • Deivid

    Ótimo artigo!!

  • http://www.jrgarou.com/ Júnior Santos

    Definitivamente o ideal é você usar partes do framework.
    E é legal conhecer vários, na intenção de entender como problemas foram solucionados e como as coisas são feitas.
    E no fim, ter o seu próprio framework.

    Bom artigo e boas referências, Talita.

  • http://agenciadigitalpix.com.br Jota Frank

    Ótimo post Talita está de parabéns!

  • http://romuloab.com Romulo

    Não acredito que o uso de Frameworks CSS possam, de algum modo, prejudicar o seu aprendizado sobre ele. Ele não é uma abstração ao CSS como ASP.Net/Struts/Code Igniter/Ruby on Rails/etc etc etc são à codificação HTML (sim, eles fazem muito mais além disso, mas não vem ao caso).

    De fato, das desvantagens enumeradas, apenas uma é plausível:

    1. Quantidade excessiva de modificações que devem ser feitas para adaptar o framework;
    Estes frameworks foram feitos para que você _comece_ projetos com eles.

    2. O framework pode conter códigos irrelevantes que nunca serão utilizados no projeto e serão carregados sem necessidade, podendo diminuir o desempenho da página;
    Todo Framework contém códigos “irrelevantes”. Se não houvesse, ele só serviria para um único projeto. Seu próprio Framework in-house acumula partes irrelevantes conforme amadurece entre projetos.

    3. Nem sempre o código é bem organizado;
    Todos Frameworks que conheço são bem organizados e documentados. Talvez você tenha visto a versão “minified” dos arquivos CSS.

    4. Muitos frameworks apresentam classes pouco semânticas (ex.: span-5).
    Concordo, e por isso prefiro usar outras ferramentas como LESS ou SCSS. Desta forma, posso fazer algo:

    #navegacao { .span-4; }
    #conteudo { .offset-4; .span-12; }

    E deixar o HTML limpo:

    Concluindo, ao contrário dos comentários incentivando o não-uso destes Frameworks/resets, eu aconselho exatamente o contrário: use-os e abuse-os. Há muito know-how escondido nas declarações de estilo “desorganizadas”. Compatibilidade entre navegadores não é nada divertido e eles amenizam boa parte deste sofrimento. Portanto, não consigo pensar em nenhum argumento forte o suficiente contra o uso deles; só se você é sádico e gosta de encontrar seus elementos posicionados arbitrariamente conforme o navegador.

  • http://vidit.com.br Riccardo Benetti

    Eu utilizo um framework próprio que busco melhorar a cada projeto.

    Já usei o 960, o blueprint e até tentei o Yui da Yahoo mas não gostei de todos eles, o ideal é você começar com uma estrutura e ir melhorando e assim criando o seu padrão.

  • http://www.odirleiborgert.comm.br Odirlei

    Gostei Talita, parabéns… tem outras dicas de outros frameworks? hoje para meus projetos internos estou utilizando o BOOTSTRAP http://twitter.github.com/bootstrap/

  • http://www.lcbahiana.net Luis bahiana

    Como codificador HTML/CSS iniciante acho que os frame podem sim, ser um instrumento de aprendizado, principalmente se forem personalizados para o teu caso – não simplesmente cortar e colar.

  • Rafael Motta

    Interessante artigo.

    O Less e o Sass, que são as bibliotecas mais famosas de CSS não foram citadas. Vi que vc citou outras, que perto desses 2 são bem mais simples…você por acaso estaria desconsiderado esses 2 como frameworks CSS?

    Eu particulamente sou defensor do uso de frameworks CSS, em especial esses 2 que citei. Uso o Less principalmente, por que a equipe de design tem mais facilidade do que usar o SASS.

    Meu código melhorou muito, ficou muito mais organizado, e além disso ele possui recursos muito interessantes, como receber parâmetros em classes, operações e até mesmo algumas funções lógica, pra quem quer ir mais além.

    Essa desvantagem que vc falou(abaixo), pra mim é muito imparcial:

    O framework pode conter códigos irrelevantes que nunca serão utilizados no projeto e serão carregados sem necessidade, podendo diminuir o desempenho da página;

    Isso qualquer código CSS pode ter, e sinceramente, hoje, com algumas técnicas de otimização, como a minificacao do código CSS ,o desempenho pode ser muito superior do que ter várias folhas de estilos pra evitar códigos irrelevantes. Cada requisição HTTP custa caro…

    Abraço

  • Felipe

    Tenho meu próprio “framework”. Utilizo sempre o mesmo tipo de nomeclatura de classes para os formularios, textos e box. Procuro organizar muito bem os arquivos, classes e ids que geralmente são padrão na análise prévia de cada projeto. Fiz vários testes com muitos frameworks, nunca adotei em nenhum projeto, mas é muito bom tentar compreender o seu funcionamento e procuro colocar em prática a sua organização nos css dos meus projetos. Penso que os frameworks (prontos) server mais para programadores que tem uma base de css e querem facilitar o desenvolvimento de seus projetos sem ter um desenvolvedor front-end na equipe. Para isso acho bem legal os frameworks css pois facilitam a implementação deles.

    Muito legal abordar o tema Talita, afinal tem sempre coisas novas no mercado, principalmente internacional e pelos frameworks podemos ter mais idéias e uma base de organização em nossos próprios css.

  • http://www.andreamaral.net André Amaral

    Gosto de criar os arquivos a cada projeto e escrever um código especifico para ele.

  • estenio

    Acho que frameworks não servem não, pois a cada projeto há fontes diferentes, estruturas diferentes sites mais ou menos detalhado fora a organização que manualmente é bem melhor, na minha opinião depois de um tempo de experiência o programador faz um código cada vez mais enxuto organizado.
    Fora que nem foi citado como fica o SEO do site, e como fica també em relação as normas do w3c.
    Resumindo eu não uso e também não usaria.

  • http://cesaraugustorodriguesdeoliveira.wordpress.com/ Cesar Augusto Rodrigues de Oliveira

    Erro no texto

    “Alguns ***apresentar*** opções para a estruturação do conteúdo baseado em grids.”

    O certo seria

    Alguns apresentam opções para a estruturação do conteúdo baseado em grids.

  • http://twitter.com/cssorbit Danilo Ramos

    Bacana o artigo, agora sei mais sobre frameworks !

  • Julio Cezar Giacobbo

    Olá, muito bacana o artigo, tenho pensado a muito ver como funciona. Talita, voce teria algum Framework de exemplo?

    Abs,
    Julio Giacobbo
    http:\www.stocksites.com.br

  • AFF

    Ava! Nao me diga? ¬¬