Tagon8 Blog

modelo topo de post (1)

Dando vida ao CSS

Quando começamos a desenvolver para a web, tudo parece extremamente empolgante, ainda mais quando se trata do nosso famoso cascading style sheets (folha de estilo em cascata) ou, para os amigos mais íntimos, CSS. As primeiras linhas desse código é de um fascinio incrível.
Todo o seu website deixa de ser apenas um texto marcado com HTML para ganhar cores, formas, sombras, transparências e muitos outros aspectos que trabalham junto para um único objetivo: criar uma obra de arte na world wide web.

Tudo são rosas até aqui. Com todas as heranças e precedência de seletores o trabalho passa a ficar muito complicado, podendo ter impactos negativos em outras partes do seu website. Para suprir a necessidade de um código mais reaproveitável e mais flexível foi introduzido então o conceito de pré-processadores de CSS, que será o assunto abordado por esta publicação.

Pré-processadores

Nada mais é do que um programa que recebe o texto e realiza conversão léxica nele de uma forma mais simples. É como se passássemos um texto em português informal com gírias e falhas de pontuação ao nosso programa e ele se responsabiliza-se em convertê-lo para o português formal.
Com tudo isso, passamos a ter uma pseudo linguagem de programação. Indo mais a fundo, com a utilização de um pré-processador foi possivel trazer ao
CSS alguns processamentos lógicos e conceitos básicos da programação como a criação de variáveis, funções e estruturas de decisão lógica. Deste modo muitos problemas corriqueiros de CSS como valores repetidos, arquivos com muitas linhas de códigos e vários prefixos podem ser resolvidos.

 

Principais recursos dos pré-processadores

 

  • Variáveis: são usadas para armazenar informações. Nos pré-processadores essas variáveis na verdade funcionam como constantes, sendo definida apenas uma vez, ótimo para guardar as principais cores de um template, fonte padrão, etc.
  • Operadores: são úteis para cálculos matemáticos como controle de altura e largura, podendo também ser baseado em variáveis.
  • Aninhamento: embora as linguagens de marcação como HTML e XML disponibilizem meios de aninhar conteúdo, o CSS não oferece esse tipo de suporte, o que acaba gerando confusão na folha de estilo e duplicação nas declarações. Os pré-processadores oferecem uma alternativa simples de alinhamento que resolve esse problema, deixando o código mais limpo e de fácil entendimento.
  • Importação: o CSS oferece esse recurso mas para cada importação é gerado uma requisição HTTP, o que não é muito interessante, uma vez que processado será gerado um arquivo CSS com todo conteúdo necessário, possibilitando organizar os estilos mas sem comprometer o desempenho.
  • Mixins: Os mixins permitem que sejam criados grupos de declarações, como por exemplo classes, que serão reutilizadas no decorrer do código, onde é possível definir parâmetros, possibilitando também o comportamento de herança.
  • Funções: Este recurso não é oferecido por todos os pré-processadores, seu objetivo é disponibilizar funções pré-definidas, visando operações matemáticas, tipo de variável, definição de cores, etc.

 

Há vários pré-processadores os mais utilizados atualmente são LESS, SASS e Stylus. Todos eles possuem as caracteristicas acima citadas, ficando a cargo do desenvolvedor utilizar o que mais lhe agrada. Com todas as facilidades incorporadas por este novo conceito, o desenvolvimento front-end se beneficia bastante, e os desenvolvedores precisam se atualizar se quiserem se manter no mercado.