A internet evolui diariamente, isso é um fato. Tal evolução demanda cada vez mais recursos (tanto para quem utiliza aplicações e serviços web, quanto para quem os implementa).
No sentido de incrementar produtividade e adicionar melhores práticas ao processo de desenvolvimento de aplicações para a internet, a comunidade técnica de desenvolvedores ao redor do mundo constantemente implementa, disponibiliza e mantém novos recursos ativos. Alguns exemplos são:
- PDF Sharp: um complemento para processar programaticamente arquivos PDF.
- JSON .NET: um framework de alta performance para o trabalho com JSON.
- MVC Contribut: framework escrito para desenvolvedores que desejam testar elementos de UI em suas aplicações MVC.
Nesta série apresentaremos os conceitos fundamentais relacionados a um novo framework escrito nos padrões mencionados anteriormente, isto é, desenvolvido e mantido pela comunidade técnica que tem por objetivo permitir a escrita de código CSS de forma otimizada: LESS CSS.
Observação: esta série não ensinará CSS. Aqui, partimos do princípio de que os conceitos relacionados a esta linguagem já são conhecidos por você e nos concentramos apenas em apresentar uma nova forma de trabalhar com eles.
O que é LESS CSS?
LESS é um termo da lingua inglesa que designa “menos – menor quantidade”. A framework alvo de nosso estudo nesta série tem este nome (LESS CSS) não por acaso. LESS CSS é uma framework escrita com o ojetivo de otimizar a escrita de códigos na linguagem CSS, fato este que necessariamente implica na diminuição da quantidade de código escrito. Menos código escrito significa mais performance na renderização das páginas, o que implica em maior velocidade na exibição da informação para o usuário final.
Além das características recém mencionadas, há um aspecto proporcionado por esta framework que é determinante para sua adoção: o desenvolvedor pode escrever códigos mais limpos e elegantes, conforme veremos com a evolução da série.
CSS dinâmico?
Se existe uma palavra que chama atenção de qualquer desenvolvedor que inicia seus estudos em uma linguagem, framework, whatever, está palavra é “dinamismo”. De forma geral, bons devs buscam encontrar melhores formas de escrever seus códigos e, tecnologias que apresentam aspectos dinâmicos, sempre se apresentam como opções interessantes.
Conforme apresenta a imagem do início deste texto, LESS CSS apresenta uma forma dinâmica de escrever folhas de estilos (It’s the dynamic stylesheet language). O “dinamismo” é proporcionado por recursos como: variáveis, mixins, operações, funções, etc. (falaremos individualmente sobre cada recurso nos próximos posts).
Onde funciona?
Uma característica interessante do LESS CSS é que este funciona tanto do lado do cliente quanto do lado do servidor (neste último utilizando Node.js e Rhino). Assim, podemos “escolher” o ambiente para renderização do código LESS. Em post futuro, falaremos especificamente sobre como utilizar em ambos os cenários.
Criando o mind set
Agora que os conceitos estão “saltando a vista”, basta realizarmos uma análise simples em no modelo tradicional de escrita de códigos CSS para obtermos uma auto-justificação do LESS. Assim, considere o código apresentado pela Listagem 1.
[css]
#BoxTexto { color: #000; background: #EFEFEF; }
#BoxTexto a { text-decoration: underline; }
#BoxTexto p { font-family: Arial; }
#BoxTexto x {…} #BoxTexto y {…}
#BoxTexto z {…}
[/css]
Listagem 1. Forma tradicional de escrever código CSS
O problema é evidente, certo? Para que possamos utilizar o mecanismo de herança, precisamos reecrever o mesmo código seis vezes. Em um tempo onde produtividade é fator chave no processo de desenvolvimento de software, este tipo de notação tende a cada vez mais, cair em desuso.
Em contra partida, observe o código apresentado pela Listagem 2.
[css]
#BoxTexto {
color: #000;
background: #EFEFEF;
a { text-decoration: underline; }
p { font-family: Arial; }
}
[/css]
Listagem 2. CSS reduzido
Bem melhor não? Esta é a proposta do framework LESS. O mesmo código escrito de forma mais elegante e inteligente resultando no mesmo aspecto visual entretanto, com mais performance.
Por hoje é só pessoal. Nos próximos posts da série veremos recurso a recurso individualmente e aprenderemos como esta nova forma de escrever código CSS pode ser extremamente útil em nosso dia a dia.
Até lá!
Pingback: Oneda | Aconteceu no Twitter 103 - 11/03/12 a 17/03/12
Pingback: LESS CSS: Início, Meio e Fim – Como utilizar? – Fabrício Sanchez