Image Image Image Image Image
Scroll to Top

Topo

less css

16

mar
2012

Sem Comentários

Em Blog
CSS

Por Allison

LESS CSS: Início, Meio e Fim – Conceitos iniciais

Em 16, mar 2012 | Sem Comentários | Em Blog, CSS | Por Allison

Fonte: Fabrício Sanchez!

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.

#BoxTexto { color: #000; background: #EFEFEF; }
#BoxTexto a { text-decoration: underline; }
#BoxTexto p { font-family: Arial; }
#BoxTexto x {...} #BoxTexto y {...}
#BoxTexto z {...}

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.

#BoxTexto {
color: #000;
background: #EFEFEF;
a { text-decoration: underline; }
p { font-family: Arial; }
}

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.

Tags | , , , , , ,